/* Common Works — Home (Statement direction) */

/* ---------------- Hero ---------------- */
function HeroStatement() {
  const h = window.CW.hero;
  return (
    <section className="hero-stmt" data-screen-label="Home — Hero">
      <div className="wrap-wide hs-in">
        <Reveal stagger>
          <div className="eyebrow no-rule hero-tagline">{CW.tagline}</div>
          <h1 className="display">We turn AI from a theme into underwritable value creation.</h1>
          <p className="hero-sub">{h.sub}</p>
          <div className="hero-cta">
            <a className="btn btn-on-forest" href="#/what" onClick={(e) => {e.preventDefault();window.__go("what");}}>How we work <Arrow /></a>
            <a className="btn btn-ghost-forest" href={"mailto:" + window.CW.email}>Talk to us</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Shared sections ---------------- */
function ArcSection() {
  const CW = window.CW;
  return (
    <section className="sec">
      <div className="wrap-wide">
        <Reveal className="sec-head">
          <div className="eyebrow">How we work</div>
          <h2 className="display">One firm across the investment lifecycle — diligence, plan, and build.</h2>
          <p className="lead">Our capability in each phase creates the next.</p>
        </Reveal>
        <Reveal className="arc" style={{ marginTop: 48 }}>
          {CW.arc.map((s, i) =>
          <div className="arc-step" key={i}>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

function DiffSection() {
  const CW = window.CW;
  return (
    <section className="sec band-cream2">
      <div className="wrap-wide split">
        <Reveal>
          <div className="eyebrow">Why Common Works</div>
          <h2 className="display" style={{ fontSize: "clamp(30px,3.4vw,46px)", marginTop: 20 }}>
            Private equity native. Technical to the core.
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            We are not a traditional consultancy, a staff-augmentation shop, or a single SaaS tool.
            We are a technical operating firm — built to move from investment judgment to deployed
            capability, and credible in both the boardroom and the codebase.
          </p>
        </Reveal>
        <Reveal className="split-points">
          {CW.diff.map((d, i) =>
          <div className="split-point" key={i}>
              <span className="sp-mark">{d.mark}</span>
              <div>
                <h4>{d.h}</h4>
                <p>{d.p}</p>
              </div>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

function CTABand() {
  const CW = window.CW;
  return (
    <section className="band-forest cta-band">
      <div className="wrap-wide cta-grid">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 22 }}>Let's talk</div>
          <h2 className="serif">Evaluating a deal or planning value creation? Start a conversation.</h2>
        </Reveal>
        <Reveal style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a className="btn btn-on-forest" href={"mailto:" + CW.email}>{CW.email} <Arrow /></a>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Home ---------------- */
function Home() {
  return (
    <div data-screen-label="Home">
      <HeroStatement />
      <ArcSection />
      <DiffSection />
      <CTABand />
    </div>);

}

Object.assign(window, { Home, CTABand });