site-builder/craft/src/components/layout/Section.tsx

import React, { CSSProperties } from 'react';
import { useNode, Element, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { Container } from './Container';
import { AnchorIdField } from '../../ui/AnchorIdField';

/* ---------- Shape Divider SVG Paths ---------- */

type DividerShape = 'none' | 'wave' | 'angle' | 'curve' | 'triangle' | 'zigzag';

const DIVIDER_PATHS: Record<Exclude<DividerShape, 'none'>, string> = {
  wave: 'M0,0 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z',
  angle: 'M0,0 L1200,120 L0,120 Z',
  curve: 'M0,0 Q600,140 1200,0 L1200,120 L0,120 Z',
  triangle: 'M0,120 L600,0 L1200,120 Z',
  zigzag: 'M0,120 L100,40 L200,120 L300,40 L400,120 L500,40 L600,120 L700,40 L800,120 L900,40 L1000,120 L1100,40 L1200,120 Z',
};

const DIVIDER_SHAPES: DividerShape[] = ['none', 'wave', 'angle', 'curve', 'triangle', 'zigzag'];

interface SectionProps {
  style?: CSSProperties;
  innerMaxWidth?: string;
  children?: React.ReactNode;
  topDivider?: DividerShape;
  topDividerColor?: string;
  topDividerHeight?: string;
  bottomDivider?: DividerShape;
  bottomDividerColor?: string;
  bottomDividerHeight?: string;
  anchorId?: string;
}

/* ---------- Divider renderer ---------- */

const ShapeDivider: React.FC<{
  shape: DividerShape;
  color: string;
  height: string;
  position: 'top' | 'bottom';
}> = ({ shape, color, height, position }) => {
  if (!shape || shape === 'none') return null;
  const path = DIVIDER_PATHS[shape];
  if (!path) return null;

  const isTop = position === 'top';

  return (
    <div
      style={{
        position: 'absolute',
        [position]: 0,
        left: 0,
        right: 0,
        height: height || '50px',
        overflow: 'hidden',
        lineHeight: 0,
        pointerEvents: 'none',
      }}
    >
      <svg
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
        style={{
          width: '100%',
          height: '100%',
          fill: color || '#ffffff',
          transform: isTop ? 'rotate(180deg)' : undefined,
          display: 'block',
        }}
      >
        <path d={path} />
      </svg>
    </div>
  );
};

/* ---------- Component ---------- */

export const Section: UserComponent<SectionProps> = ({
  style = {},
  innerMaxWidth = '1200px',
  children,
  topDivider = 'none',
  topDividerColor = '#ffffff',
  topDividerHeight = '50px',
  bottomDivider = 'none',
  bottomDividerColor = '#ffffff',
  bottomDividerHeight = '50px',
  anchorId,
}) => {
  const { connectors: { connect, drag } } = useNode();

  const hasTopDivider = topDivider && topDivider !== 'none';
  const hasBottomDivider = bottomDivider && bottomDivider !== 'none';

  return (
    <section
      ref={(ref: HTMLElement | null) => { if (ref) connect(drag(ref)); }}
      id={anchorId || undefined}
      style={{
        width: '100%',
        position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
        ...style,
      }}
    >
      {hasTopDivider && (
        <ShapeDivider
          shape={topDivider}
          color={topDividerColor}
          height={topDividerHeight}
          position="top"
        />
      )}
      <Element
        id="section-inner"
        is={Container}
        canvas
        style={{ maxWidth: innerMaxWidth, margin: '0 auto', position: 'relative', zIndex: 1 }}
        tag="div"
      >
        {children}
      </Element>
      {hasBottomDivider && (
        <ShapeDivider
          shape={bottomDivider}
          color={bottomDividerColor}
          height={bottomDividerHeight}
          position="bottom"
        />
      )}
    </section>
  );
};

/* ---------- Settings panel ---------- */

const sLabelStyle: React.CSSProperties = {
  fontSize: 11, fontWeight: 600, color: '#a1a1aa', display: 'block', marginBottom: 6,
  textTransform: 'uppercase', letterSpacing: '0.3px',
};

const sInputStyle: React.CSSProperties = {
  width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7',
  border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
};

const sSelectStyle: React.CSSProperties = {
  width: '100%', padding: '5px 8px', background: '#27272a', color: '#e4e4e7',
  border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
};

const DividerSettings: React.FC<{
  label: string;
  shape: DividerShape;
  color: string;
  height: string;
  onShapeChange: (s: DividerShape) => void;
  onColorChange: (c: string) => void;
  onHeightChange: (h: string) => void;
}> = ({ label, shape, color, height, onShapeChange, onColorChange, onHeightChange }) => {
  const heightNum = parseInt(height, 10) || 50;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label style={sLabelStyle}>{label}</label>

      {/* Shape selector */}
      <select
        value={shape || 'none'}
        onChange={(e) => onShapeChange(e.target.value as DividerShape)}
        style={sSelectStyle}
      >
        {DIVIDER_SHAPES.map((s) => (
          <option key={s} value={s}>{s === 'none' ? 'None' : s.charAt(0).toUpperCase() + s.slice(1)}</option>
        ))}
      </select>

      {shape && shape !== 'none' && (
        <>
          {/* Color picker */}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <input
              type="color"
              value={color || '#ffffff'}
              onChange={(e) => onColorChange(e.target.value)}
              style={{ width: 32, height: 28, border: '1px solid #3f3f46', borderRadius: 4, background: 'none', cursor: 'pointer', padding: 0 }}
            />
            <input
              type="text"
              value={color || '#ffffff'}
              onChange={(e) => onColorChange(e.target.value)}
              style={{ ...sInputStyle, flex: 1 }}
              placeholder="#ffffff"
            />
          </div>

          {/* Height slider */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
              <span style={{ fontSize: 10, color: '#71717a' }}>Height</span>
              <span style={{ fontSize: 10, color: '#a1a1aa' }}>{heightNum}px</span>
            </div>
            <input
              type="range"
              min={10}
              max={200}
              value={heightNum}
              onChange={(e) => onHeightChange(`${e.target.value}px`)}
              style={{ width: '100%', accentColor: '#3b82f6' }}
            />
          </div>

          {/* Small SVG preview */}
          <div style={{ background: '#18181b', borderRadius: 4, padding: 4, border: '1px solid #3f3f46', overflow: 'hidden' }}>
            <svg viewBox="0 0 1200 120" preserveAspectRatio="none" style={{ width: '100%', height: 30, fill: color || '#ffffff', display: 'block' }}>
              <path d={DIVIDER_PATHS[shape]} />
            </svg>
          </div>
        </>
      )}
    </div>
  );
};

const SectionSettings: React.FC = () => {
  const { actions: { setProp }, props } = useNode((node) => ({
    props: node.data.props as SectionProps,
  }));

  const bgPresets = ['#ffffff', '#f8fafc', '#f1f5f9', '#0f172a', '#1e293b', '#18181b', '#f0fdf4', '#eff6ff'];
  const paddingPresets = ['0px', '20px', '40px', '60px', '80px', '120px'];

  return (
    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
      <AnchorIdField />
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Color</label>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {bgPresets.map((c) => (
            <button
              key={c}
              onClick={() => setProp((p: SectionProps) => { p.style = { ...p.style, backgroundColor: c }; })}
              style={{
                width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
                backgroundColor: c, cursor: 'pointer',
                outline: props.style?.backgroundColor === c ? '2px solid #3b82f6' : 'none',
                outlineOffset: 1,
              }}
            />
          ))}
        </div>
      </div>

      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Gradient</label>
        <input
          type="text"
          placeholder="e.g. linear-gradient(135deg, #667eea, #764ba2)"
          value={(props.style?.background as string) || ''}
          onChange={(e) => setProp((p: SectionProps) => { p.style = { ...p.style, background: e.target.value }; })}
          style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11 }}
        />
      </div>

      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Padding (top/bottom)</label>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {paddingPresets.map((p) => (
            <button
              key={p}
              onClick={() => setProp((pr: SectionProps) => {
                pr.style = { ...pr.style, paddingTop: p, paddingBottom: p };
              })}
              style={{
                padding: '2px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
                border: '1px solid #3f3f46',
                background: props.style?.paddingTop === p ? '#3b82f6' : '#27272a',
                color: '#e4e4e7',
              }}
            >
              {p}
            </button>
          ))}
        </div>
      </div>

      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Inner Max Width</label>
        <input
          type="text"
          value={props.innerMaxWidth || '1200px'}
          onChange={(e) => setProp((p: SectionProps) => { p.innerMaxWidth = e.target.value; })}
          style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11 }}
        />
      </div>

      {/* Divider separator */}
      <div style={{ borderTop: '1px solid #3f3f46', paddingTop: 10 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#e4e4e7', marginBottom: 10 }}>Shape Dividers</div>

        <DividerSettings
          label="Top Divider"
          shape={props.topDivider || 'none'}
          color={props.topDividerColor || '#ffffff'}
          height={props.topDividerHeight || '50px'}
          onShapeChange={(s) => setProp((p: SectionProps) => { p.topDivider = s; })}
          onColorChange={(c) => setProp((p: SectionProps) => { p.topDividerColor = c; })}
          onHeightChange={(h) => setProp((p: SectionProps) => { p.topDividerHeight = h; })}
        />

        <div style={{ height: 10 }} />

        <DividerSettings
          label="Bottom Divider"
          shape={props.bottomDivider || 'none'}
          color={props.bottomDividerColor || '#ffffff'}
          height={props.bottomDividerHeight || '50px'}
          onShapeChange={(s) => setProp((p: SectionProps) => { p.bottomDivider = s; })}
          onColorChange={(c) => setProp((p: SectionProps) => { p.bottomDividerColor = c; })}
          onHeightChange={(h) => setProp((p: SectionProps) => { p.bottomDividerHeight = h; })}
        />
      </div>
    </div>
  );
};

/* ---------- Craft config ---------- */

Section.craft = {
  displayName: 'Section',
  props: {
    style: { padding: '40px 0', backgroundColor: '#ffffff' },
    innerMaxWidth: '1200px',
    topDivider: 'none',
    topDividerColor: '#ffffff',
    topDividerHeight: '50px',
    bottomDivider: 'none',
    bottomDividerColor: '#ffffff',
    bottomDividerHeight: '50px',
    anchorId: '',
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => true,
    canMoveOut: () => true,
  },
  related: {
    settings: SectionSettings,
  },
};

/* ---------- HTML export ---------- */

function buildDividerHtml(
  shape: DividerShape | undefined,
  color: string | undefined,
  height: string | undefined,
  position: 'top' | 'bottom',
): string {
  if (!shape || shape === 'none') return '';
  const path = DIVIDER_PATHS[shape];
  if (!path) return '';

  const isTop = position === 'top';
  const h = height || '50px';
  const c = color || '#ffffff';

  const wrapperStyle = cssPropsToString({
    position: 'absolute',
    [position]: '0',
    left: '0',
    right: '0',
    height: h,
    overflow: 'hidden',
    lineHeight: '0',
    pointerEvents: 'none',
  } as CSSProperties);

  const svgTransform = isTop ? ' transform:rotate(180deg);' : '';

  return `<div style="${wrapperStyle}"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" style="width:100%;height:100%;fill:${c};display:block;${svgTransform}"><path d="${path}"/></svg></div>`;
}

(Section as any).toHtml = (props: SectionProps, childrenHtml: string) => {
  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  const hasTopDivider = props.topDivider && props.topDivider !== 'none';
  const hasBottomDivider = props.bottomDivider && props.bottomDivider !== 'none';

  const outerStyle = cssPropsToString({
    width: '100%',
    position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
    ...props.style,
  });
  const innerStyle = cssPropsToString({
    maxWidth: props.innerMaxWidth || '1200px',
    margin: '0 auto',
    position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
    zIndex: (hasTopDivider || hasBottomDivider) ? 1 : undefined,
  } as CSSProperties);

  const topHtml = buildDividerHtml(props.topDivider, props.topDividerColor, props.topDividerHeight, 'top');
  const bottomHtml = buildDividerHtml(props.bottomDivider, props.bottomDividerColor, props.bottomDividerHeight, 'bottom');
  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';

  return {
    html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${topHtml}<div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div>${bottomHtml}</section>`,
  };
};