/* GTM practice sections - Problem, Fit + Differentiation, Engagement,
   Logos, Final CTA. Babel. Reuses Reveal, Tag, PillBtn, Icon, TexturePanel.
   Appends section components to window for main-unified.jsx. */
const { Reveal, Tag, PillBtn, Icon, TexturePanel } = window;
const { hero } = window.SD;

/* on-brand accent trio */
const GS_SIG = ["var(--abm-ember)", "var(--abm-blue)", "var(--abm-amber)"];

function GsKicker({ children }) {
  return <div className="sd-kicker"><span className="bar" /><Tag tone="ember">{children}</Tag></div>;
}

/* centered section eyebrow - bar · number · label, so each pitch section
   announces itself instead of running together on flat paper */
function GsEyebrow({ n, label }) {
  return (
    <div className="gs-eyebrow">
      <span className="bar" />
      <span className="gs-eyebrow-n">{n}</span>
      <span className="gs-eyebrow-l">{label}</span>
    </div>
  );
}

/* faint vertical gridlines for banded sections (echoes the hero) */
function BandLines() {
  return (
    <div className="gs-band-lines" aria-hidden="true">
      <span style={{ left: "16%" }} /><span style={{ left: "38%" }} /><span style={{ left: "62%" }} /><span style={{ left: "84%" }} />
    </div>
  );
}

/* ============================================================
   THE PROBLEM
   ============================================================ */
function ProblemSection() {
  return (
    <section className="sd-sec gs-problem gs-band">
      <BandLines />
      <div className="sd-wrap sd-wrap--wide">
        <div className="gs-problem-head">
          <Reveal dir="up" delay={60}><h2 className="sd-h2 gs-problem-h2">Big marketing teams are running 2022 plays with 2026 tools and a 2027 mandate</h2></Reveal>
          <Reveal dir="up" delay={120}><p className="sd-lede gs-problem-lede">You just scrolled the whole system. Your team already owns most of the pieces in it. Headcount's approved, the strategy decks are stacked, the Clay, Outreach and CRM licenses are all paid. <strong>What's missing is someone who's already built AI GTM systems in setups like yours - and the hands to wire it all together.</strong></p></Reveal>
        </div>
        <Reveal dir="up" delay={140}>
          <div className="gv1c-vmeter" aria-hidden="true">
            <div className="gv1c-vcol">
              <span className="gv1c-vpct">100%</span>
              <div className="gv1c-vtrack"><i className="gv1c-vfill gv1c-vfill--full" style={{ height: "100%" }} /></div>
              <span className="gv1c-vlab">What your stack can do</span>
            </div>
            <div className="gv1c-vcol">
              <span className="gv1c-vpct gv1c-vpct--dim">~30%</span>
              <div className="gv1c-vtrack"><i className="gv1c-vfill" style={{ height: "30%" }} /></div>
              <span className="gv1c-vlab">What you're getting from it</span>
            </div>
          </div>
        </Reveal>
        <Reveal dir="up" delay={180}><p className="gv1c-foot">The gap is the operator, not the tools.</p></Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   FIT + DIFFERENTIATION
   ============================================================ */
const GS_FIT = [
  "You run a real marketing motion (content, demand, ABM, outbound) and the AI mandate is now coming from above.",
  "Clay, Outreach, HubSpot, Salesforce or similar are paid for, and the team is getting a fraction of what those tools should return.",
  "An internal champion (VP Marketing, Head of ABM, Head of Demand Gen, CMO) owns the number and wants a partner with both years of B2B marketing background and current AI tooling chops.",
  "You want to run experiments and learn fast. I stand up the testing rig, write the success criteria with you, and move quickly between bets.",
];
const GS_NOTFIT = [
  "You want a permanent owner for the SDR function (outreach, ramp, coaching, comp plans, the whole role). Hire that.",
  "You want a done-for-you agency where you brief and walk away. Good ones exist, and I'll point you at them.",
  "There's no marketing or RevOps team yet to embed with. I work next to people, not in place of them.",
  "You want a deck-only strategy consultant. I build the thing. Advice without the build isn't what this practice does.",
];

const GS_DIFF_COLS = [
  { label: "Embedded fractional", note: "THIS PRACTICE" },
  { label: "GTM agency" },
  { label: "Full-time hire" },
  { label: "Strategy consultant" },
];
const GS_DIFF_ROWS = [
  ["Seniority of person doing the work", "Senior operator", "Senior pitched, mid does the work", "Whoever you can hire", "Senior, but advice only"],
  ["Hands-on technical build", "Yes", "Pod-based execution", "Yes (after ramp)", "No"],
  ["Connects sales + marketing + data + DevOps", "Yes", "Channel-focused", "Sometimes", "No"],
  ["Team upskilling included", "Yes", "Sometimes", "N/A (they are the team)", "No"],
  ["Time to first system live", "3 to 4 weeks", "4 to 6 weeks", "4 to 6 months ramp", "8 to 12 weeks for the deck"],
  ["Knowledge stays in your team", "Yes", "Partial", "Yes", "No"],
  ["12+ month commitment", "Optional", "Optional", "Required (permanent)", "Project only"],
  ["You own the system and the people after", "Yes", "Rarely", "Yes", "No"],
];

function DiffCell({ v, hi }) {
  let inner;
  if (v === "Yes") inner = <span className="gs-yes"><Icon name="check" size={14} />Yes</span>;
  else if (v === "No") inner = <span className="gs-no"><span className="gs-no-x" aria-hidden="true">×</span>No</span>;
  else inner = <span>{v}</span>;
  return <div className={"gs-td" + (hi ? " gs-td--hi" : "")}>{inner}</div>;
}

function FitDiff() {
  return (
    <section className="sd-sec gs-fit">
      <div className="sd-wrap sd-wrap--wide">
        <div className="gs-fit-head">
          <Reveal dir="up" delay={60}><h2 className="sd-h2 gs-fit-h">Built for teams ready to embed a senior operator</h2></Reveal>
          <Reveal dir="up" delay={120}><p className="sd-lede gs-fit-lede">Wrong fit if you want pure agency project delivery, or a contractor who ships and leaves. Right fit if you want an embedded operator inside your team for the next 3 to 12+ months. A senior partner with deep B2B marketing experience and current AI tooling chops. You keep the system and the team that runs it afterward.</p></Reveal>
        </div>

        <div className="gs-fitcols">
          <Reveal dir="up" delay={80}>
            <div className="gs-fitcol gs-fitcol--yes">
              <div className="gs-fitcol-head">
                <span className="gs-fitcol-tag gs-fitcol-tag--yes">Fit · When this works</span>
              </div>
              <h3 className="gs-fitcol-sub">You have a team. You need the operator who connects it</h3>
              <ul className="gs-fitlist">
                {GS_FIT.map((t, i) => (
                  <li key={i}><span className="gs-mk gs-mk--yes"><Icon name="check" size={13} /></span><span>{t}</span></li>
                ))}
              </ul>
              <p className="gs-fitcol-foot">If three of these are true, the first call is worth 30 minutes.</p>
            </div>
          </Reveal>
          <Reveal dir="up" delay={140}>
            <div className="gs-fitcol gs-fitcol--no">
              <div className="gs-fitcol-head">
                <span className="gs-fitcol-tag gs-fitcol-tag--no">Not fit · When it doesn't</span>
              </div>
              <h3 className="gs-fitcol-sub">You want project delivery, or there's no team to embed with</h3>
              <ul className="gs-fitlist">
                {GS_NOTFIT.map((t, i) => (
                  <li key={i}><span className="gs-mk gs-mk--no">×</span><span>{t}</span></li>
                ))}
              </ul>
              <p className="gs-fitcol-foot">Better answers exist for each of these. Happy to make an intro.</p>
            </div>
          </Reveal>
        </div>

        <Reveal dir="up" delay={80}>
          <div className="gs-diff">
            <h3 className="gs-diff-sub">Agency, hire, or embedded operator? The honest comparison of your options</h3>
            <div className="gs-diff-scroll">
              <div className="gs-difftable">
                <div className="gs-tr gs-tr--head">
                  <div className="gs-th gs-th--row" />
                  {GS_DIFF_COLS.map((c, i) => (
                    <div key={i} className={"gs-th" + (i === 0 ? " gs-th--hi" : "")}>
                      <span className="gs-th-label">{c.label}</span>
                      {c.note && <span className="gs-th-note">{c.note}</span>}
                    </div>
                  ))}
                </div>
                {GS_DIFF_ROWS.map((row, ri) => (
                  <div key={ri} className="gs-tr">
                    <div className="gs-td gs-td--row">{row[0]}</div>
                    {row.slice(1).map((v, ci) => <DiffCell key={ci} v={v} hi={ci === 0} />)}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   THE ENGAGEMENT
   ============================================================ */
const GS_EMBED = [
  ["The person you talk to is the person who builds.", "No pod, no handoff to a mid-level doer. I do the work myself."],
  ["In your stack, not on the outside.", "Your Slack, your standups, your CRM, your Clay workspace. Part-time, hands-on."],
  ["Three to four engagements at a time.", "The practice is intentionally small. Capacity is the constraint, on purpose."],
  ["3 to 12+ months.", "Long enough to build the system and hand it over. The longest client relationships are past two years."],
  ["Upskilling is in the contract.", "Loom walkthroughs, paired builds in your stack, weekly office hours. You keep the system and the skills after I'm gone."],
];

const GS_WORK = [
  { n: "01", icon: "tam", title: "TAM mapping + market monitoring", tag: "shown in section 01",
    one: "Total addressable market modeling, active signal listening, and account discovery that compounds.",
    body: "I build the full TAM model for your ICP: firmographic, technographic, geographic and behavioral cuts. Then I wire in active market monitoring so your team sees account changes the day they happen, not the quarter after. This is where I've shipped the most." },
  { n: "02", icon: "page", title: "ABM infrastructure", tag: "shown in section 04",
    one: "Account intelligence, 1:1 pages, role-based follow-ups, and the briefs reps actually pick up the phone with.",
    body: "A live, scored account model refreshed nightly, wired into 1:1 ABM Pages, role-specific microsites and rep-ready briefs. Personalization that goes past the first-name merge tag." },
  { n: "03", icon: "spark", title: "AI RevOps + agent layer", tag: "shown in sections 02 and 03",
    one: "The Claude Code, Clay and agent stack built into your CRM, run by your team.",
    body: "The licenses are paid, the agents aren't built. I wire research agents, waterfall enrichment, routing, scoring and asset generation into one system inside HubSpot or Salesforce, and train your ops team to own it." },
  { n: "04", icon: "route", title: "Outbound system", sub: "built on timing, not capacity",
    one: "Multi-channel cadences, signal-triggered plays, and deliverability infrastructure that doesn't break.",
    body: "Most outbound runs on cadence and prayer. I build the signal-to-sequence pipeline: intent fires, enrichment runs, sequencer activates, rep gets a brief in Slack. Your SDRs open with context instead of a cold list. Email, LinkedIn and phone, on Outreach, Salesloft or whatever your team runs." },
  { n: "05", icon: "scatter", title: "Inbound + ads orchestration",
    one: "The connection layer between paid, content and pipeline that nobody owns.",
    body: "LinkedIn ads to ABM audiences. Landing page personalization tied to account context. Form-to-CRM-to-Slack-to-sequence routing. The work that sits between marketing ops and RevOps and usually gets dropped by both." },
  { n: "06", icon: "loop", title: "Team enablement + AI upskilling",
    one: "Not a workshop. Loom walkthroughs, paired builds in your stack, weekly office hours.",
    body: "A system without enablement breaks the day I leave. Every engagement includes structured upskilling on Clay, Claude Code, the agent layer and the workflows I built. Your VP Marketing ends the engagement with a team that's measurably more capable." },
];

const GS_STATS = [
  ["12+", "embedded engagements"],
  ["2+ yrs", "longest running engagement"],
  ["3-4", "active engagements at a time"],
];

function Engagement() {
  return (
    <section className="sd-sec gs-eng gs-band">
      <BandLines />
      <div className="sd-wrap sd-wrap--wide">
        {/* founder strip */}
        <Reveal dir="up" delay={60}>
          <div className="gv4b">
            <div className="gv4b-l">
              <div className="gv4b-initial">J</div>
              <div>
                <h3 className="gv4b-name">Jakub</h3>
                <div className="gv4b-role">Founder · Embedded AI GTM Operator</div>
              </div>
            </div>
            <div className="gv4b-r">
              <h3 className="gv4b-h">Built by one operator. Book the call direct.</h3>
              <p className="gv4b-bio">I work with B2B marketing teams between 500 and 1500 people. Years of traditional B2B marketing plus deep work in the newest AI tooling: Claude Code, Clay, agent infrastructure. The practice is intentionally small - three to four active engagements at a time, embedded part-time.</p>
              <div className="gv4b-stats">
                {GS_STATS.map(([big, lab], i) => (
                  <div key={i}><div className="gv4b-stat-big">{big}</div><span className="gv4b-stat-lab">{lab}</span></div>
                ))}
              </div>
              <div className="gv4b-cta">
                <PillBtn label={hero.cta} variant="ember" href="https://calendar.app.google/weNhUP588e9kF5zc7" />
                <span className="gv4b-mail">or <a href="mailto:jakub@abmpages.com">jakub@abmpages.com</a></span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   LOGOS - marquee
   ============================================================ */
const GS_LOGOS = [
  "/assets/68548cdf357d2de00f5accc9_l3-33.webp",
  "/assets/685463c8557fe01715c4b45a_l1.webp",
  "/assets/68d9b599c291d32b7a286f43_tebra-logo-apf.webp",
  "/assets/68d9b4707dfecfd52c714abb_cbi-logo-ap4.webp",
  "/assets/685463c854813e111c8d6986_l5.webp",
  "/assets/68d9b5f377849216f68e02e0_zenoti-logo-apf.webp",
  "/assets/685463c827a05cc667104c73_l6.webp",
  "/assets/68f6c3ec547e23e3fb4e07f2_emersoft%20logo.webp",
  "/assets/685463c8207784144a6d85f2_l2.webp",
  "/assets/6856cffd19218688bad0de34_l7.webp",
  "/assets/685bd9d0ef6aaa7c1ab12b22_l8.webp",
  "/assets/685c01eb5357354712e619bd_l99.webp",
  "/assets/685bfe2947361d613ab9654c_l11.webp",
];

function LogoMarquee() {
  const row = [...GS_LOGOS, ...GS_LOGOS];
  return (
    <section className="gs-logos">
      <div className="sd-wrap">
        <Reveal dir="up"><p className="gs-logos-intro">References from relevant senior growth leaders available privately for qualified conversations</p></Reveal>
      </div>
      <div className="gs-marquee" aria-hidden="true">
        <div className="gs-marquee-track">
          {row.map((u, i) => <img key={i} src={u} alt="" className="gs-logo" loading="lazy" />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
   ============================================================ */
function FinalCTA() {
  return (
    <section className="sd-sec gs-final">
      <div className="sd-wrap">
        <Reveal dir="scale" delay={60}>
          <TexturePanel tex="green" cols={30} rows={6} seed={42} style={{ minHeight: 190 }}>
            <div className="gs-final-panel">
              <span className="gs-final-line">A first call. 30 minutes, direct with the founder.</span>
              <PillBtn label={hero.cta} variant="ember" href="https://calendar.app.google/weNhUP588e9kF5zc7" />
            </div>
          </TexturePanel>
        </Reveal>
        <Reveal dir="up" delay={120}>
          <div className="gs-final-foot">
            <p className="gs-final-micro">You walk through where you see the gaps, I give you my read. I'll tell you straight whether this is a fractional engagement, an agency project, or a hire you should just make. If we're a fit, we scope. If not, you leave with a clearer map of the problem.</p>
            <p className="gs-final-diag">Or bring one live problem to a paid diagnostic. <strong>2 hours, $500.</strong> You leave with a teardown of what's broken and a prioritized next move. Write me at <a href="mailto:jakub@abmpages.com">jakub@abmpages.com</a>.</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, FitDiff, Engagement, LogoMarquee, FinalCTA });