// decorative.jsx — Decorative elements & patterns (expanded).
// Reusable visual vocabulary for the institutional site, posters,
// social, certificates, receipts.

const FIVE = ['var(--ceu)', 'var(--ceramica)', 'var(--sol)', 'var(--rosa)', 'var(--folha)'];

// ────────────────────────────────────────────────────────────────
// CATEGORY · DIVIDERS — discrete units between content blocks
// ────────────────────────────────────────────────────────────────

// 01 — Five Dots
function DecFiveDots({ size = 10, gap = 12, colors = FIVE }) {
  return (
    <div style={{ display: 'inline-flex', gap, alignItems: 'center' }}>
      {colors.map((c, i) => (
        <span key={i} style={{ width: size, height: size, borderRadius: '50%', background: c }} />
      ))}
    </div>
  );
}

// 02 — Five Triangles
function DecFiveTriangles({ size = 16, gap = 5 }) {
  return (
    <svg width={(size + gap) * 5 - gap} height={size} xmlns="http://www.w3.org/2000/svg">
      {FIVE.map((c, i) => {
        const x = i * (size + gap);
        return (
          <path key={i}
            d={`M${x + size / 2} 0 L${x} ${size} L${x + size} ${size} Z`}
            fill={c}
          />
        );
      })}
    </svg>
  );
}

// 03 — Five Squares (rotated 45°)
function DecFiveDiamonds({ size = 12, gap = 8 }) {
  return (
    <div style={{ display: 'inline-flex', gap, alignItems: 'center' }}>
      {FIVE.map((c, i) => (
        <span key={i} style={{
          width: size, height: size, background: c, transform: 'rotate(45deg)',
        }} />
      ))}
    </div>
  );
}

// 04 — Five Bars (varying heights — references the original child drawing)
function DecFiveBars({ unit = 8, gap = 4, max = 5 }) {
  const heights = [3, 5, 5, 2, 4];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'flex-end', gap }}>
      {FIVE.map((c, i) => (
        <span key={i} style={{
          width: unit, height: heights[i] * unit, background: c, borderRadius: 1,
        }} />
      ))}
    </div>
  );
}

// 05 — Roof Rule (horizontal rule with house-roof apex)
function DecRoofRule({ width = 280, height = 28, color = 'var(--ink)' }) {
  const mid = width / 2;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'block' }}>
      <path
        d={`M0 ${height - 4} L${mid - 22} ${height - 4} L${mid} 4 L${mid + 22} ${height - 4} L${width} ${height - 4}`}
        fill="none" stroke={color} strokeWidth="1.5"
        strokeLinecap="round" strokeLinejoin="round"
      />
    </svg>
  );
}

// 06 — Five Roof Rule (5 small roofs centered)
function DecFiveRoofs({ unit = 16, gap = 6 }) {
  return (
    <svg width={(unit + gap) * 5} height={unit * 0.8} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      {FIVE.map((c, i) => {
        const x = i * (unit + gap);
        return (
          <path key={i}
            d={`M${x + 2} ${unit * 0.78} L${x + unit / 2} ${unit * 0.18} L${x + unit - 2} ${unit * 0.78}`}
            fill="none" stroke={c} strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round"
          />
        );
      })}
    </svg>
  );
}

// 07 — Section Mark (small house silhouette · use before section labels)
function DecSectionMark({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <path d="M2 9 L9 2 L16 9 L16 16 L2 16 Z" fill="var(--ink)" />
      <rect x="7" y="11" width="4" height="5" fill="var(--paper)" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────
// CATEGORY · LINE ART — long-form decoration for marginalia, page edges
// ────────────────────────────────────────────────────────────────

// 08 — Caminho (winding dashed path with sun)
function DecPath({ width = 280, height = 60, sun = true }) {
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'block' }}>
      <path
        d={`M4 ${height / 2} Q${width * 0.2} 8 ${width * 0.4} ${height / 2} T${width * 0.8} ${height / 2} T${width - 4} ${height / 2}`}
        fill="none" stroke="var(--ink)" strokeWidth="2"
        strokeLinecap="round" strokeDasharray="2 6"
      />
      {sun && (
        <circle cx={width - 4} cy={height / 2} r="6" fill="var(--sol)" stroke="var(--ink)" strokeWidth="1.5" />
      )}
    </svg>
  );
}

// 09 — Vertical caminho — same path rotated, for page margins
function DecPathVertical({ width = 60, height = 280 }) {
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'block' }}>
      <path
        d={`M${width / 2} 4 Q8 ${height * 0.2} ${width / 2} ${height * 0.4} T${width / 2} ${height * 0.8} T${width / 2} ${height - 4}`}
        fill="none" stroke="var(--ink)" strokeWidth="2"
        strokeLinecap="round" strokeDasharray="2 6"
      />
      <circle cx={width / 2} cy="4" r="6" fill="var(--sol)" stroke="var(--ink)" strokeWidth="1.5" />
    </svg>
  );
}

// 10 — Quote marks (large editorial quote)
function DecQuoteMark({ size = 80, color = 'var(--sol)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <text x="0" y="78" fontFamily="Instrument Serif, serif" fontSize="140" fill={color} fontStyle="italic">
        “
      </text>
    </svg>
  );
}

// 11 — Page corner ornament (top-left)
function DecCornerOrnament({ size = 60, position = 'tl' }) {
  // position: tl, tr, bl, br
  const rotate = { tl: 0, tr: 90, br: 180, bl: 270 }[position];
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"
      style={{ display: 'block', transform: `rotate(${rotate}deg)` }}>
      <path d="M4 22 L4 4 L22 4" fill="none" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="14" cy="14" r="2.5" fill="var(--sol)" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────
// CATEGORY · RAYS / SUN — light motifs
// ────────────────────────────────────────────────────────────────

// 12 — Sunburst (rays from a corner)
function DecSunburst({ size = 220, origin = 'bl' }) {
  let cx = 0, cy = size;
  if (origin === 'br') { cx = size; cy = size; }
  if (origin === 'tl') { cx = 0; cy = 0; }
  if (origin === 'tr') { cx = size; cy = 0; }
  if (origin === 'c')  { cx = size / 2; cy = size / 2; }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      {Array.from({ length: 14 }).map((_, i) => {
        const angle = origin === 'bl'
          ? (i / 14) * 90 - 90
          : origin === 'br' ? 180 + (i / 14) * 90
          : origin === 'tl' ? (i / 14) * 90
          : origin === 'tr' ? 90 + (i / 14) * 90
          : i * (360 / 14);
        const rad = (angle * Math.PI) / 180;
        const len = size * (i % 3 === 0 ? 0.95 : 0.82);
        const ex = cx + Math.cos(rad) * len;
        const ey = cy + Math.sin(rad) * len;
        return (
          <line key={i}
            x1={cx} y1={cy} x2={ex} y2={ey}
            stroke={FIVE[i % 5]} strokeWidth={i % 3 === 0 ? 5 : 3}
            strokeLinecap="round"
            opacity={i % 3 === 0 ? 0.85 : 0.55}
          />
        );
      })}
    </svg>
  );
}

// 13 — Single sun (sol) symbol
function DecSun({ size = 60, rays = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      {rays && Array.from({ length: 8 }).map((_, i) => {
        const a = (i * 360) / 8;
        const rad = (a * Math.PI) / 180;
        return (
          <line key={i}
            x1={30 + Math.cos(rad) * 18} y1={30 + Math.sin(rad) * 18}
            x2={30 + Math.cos(rad) * 26} y2={30 + Math.sin(rad) * 26}
            stroke="var(--sol)" strokeWidth="2.5" strokeLinecap="round"
          />
        );
      })}
      <circle cx="30" cy="30" r="12" fill="var(--sol)" />
    </svg>
  );
}

// 14 — Half-sun (horizon line)
function DecHalfSun({ width = 140, height = 70 }) {
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <path d={`M${width * 0.3} ${height} A${width * 0.2} ${width * 0.2} 0 0 1 ${width * 0.7} ${height}`} fill="var(--sol)" />
      {[0, 1, 2, 3, 4].map((i) => {
        const a = -180 + (i / 4) * 180;
        const rad = (a * Math.PI) / 180;
        return (
          <line key={i}
            x1={width / 2 + Math.cos(rad) * (width * 0.2 + 6)}
            y1={height + Math.sin(rad) * (width * 0.2 + 6)}
            x2={width / 2 + Math.cos(rad) * (width * 0.2 + 18)}
            y2={height + Math.sin(rad) * (width * 0.2 + 18)}
            stroke={FIVE[i]} strokeWidth="3.5" strokeLinecap="round"
          />
        );
      })}
      <line x1="0" y1={height} x2={width} y2={height} stroke="var(--ink)" strokeWidth="2" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────
// CATEGORY · PATTERNS — full tile fills
// ────────────────────────────────────────────────────────────────

// 15 — Roof pattern
function DecPatternRoofs({ density = 40, opacity = 0.35 }) {
  return (
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <pattern id="dec-roofs" x="0" y="0" width={density} height={density} patternUnits="userSpaceOnUse">
          <path d={`M4 ${density - 6} L${density / 2} 6 L${density - 4} ${density - 6}`}
            fill="none" stroke="var(--ink)" strokeWidth="1.2"
            strokeLinecap="round" strokeLinejoin="round" opacity={opacity} />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dec-roofs)" />
    </svg>
  );
}

// 16 — Dots pattern (palette dots scattered on a grid)
function DecPatternDots({ tile = 32 }) {
  return (
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <pattern id="dec-dots" x="0" y="0" width={tile * 5} height={tile} patternUnits="userSpaceOnUse">
          {FIVE.map((c, i) => (
            <circle key={i} cx={i * tile + tile / 2} cy={tile / 2} r="2.5" fill={c} opacity="0.55" />
          ))}
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dec-dots)" />
    </svg>
  );
}

// 17 — Path pattern (winding caminhos repeated)
function DecPatternPath() {
  const tile = 80;
  return (
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <pattern id="dec-paths" x="0" y="0" width={tile * 2} height={tile} patternUnits="userSpaceOnUse">
          <path d={`M0 ${tile / 2} Q${tile / 2} 8 ${tile} ${tile / 2} T${tile * 2} ${tile / 2}`}
            fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.32"
            strokeDasharray="2 4"
          />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dec-paths)" />
    </svg>
  );
}

// 18 — Houses+dots pattern (richer fill)
function DecPatternHouses() {
  const tile = 80;
  return (
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <pattern id="dec-houses" x="0" y="0" width={tile} height={tile} patternUnits="userSpaceOnUse">
          <g transform={`translate(${tile / 2} ${tile / 2})`}>
            <path d="M-16 -6 L0 -22 L16 -6" fill="none" stroke="var(--ink)"
              strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" opacity="0.5" />
            {[-10, -5, 0, 5, 10].map((x, i) => (
              <circle key={i} cx={x} cy="6" r="2" fill={FIVE[i]} opacity="0.8" />
            ))}
          </g>
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dec-houses)" />
    </svg>
  );
}

// 19 — Cross-stitch grid pattern (referencing the embroidery feel)
function DecPatternStitch() {
  const tile = 18;
  return (
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        <pattern id="dec-stitch" x="0" y="0" width={tile} height={tile} patternUnits="userSpaceOnUse">
          <line x1="6" y1="6" x2="12" y2="12" stroke="var(--ink)" strokeWidth="1" strokeLinecap="round" opacity="0.35" />
          <line x1="12" y1="6" x2="6" y2="12" stroke="var(--ink)" strokeWidth="1" strokeLinecap="round" opacity="0.35" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dec-stitch)" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────
// CATEGORY · BIGGER SCENES
// ────────────────────────────────────────────────────────────────

// 20 — Skyline of small houses (used in footers, hero backgrounds)
function DecSkyline({ width = 1080, height = 80 }) {
  // SVG dims match container — no preserveAspectRatio crop. Houses sit on
  // the baseline; total house height < container height, so roofs always
  // have headroom.
  const baseline = height - 2;
  const houses = [
    { x: 30,   w: 36 }, { x: 85,   w: 44 }, { x: 145,  w: 56 },
    { x: 215,  w: 42 }, { x: 275,  w: 48 }, { x: 340,  w: 38 },
    { x: 395,  w: 52 }, { x: 465,  w: 44 }, { x: 525,  w: 50 },
    { x: 590,  w: 40 }, { x: 645,  w: 56 }, { x: 715,  w: 38 },
    { x: 770,  w: 50 }, { x: 835,  w: 44 }, { x: 895,  w: 56 },
    { x: 965,  w: 40 }, { x: 1020, w: 48 },
  ];
  return (
    <svg width="100%" height={height}
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio="xMidYMax slice"
      xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      {houses.map((h, i) => {
        const c = FIVE[i % 5];
        const roofH = h.w * 0.40;
        const bodyH = h.w * 0.55;
        const y = baseline - (roofH + bodyH);
        return (
          <g key={i} transform={`translate(${h.x} ${y})`}>
            <path
              d={`M0 ${roofH} L${h.w / 2} 0 L${h.w} ${roofH} L${h.w} ${roofH + bodyH} L0 ${roofH + bodyH} Z`}
              fill={c} opacity="0.85"
            />
            <rect x={h.w * 0.4} y={roofH + bodyH * 0.35} width={h.w * 0.2} height={bodyH * 0.65}
              fill="var(--paper)" opacity="0.95" />
          </g>
        );
      })}
      <line x1="0" y1={baseline} x2={width} y2={baseline} stroke="var(--ink)" strokeWidth="2" opacity="0.5" />
    </svg>
  );
}

// 21 — Constellation of children figures (decorative scatter)
function DecConstellation({ width = 600, height = 200 }) {
  const figures = [
    { x: 60, y: 70, h: 26, c: FIVE[0] },
    { x: 130, y: 130, h: 36, c: FIVE[1] },
    { x: 200, y: 60, h: 22, c: FIVE[2] },
    { x: 280, y: 150, h: 30, c: FIVE[3] },
    { x: 350, y: 90, h: 40, c: FIVE[4] },
    { x: 430, y: 140, h: 32, c: FIVE[0] },
    { x: 510, y: 70, h: 24, c: FIVE[1] },
    { x: 560, y: 130, h: 36, c: FIVE[2] },
  ];
  return (
    <svg width={width} height={height} viewBox={`0 0 600 200`} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      {figures.map((f, i) => (
        <g key={i}>
          <path d={`M${f.x} ${f.y - f.h} L${f.x - f.h * 0.3} ${f.y} L${f.x + f.h * 0.3} ${f.y} Z`}
            fill={f.c} opacity="0.85" />
          <circle cx={f.x} cy={f.y - f.h - f.h * 0.18} r={f.h * 0.13} fill="var(--ink)" />
        </g>
      ))}
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────
// Showcase artboard — lays everything out for review
// ────────────────────────────────────────────────────────────────
function DecorativeShowcase() {
  const Group = ({ label, children }) => (
    <div>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-mute)', letterSpacing: '0.06em',
        textTransform: 'uppercase', marginBottom: 10 }}>{label}</div>
      <div style={{ background: 'var(--paper)', padding: '14px 16px', minHeight: 32,
        display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--line)' }}>
        {children}
      </div>
    </div>
  );

  return (
    <div style={{ width: '100%', height: '100%', padding: '28px 28px 24px', boxSizing: 'border-box',
      background: 'var(--paper-2)', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--ink-mute)' }}>
        Elementos decorativos
      </div>
      <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--ink)',
        marginTop: 6, lineHeight: 1 }}>21 unidades</div>

      <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Group label="01 · Cinco pontos"><DecFiveDots /></Group>
        <Group label="02 · Cinco triângulos"><DecFiveTriangles /></Group>
        <Group label="03 · Cinco losangos"><DecFiveDiamonds /></Group>
        <Group label="04 · Cinco barras"><DecFiveBars /></Group>
        <Group label="05 · Régua telhado"><DecRoofRule width={220} height={22} /></Group>
        <Group label="06 · Cinco telhados"><DecFiveRoofs /></Group>
        <Group label="07 · Marca seção">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)',
            fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink)' }}>
            <DecSectionMark /> nossa equipe
          </span>
        </Group>
        <Group label="08 · Caminho"><DecPath width={220} height={36} /></Group>
        <Group label="10 · Aspas editoriais"><DecQuoteMark size={48} /></Group>
        <Group label="13 · Sol"><DecSun size={44} /></Group>
        <Group label="14 · Meio-sol"><DecHalfSun width={120} height={56} /></Group>
        <Group label="11 · Canto ornamento">
          <div style={{ display: 'flex', gap: 4 }}>
            <DecCornerOrnament size={36} position="tl" />
            <DecCornerOrnament size={36} position="tr" />
          </div>
        </Group>
      </div>
    </div>
  );
}

function DecorativePatternShowcase() {
  return (
    <div style={{ width: '100%', height: '100%', padding: '28px 28px 24px', boxSizing: 'border-box',
      background: 'var(--paper-2)', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--ink-mute)' }}>
        Padrões
      </div>
      <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--ink)',
        marginTop: 6, lineHeight: 1 }}>5 tiles</div>

      <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {[
          { label: '15 · Telhados', el: <DecPatternRoofs /> },
          { label: '16 · Cinco cores', el: <DecPatternDots /> },
          { label: '17 · Caminhos', el: <DecPatternPath /> },
          { label: '18 · Casas + cores', el: <DecPatternHouses /> },
          { label: '19 · Ponto-cruz', el: <DecPatternStitch /> },
        ].map((p, i) => (
          <div key={i}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-mute)', letterSpacing: '0.06em',
              textTransform: 'uppercase', marginBottom: 8 }}>{p.label}</div>
            <div style={{ height: 110, background: 'var(--paper)', border: '1px solid var(--line)' }}>
              {p.el}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  DecFiveDots, DecFiveTriangles, DecFiveDiamonds, DecFiveBars,
  DecRoofRule, DecFiveRoofs, DecSectionMark,
  DecPath, DecPathVertical, DecQuoteMark, DecCornerOrnament,
  DecSunburst, DecSun, DecHalfSun,
  DecPatternRoofs, DecPatternDots, DecPatternPath, DecPatternHouses, DecPatternStitch,
  DecSkyline, DecConstellation,
  DecorativeShowcase, DecorativePatternShowcase,
  DEC_FIVE: FIVE,
});