// ComplexitySection.jsx
// EM · 04 — The process in reality.
// Emotional payoff between Why and Process: many moving parts → one point of ownership.

const COMPLEXITY_ROWS = [
  { id: "design", label: "Design & development", sub: "18 design sketches" },
  { id: "samp",   label: "Sampling & refinement", sub: "24 sample variations explored" },
  { id: "lens",   label: "Lenses",                 sub: "Lens sourcing & customization" },
  { id: "pack",   label: "Packaging & accessories", sub: "Materials, branding, components" },
  { id: "prod",   label: "Production & QC",        sub: "Manufacturing, QC, compliance" },
  { id: "log",    label: "Logistics & timelines",  sub: "Freight, customs, delivery" },
  { id: "ret",    label: "Retail launch",          sub: "Retail readiness & launch support" },
];

const COMPLEXITY_STATS = [
  { num: "24", label: "Sample variations explored" },
  { num: "8",  label: "SKUs in first launch" },
  { num: "4",  label: "Production categories", sub: "Frames / Lenses / Packaging / Accessories" },
];

// --- Inline icons (Lucide-style, 1.5px stroke, inherit currentColor) ---
const ICON = {
  design: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="3" width="14" height="18" rx="1" />
      <path d="M9 8h6M9 12h6M9 16h4" />
    </svg>
  ),
  samp: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6.5" cy="14" r="3.5" />
      <circle cx="17.5" cy="14" r="3.5" />
      <path d="M10 14h4" />
    </svg>
  ),
  lens: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="12" cy="12" r="6" />
    </svg>
  ),
  pack: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" />
      <path d="M3 7l9 4 9-4M12 11v10" />
    </svg>
  ),
  prod: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="4" width="12" height="17" rx="1" />
      <rect x="9" y="2.5" width="6" height="3" rx="0.5" />
      <path d="M9 11l1.5 1.5L14 9M9 16h6" />
    </svg>
  ),
  log: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 6h11v10H2zM13 9h5l3 3v4h-8z" />
      <circle cx="6" cy="18" r="1.5" />
      <circle cx="17" cy="18" r="1.5" />
    </svg>
  ),
  ret: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l1.5-5h15L21 9" />
      <path d="M3 9v11h18V9" />
      <path d="M9 20v-6h6v6" />
    </svg>
  ),
};

// --- Emsley wordmark (paths from /assets/logos/emsley-logo.svg, recolored to currentColor) ---
const EmsleyMark = () => (
  <svg className="cx-mark" viewBox="0 0 170 28.574" width="92" height="15.5" aria-label="Emsley">
    <g transform="translate(-545.328 -22.853)" fill="currentColor">
      <path d="M545.329,37.807a9.464,9.464,0,0,1,1.029-4.552,7.794,7.794,0,0,1,7.171-4.288,7.282,7.282,0,0,1,5.736,2.331,8.644,8.644,0,0,1,2.151,6.165q0,.421-.031.827H547.792a6.76,6.76,0,0,0,1.84,4.614,5.82,5.82,0,0,0,4.318,1.715,7.4,7.4,0,0,0,3.492-.779,9.715,9.715,0,0,0,2.6-2.043l1.544,1.605a9.189,9.189,0,0,1-3.336,2.432,10.648,10.648,0,0,1-4.4.92,8.643,8.643,0,0,1-4.411-1.06,7.644,7.644,0,0,1-3.048-3.15A9.651,9.651,0,0,1,545.329,37.807Zm2.463-1.465h11.084a5.825,5.825,0,0,0-1.559-3.866,5.161,5.161,0,0,0-3.819-1.4,5.576,5.576,0,0,0-3.952,1.426A5.735,5.735,0,0,0,547.792,36.342Z" transform="translate(0 -0.566)" />
      <path d="M581.575,46.244V32.167q0-1.5-.031-2.681h2.385V31.9h.047a5.576,5.576,0,0,1,2.112-2.05A6.4,6.4,0,0,1,589.4,29a6.667,6.667,0,0,1,3.375.81,5.02,5.02,0,0,1,2.113,2.386h.063a6.578,6.578,0,0,1,2.229-2.214A6.8,6.8,0,0,1,600.952,29a5.9,5.9,0,0,1,4.543,1.769,7.061,7.061,0,0,1,1.645,5V46.244h-2.447V36.377a6,6,0,0,0-1.1-3.921,3.993,3.993,0,0,0-3.25-1.318,4.526,4.526,0,0,0-2.534.694,4.586,4.586,0,0,0-1.676,1.824,5.08,5.08,0,0,0-.545,2.377v10.21h-2.463V36.377q0-5.238-4.334-5.239a4.336,4.336,0,0,0-3.461,1.45,4.882,4.882,0,0,0-1.294,3.445v10.21Z" transform="translate(-3.353 -0.569)" />
      <path d="M628.2,46.293V44.126h6.579A18.467,18.467,0,0,0,637.2,44a2.291,2.291,0,0,0,1.349-.624,2.057,2.057,0,0,0,.46-1.465,2.018,2.018,0,0,0-.375-1.294,2.323,2.323,0,0,0-1.06-.732,17.5,17.5,0,0,0-2.12-.624l-2.51-.593a15.373,15.373,0,0,1-2.76-.888q-2.167-1.013-2.167-3.944a3.925,3.925,0,0,1,1.216-3.149,4.036,4.036,0,0,1,1.856-.9,13.248,13.248,0,0,1,2.9-.25h6L639.8,31.7h-5.908a7.1,7.1,0,0,0-2.806.406q-.7.374-.764,1.7a2.3,2.3,0,0,0,.311,1.31,2.029,2.029,0,0,0,.966.7q.546.2,2.2.639l2.354.577a19.132,19.132,0,0,1,2.821.888,3.813,3.813,0,0,1,2.354,3.835,3.906,3.906,0,0,1-1.652,3.585,9.941,9.941,0,0,1-5.051.951Z" transform="translate(-7.655 -0.618)" />
      <path d="M681.993,37.807a9.462,9.462,0,0,1,1.029-4.552,7.794,7.794,0,0,1,7.17-4.288,7.285,7.285,0,0,1,5.737,2.331,8.648,8.648,0,0,1,2.151,6.165q0,.421-.032.827H684.456a6.76,6.76,0,0,0,1.839,4.614,5.823,5.823,0,0,0,4.318,1.715,7.405,7.405,0,0,0,3.492-.779,9.715,9.715,0,0,0,2.6-2.043l1.543,1.605a9.185,9.185,0,0,1-3.337,2.432,10.641,10.641,0,0,1-4.4.92,8.648,8.648,0,0,1-4.412-1.06,7.642,7.642,0,0,1-3.047-3.15A9.65,9.65,0,0,1,681.993,37.807Zm2.463-1.465H695.54a5.829,5.829,0,0,0-1.559-3.866,5.16,5.16,0,0,0-3.819-1.4A5.574,5.574,0,0,0,686.21,32.5,5.732,5.732,0,0,0,684.456,36.342Z" transform="translate(-12.652 -0.566)" />
      <path d="M719.734,52.045l2.338-5.627-6.391-16.883h2.65l3.165,8.652q.888,2.525,1.87,5.518h.047q.53-1.793,1.979-5.674l3.087-8.5H731.1l-8.87,22.51Z" transform="translate(-15.771 -0.618)" />
      <path d="M660.81,22.853v8.975l2.436,2.436L660.81,36.7v8.975h2.463V22.853Z" transform="translate(-10.691)" />
    </g>
  </svg>
);

// --- Desktop converging-lines diagram ---
// ROW_Y values are evenly distributed across the 540-unit viewBox so the start
// dots land at the centers of seven evenly-distributed rail items.
const ROW_Y = [38, 116, 193, 270, 347, 424, 502];

// Each line is pulled toward two *different* off-axis y values along its path —
// SCRAMBLE_EARLY around x=220 and SCRAMBLE_LATE around x=380 — before funneling
// into (520, 270). Two different permutations so the lines cross each other
// early, weave again in the second half, and only resolve to the single
// convergence point in the last stretch of the path. Funnel shape preserved;
// messiness extends nearly to the endpoint.
const SCRAMBLE_EARLY = [5, 3, 6, 4, 0, 2, 1];
const SCRAMBLE_LATE  = [2, 6, 0, 5, 1, 4, 3];

const ConvergeSVG = () => (
  <svg className="cx-lines cx-lines--desktop" viewBox="0 0 600 540" preserveAspectRatio="none" aria-hidden="true">
    {ROW_Y.map((y, i) => {
      const earlyY = ROW_Y[SCRAMBLE_EARLY[i]];
      const lateY  = ROW_Y[SCRAMBLE_LATE[i]];
      return (
        <g key={i}>
          <path
            d={`M 0 ${y} C 220 ${earlyY}, 380 ${lateY}, 520 270`}
            stroke="currentColor"
            strokeWidth="0.75"
            fill="none"
            opacity={0.55}
          />
          <circle cx="0" cy={y} r="2.6" fill="currentColor" />
        </g>
      );
    })}
    <circle cx="520" cy="270" r="3.6" fill="currentColor" />
    <line x1="520" y1="270" x2="568" y2="270" stroke="currentColor" strokeWidth="0.75" />
    <polygon points="568,266 578,270 568,274" fill="currentColor" />
  </svg>
);

// --- Mobile converging-lines diagram (vertical converge, sits between rail and circle) ---
const COL_X = [30, 75, 120, 165, 210, 255, 300];
const ConvergeMobileSVG = () => (
  <svg className="cx-lines cx-lines--mobile" viewBox="0 0 330 90" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
    {COL_X.map((x, i) => (
      <g key={i}>
        <path
          d={`M ${x} 0 C ${x} 40, 165 40, 165 80`}
          stroke="currentColor"
          strokeWidth="0.75"
          fill="none"
          opacity={0.55}
        />
        <circle cx={x} cy="0" r="2" fill="currentColor" />
      </g>
    ))}
    <polygon points="161,80 165,88 169,80" fill="currentColor" />
  </svg>
);

const ComplexitySection = () => (
  <section className="section complexity" id="complexity">
    <span className="edge-label">EM · 04 — THE PROCESS IN REALITY</span>
    <div className="shell">

      <div className="complexity__top">
        <div className="complexity__head">
          <div className="eyebrow eyebrow-rule">The process in reality</div>
          <h2 className="section-title complexity__title">
            Many moving parts.<br />One point of operational ownership.
          </h2>
        </div>
        <p className="complexity__lede">
          Bringing an eyewear collection to life involves multiple workstreams moving in parallel.
          We hold the complexity so you can stay focused on your brand.
        </p>
      </div>

      <div className="complexity__diagram">
        <div className="complexity__rail">
          <div className="complexity__rail-eyebrow">Operational load</div>
          <ul className="complexity__list" role="list">
            {COMPLEXITY_ROWS.map((r) => (
              <li key={r.id} className="complexity__item">
                <span className="complexity__icon" aria-hidden="true">{ICON[r.id]}</span>
                <div className="complexity__item-text">
                  <div className="complexity__item-label">{r.label}</div>
                  <div className="complexity__item-sub">{r.sub}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="complexity__middle">
          <div className="complexity__middle-eyebrow">
            Different factories. Different timelines. Different inboxes.
          </div>
          <ConvergeSVG />
        </div>

        {/* Mobile converging SVG — between rail and release in DOM so
            mobile single-column flow reads: items → converge → circle */}
        <div className="complexity__mobile-lines">
          <ConvergeMobileSVG />
        </div>

        <div className="complexity__release">
          <div className="complexity__circle">
            <div className="complexity__circle-inner">
              <EmsleyMark />
              <div className="complexity__circle-rule" aria-hidden="true"></div>
              <div className="complexity__circle-title">
                One point of<br />operational ownership.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* (Stats strip and CTA follow below — kept outside diagram) */}

      <div className="complexity__stats">
        {COMPLEXITY_STATS.map((s, i) => (
          <div key={i} className={"complexity__stat" + (s.accent ? " is-accent" : "")}>
            <div className="complexity__stat-num">{s.num}</div>
            <div className="complexity__stat-label">{s.label}</div>
            {s.sub ? <div className="complexity__stat-sub">{s.sub}</div> : null}
          </div>
        ))}
      </div>

      <div className="complexity__cta">
        <a className="link-arrow" href="case-study.html">See how we got there</a>
      </div>

    </div>
  </section>
);

window.ComplexitySection = ComplexitySection;