// Sections A: Why Now, Problem (process stats + blind-spot iceberg image), Solution (workflow + priority)

function SectionHead({ title }) {
  return (
    <div className="sechead">
      <Reveal>
        <h2 className="headline sechead__title">{title}</h2>
      </Reveal>
    </div>
  );
}

function WhyNow({ copy }) {
  return (
    <section className="section section--tight whynow" id="why" data-screen-label="Why Now">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <Reveal delay={80}>
          <p className="lede whynow__line">{copy.note}</p>
        </Reveal>
      </div>
    </section>
  );
}

function Problem({ copy }) {
  const barWidths = [100, 25, 8]; // Sourcing→Closing, DD, Memo drafting (relative to 6mo = 24wk)
  return (
    <section className="section section--tight" id="problem" data-screen-label="Problem">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <div className="timeline">
          {copy.processStats.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="timeline__row">
                <div className="timeline__row-head">
                  <span className="timeline__row-step">{'0' + (i + 1)}</span>
                  <span className="timeline__row-name">{s.label}</span>
                </div>
                <div className="timeline__bar-track">
                  <span className="timeline__bar" style={{ width: barWidths[i] + '%' }}>
                    <span className="timeline__bar-sweep" />
                  </span>
                </div>
                <div className="timeline__row-value">{s.num}</div>
              </div>
            </Reveal>
          ))}
          <div className="timeline__scale" aria-hidden="true">
            <span>0</span>
            <span style={{ flex: 1 }} />
            <span>3 months</span>
            <span style={{ flex: 1 }} />
            <span>6 months</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// Workflow connecting-line SVG (drawn behind 5-node grid)
function WorkflowConnectors() {
  const lines = [];
  for (let i = 0; i < 4; i++) {
    const x1 = (i + 0.85) * (100 / 5);
    const x2 = (i + 1.15) * (100 / 5);
    const y = 50;
    const d = `M ${x1} ${y} C ${x1 + 4} ${y + 12}, ${x2 - 4} ${y - 12}, ${x2} ${y}`;
    lines.push(
      <g key={i}>
        <path d={d} stroke="rgba(0,212,255,0.18)" strokeWidth="0.35" fill="none" />
        <path
          d={d}
          stroke="rgba(0,212,255,0.85)"
          strokeWidth="0.35"
          fill="none"
          strokeDasharray="0.9 2.4"
          className="workflow__flow"
          style={{ animationDelay: (i * 0.4) + 's' }}
        />
      </g>
    );
  }
  return (
    <svg className="workflow__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <filter id="wflow-glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="0.3" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>
      <g filter="url(#wflow-glow)">{lines}</g>
    </svg>
  );
}

function Solution({ copy }) {
  return (
    <section className="section" id="solution" data-screen-label="04 Solution">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <Reveal><p className="lede">{copy.sub}</p></Reveal>
        <div className="workflow">
          <WorkflowConnectors />
          <div className="workflow__nodes">
            {copy.steps.map((step, i) => (
              <Reveal key={step.n} delay={i * 70}>
                <div className="wnode">
                  <span className="wnode__dot" />
                  <div className="wnode__n">{step.n}</div>
                  <div className="wnode__title">{step.title}</div>
                  <div className="wnode__desc">{step.desc}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* Priority columns */}
        <div className="priority">
          {[copy.priority.focus, copy.priority.next].map((col, ci) => (
            <Reveal key={ci} delay={ci * 100}>
              <div className={'priority__col' + (ci === 0 ? ' priority__col--now' : '')}>
                <div className="priority__lbl">{col.label}</div>
                <ul>{col.items.map((it, i) => <li key={i}>{it}</li>)}</ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, WhyNow, Problem, Solution });