/* Page sections for Portal Pulse landing — v2 (Tufte-forward). */

const Hero = () => (
  <header className="hero">
    <div className="shell">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="dot" />
            <span>For the COO who inherited a HubSpot portal nobody fully understands.</span>
          </div>
          <h1>
            Your HubSpot has a new RevOps agent.<br />
            <span className="quiet-break">It starts by </span>
            <span className="teal">listening</span>
            <span className="quiet-break">.</span>
          </h1>
          <p className="hero-sub">
            Portal Pulse scans your portal, surfaces what’s quietly working against you, and fixes it — one approved action at a time. It never moves faster than you trust it to.
          </p>
          <div className="hero-ctas">
            <Btn variant="primary" href="https://scan-api.portalpulse.ai/engine/credentials/oauth/authorize?mode=new">Run your first pulse</Btn>
            <Btn variant="secondary" href="#how">See how it works</Btn>
          </div>
          <div className="hero-assurance">
            <Assurance items={["Free to start", "Read-only", "Nothing changes without your approval"]} />
          </div>
        </div>
        <div className="hero-aside">
          <PortalListener />
        </div>
      </div>
    </div>
  </header>
);

const Problem = () => {
  const charts = [<ChartForecast />, <ChartDrift />, <ChartAdoption />];
  return (
    <section className="section" id="problem">
      <div className="shell">
        <SectionMarker num="01" label="THE PROBLEM" />
        <div className="section-head">
          <h2>You don’t have a HubSpot problem. You have a portal you can’t see.</h2>
          <p className="note">
            These aren’t the bugs that file tickets. They’re the ones that quietly bend the shape of every number you show the board.
          </p>
        </div>
        <div className="grid-3">
          {PROBLEMS.map((p, i) => (
            <article className="problem-card" key={p.num}>
              <div className="problem-chart-wrap">{charts[i]}</div>
              <div>
                <span className="num">{p.num} — A quiet kind of broken</span>
                <h3 style={{ marginTop: 10 }}>{p.title}</h3>
                <p className="quiet" style={{ marginTop: 10 }}>{p.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const TrustArc = () => (
  <section className="section" id="how">
    <div className="shell">
      <SectionMarker num="02" label="THE TRUST ARC" />
      <div className="section-head">
        <h2>We don’t ask for trust. We build it, one approved action at a time.</h2>
        <p className="note">
          Three moments. Twelve weeks. A curve that dips exactly once — and that’s the point.
        </p>
      </div>

      <div className="moments-row">
        {MOMENTS.map((m, i) => (
          <div className="moment-card" key={m.step}>
            <div className="step">{m.step}</div>
            <div className="line">{m.line}</div>
            <div className="caption">{m.caption}</div>
          </div>
        ))}
      </div>

      <TrustJourney />
    </div>
  </section>
);

const FailureLine = () => (
  <section className="section dark" id="failure">
    <div className="shell">
      <SectionMarker num="03" label="WHEN THINGS GET COMPLICATED" />
      <p className="failure-quote">
        When something doesn’t go as planned, Portal Pulse tells you <span className="accent">immediately</span>.
        Every action is reversible. Every stumble makes the agent smarter.
        That’s not a disclaimer. That’s the design.
      </p>
      <div className="failure-attrib">
        <span className="rule" />
        <span>PORTAL PULSE · OPERATING PRINCIPLE</span>
      </div>
    </div>
  </section>
);

const Plays = () => (
  <section className="section" id="plays">
    <div className="shell">
      <SectionMarker num="04" label="THE PLAYS" />
      <div className="section-head">
        <h2>Three plays to start. Each one earns the next.</h2>
        <p className="note">
          A play is a scoped body of work — proposed, approved, executed, summarized. You don’t buy them. You sign off on the ones you want run.
        </p>
      </div>

      <div className="grid-3">
        {PLAYS.map((p, i) => {
          const Diagram = PLAY_DIAGRAMS[i];
          return (
            <article className="play-card" key={p.idx}>
              <div className="play-diagram-wrap"><Diagram /></div>
              <span className="idx">{p.idx}</span>
              <div className="name">{p.name}</div>
              <div className="outcome">{p.outcome}</div>
              <div className="meta">
                <span className="runtime">{p.runtime}</span>
                <span>{p.risk}</span>
              </div>
            </article>
          );
        })}
      </div>

      <div style={{ marginTop: 56, display: "flex", justifyContent: "center" }}>
        <Btn variant="primary" href="https://scan-api.portalpulse.ai/engine/credentials/oauth/authorize?mode=new">Run your first pulse</Btn>
      </div>
    </div>
  </section>
);

const Handling = () => (
  <section className="section" id="handling">
    <div className="shell">
      <SectionMarker num="05" label="HOW WE HANDLE YOUR PORTAL" />
      <div className="section-head">
        <h2>Read-only by default. Approval-gated by design. Undoable by contract.</h2>
        <p className="note">
          A diagram for each, not a paragraph.
        </p>
      </div>

      <div className="handling-grid">
        <div className="handling-col">
          <div className="kicker">01 · THE BOUNDARY</div>
          <h3>Your data stays in your portal.</h3>
          <div style={{ margin: "20px 0" }}><PortalBoundary /></div>
          <p>We read. We never write without a signed-off plan. Revoke access in HubSpot at any time.</p>
          <p style={{ marginTop: 20, fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.04em", color: "hsl(var(--pp-quiet))" }}>
            SOC 2 TYPE II · IN PROGRESS
          </p>
        </div>

        <div className="handling-col">
          <div className="kicker">02 · THE SCOPES</div>
          <h3>Five OAuth scopes. All read.</h3>
          <div className="scope-list" style={{ marginTop: 14 }}>
            {SCOPES.map((s) => (
              <div className="scope-row" key={s.scope}>
                <span className="lock" />
                <span className="scope-name">{s.scope}</span>
                <span className="perm">{s.perm}</span>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 16 }}>The full set. No hidden ones.</p>
        </div>

        <div className="handling-col">
          <div className="kicker">03 · THE PROMISES</div>
          <h3>Three we will not break.</h3>
          <ul className="commitments">
            {COMMITMENTS.map((c, i) => <li key={i}>{c}</li>)}
          </ul>
          <p style={{ marginTop: 18, fontSize: 14 }}>
            We store findings, not records. With your permission we build a <strong style={{ color: "hsl(var(--pp-dark-teal))" }}>portal profile</strong> that you own, export, or delete.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="section dark final-cta" id="run">
    <div className="shell">
      <SectionMarker num="06" label="ONE LAST THING" />
      <h2>
        Your portal has been drifting.<br />
        <span className="teal">This is how it stops.</span>
      </h2>
      <div style={{ marginTop: 48, display: "flex", gap: 14, flexWrap: "wrap" }}>
        <Btn variant="primary" href="https://scan-api.portalpulse.ai/engine/credentials/oauth/authorize?mode=new">Run your first pulse</Btn>
        <Btn variant="secondary" href="#">See a sample pulse</Btn>
      </div>
      <div className="quiet">FREE · READ-ONLY · NOTHING CHANGES WITHOUT YOUR APPROVAL</div>
    </div>
  </section>
);

const Nav = () => (
  <div className="nav">
    <div className="shell">
      <div className="nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#problem">Why</a>
          <a href="#how">How it works</a>
          <a href="#plays">Plays</a>
          <a href="#handling">Trust & Security</a>
          <a href="https://scan-api.portalpulse.ai/engine/credentials/oauth/authorize?mode=new" className="btn btn-primary" style={{ padding: "10px 16px", fontSize: 14, color: "#fff" }}>
            Run your first pulse
          </a>
        </div>
      </div>
    </div>
  </div>
);

const Footer = () => (
  <footer className="shell">
    <div className="footer">
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Logo size={18} />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>© 2026 · portalpulse.ai</span>
      </div>
      <div className="links">
        <a href="#">Security</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">hello@portalpulse.ai</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Hero, Problem, TrustArc, FailureLine, Plays, Handling, FinalCTA, Nav, Footer });