// EYEQ — Mid sections (Process, Stats, Awards, Testimonials, Clients)

const { useState: useStateM } = React;

function Process() {
  return (
    <section className="section" id="process">
      <div className="section-head">
        <div>
          <div className="section-idx">05 — PROCESS · HOW WE WORK</div>
          <h2 className="section-title">Eight weeks. One <em>director's cut.</em></h2>
        </div>
        <div className="section-sub">
          Five phases, dedicated specialists at each. You'll never see the messy middle —
          we ship one cut, not seven.
        </div>
      </div>

      <div className="process">
        {window.PROCESS.map((p, i) => (
          <div className="process-step" key={i}>
            <div className="num">/ {p.num}</div>
            <div className="name serif">
              {p.name.replace(p.italic, '')}
              <em>{p.italic}</em>
            </div>
            <div className="desc">{p.desc}</div>
            <div className="dur">{p.dur}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="section" id="studio" style={{ paddingTop: 0 }}>
      <div className="stats">
        {window.STATS.map((s, i) => (
          <div className="stat" key={i}>
            <div className="lbl">{s.lbl}</div>
            <div className="val serif">
              <span>{s.val}</span>
              <span className="suffix">{s.suffix}</span>
            </div>
            <div className="note">{s.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Awards() {
  return (
    <section className="section" id="press">
      <div className="section-head">
        <div>
          <div className="section-idx">06 — AWARDS · RECOGNITION</div>
          <h2 className="section-title">A shelf we don't <em>polish</em> often enough.</h2>
        </div>
        <div className="section-sub">
          We make the work first. Awards arrive after. A short list of recent recognition —
          across film craft, direction, and editorial.
        </div>
      </div>

      <div className="awards">
        {window.AWARDS.map((a, i) => (
          <div className="award" key={i}>
            <div className="award-year">{a.year}</div>
            <div className="award-name serif">
              {a.name.replace(a.italic, '')}
              <em>{a.italic}</em>
            </div>
            <div className="award-meta">{a.meta}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Testimonials() {
  const [active, setActive] = useStateM(0);
  const list = window.TESTIMONIALS;
  const t = list[active];
  return (
    <section className="section" style={{ borderTop: '.5px solid var(--line)', background: 'var(--bg-elev)' }}>
      <div className="section-head">
        <div>
          <div className="section-idx">07 — TESTIMONIALS · IN THEIR WORDS</div>
          <h2 className="section-title">What the room <em>said</em><br />when the lights came back.</h2>
        </div>
        <div className="section-sub">
          Three voices, picked because they put it most plainly. Names withheld where requested,
          shared where celebrated.
        </div>
      </div>

      <div className="testimonial">
        <div className="test-quote serif">{t.quote}”</div>
        <div className="test-meta">
          <div className="test-author serif">{t.author}</div>
          <div className="test-role">{t.role}</div>
          <div className="test-nav">
            {list.map((_, i) => (
              <span
                key={i}
                className={`test-dot ${i === active ? 'active' : ''}`}
                onClick={() => setActive(i)}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Clients() {
  return (
    <section className="section" style={{ paddingTop: 'clamp(60px, 8vh, 100px)', paddingBottom: 'clamp(60px, 8vh, 100px)' }}>
      <div className="section-head" style={{ marginBottom: 36 }}>
        <div>
          <div className="section-idx">08 — CLIENTS &amp; PARTNERS</div>
          <h2 className="section-title">The names we've <em>made things</em> with.</h2>
        </div>
        <div className="section-sub">
          From maisons and maharajas to global brands. A working list — not the marketing one.
        </div>
      </div>
      <div className="clients">
        {window.CLIENTS.map((c, i) => (
          <div className="client" key={i}>
            <div>
              {c.italic ? <em style={{ fontStyle: 'italic' }}>{c.name}</em> : c.name}
              {c.sub && <small>{c.sub}</small>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Process, Stats, Awards, Testimonials, Clients });