// Sections B: Trust (Analyze/Verify/Decide), Team (2 founders w/ bullets), Traction, Vision, CTA, Footer

function Trust({ copy }) {
  return (
    <section className="section section--tight" id="trust" data-screen-label="Trust">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <div className="trust__flow">
          {copy.principles.map((p, i) => (
            <React.Fragment key={p.n}>
              <Reveal delay={i * 140}>
                <div className={'trust__node trust__node--' + p.state}>
                  <div className="trust__node-head">
                    <span className="trust__node-step">{'0' + (i + 1)}</span>
                    <span className="trust__node-role">{p.n}</span>
                    {p.state === 'future' && <span className="trust__node-pill">Phase 2</span>}
                  </div>
                  <div className="trust__node-title">{p.title}</div>
                  <div className="trust__node-desc">{p.desc}</div>
                  <span className="trust__node-glow" aria-hidden="true" />
                </div>
              </Reveal>
              {i < copy.principles.length - 1 && (
                <Reveal delay={i * 140 + 90}>
                  <div className="trust__connector" aria-hidden="true">
                    <span className="trust__connector-line" />
                    <span className="trust__connector-pulse" />
                    <span className="trust__connector-arrow">→</span>
                  </div>
                </Reveal>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team({ copy }) {
  const [a, b] = copy.members;
  const aDomains = a.strength.split(' × ');
  const bDomains = b.strength.split(' × ');
  return (
    <section className="section" id="team" data-screen-label="Team">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <Reveal>
          <p className="lede" style={{ marginBottom: 56 }}>{copy.sub}</p>
        </Reveal>
        <div className="team__venn">
          <Reveal><div className="team__venn-circle team__venn-circle--left" aria-hidden="true" /></Reveal>
          <Reveal delay={80}><div className="team__venn-circle team__venn-circle--right" aria-hidden="true" /></Reveal>
          <Reveal delay={160}>
            <div className="team__venn-content team__venn-content--left">
              <div className="team__venn-name">{a.name}</div>
              <div className="team__venn-role">{a.role}</div>
              <ul className="team__venn-skills">
                {aDomains.map((d, i) => <li key={i}>{d}</li>)}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="team__venn-content team__venn-content--right">
              <div className="team__venn-name">{b.name}</div>
              <div className="team__venn-role">{b.role}</div>
              <ul className="team__venn-skills">
                {bDomains.map((d, i) => <li key={i}>{d}</li>)}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={360}>
            <div className="team__venn-content team__venn-content--center">
              <div className="team__venn-fit-label">Founder–market fit</div>
              <div className="team__venn-fit-sub">Domain × Execution</div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Traction({ copy }) {
  return (
    <section className="section section--tight" id="traction" data-screen-label="Traction">
      <div className="container">
        <div className="row-between">
          <div>
            <Reveal><h2 className="headline-md">{copy.title}</h2></Reveal>
          </div>
          <Reveal delay={160}>
            <p className="lede" style={{ marginTop: 0 }}>{copy.sub}</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Vision({ copy }) {
  const stateLabel = { now: 'Now', next: 'Next', later: 'Later' };
  return (
    <section className="section section--tight vision" id="vision" data-screen-label="Vision">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <Reveal><p className="lede">{copy.sub}</p></Reveal>
        <div className="vision__line">
          <div className="vision__line-track" aria-hidden="true" />
          <div className="vision__line-flow" aria-hidden="true" />
          <div className="vision__stations">
            {copy.future.map((f, i) => (
              <Reveal key={f.tag} delay={i * 100}>
                <div className={'vision__station vision__station--' + f.state}>
                  <span className="vision__station-dot" aria-hidden="true" />
                  <div className="vision__station-state">{stateLabel[f.state] || f.state}</div>
                  <div className="vision__station-tag">{f.tag}</div>
                  <div className="vision__station-label">{f.label}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA({ copy }) {
  return (
    <section className="cta" id="cta" data-screen-label="11 CTA">
      <div className="container">
        <Reveal>
          <div className="kicker" style={{ marginBottom: 32 }}>— {copy.tag}</div>
        </Reveal>
        <Reveal delay={80}>
          <h2 className="headline-xl" style={{ whiteSpace: 'pre-line' }}>{copy.title}</h2>
        </Reveal>
        <Reveal delay={160}>
          <p className="lede" style={{ marginTop: 32, maxWidth: '52ch' }}>{copy.sub}</p>
        </Reveal>
        <Reveal delay={240}>
          <div className="cta__cta">
            <a className="btn btn--primary" href="/app.html">
              {copy.primary}<span className="arrow">→</span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ copy }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__row">
          <div>
            <div>{copy.addr}</div>
            <div style={{ marginTop: 4 }}><a href={'mailto:' + copy.email}>{copy.email}</a></div>
          </div>
          <div className="footer__links">
            {copy.links.map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
          </div>
        </div>
        <div className="footer__legal">{copy.legal}</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Trust, Team, Traction, Vision, CTA, Footer });