/* PitchIQ — landing page (the composite). Emotional/status hero + calculator
   centerpiece + commission clarity + testimonials + risk reversal + FAQ.

   PRICING: CONSUMPTION ONLY (pitchiq #24, #286). Marcos, 2026-09-22 (binding):
   no plans or tiers in any product, and credits come only from the platform — so
   the pricing block shows NO plan cards (the Scout / Deployments cards and the
   GET /api/billing/plans fetch that fed them are gone, #286). It shows the
   PAYG pack ladder from PRICING_PACKS, kept verbatim in sync with
   server/src/services/pricing.ts (the single source of truth). All money is in
   CENTS — divide by 100 only at display via centsToUsd(). Customer-facing credit
   expiry copy ALWAYS says "12 months" (compliance), never 24. */

/* ---- money: cents → "$1,234.56" / "$39" (trailing .00 dropped) — mirrors pricing.centsToUsd ---- */
function centsToUsd(cents) {
  const dollars = (cents || 0) / 100;
  const s = Number.isInteger(dollars) ? String(dollars) : dollars.toFixed(2);
  return "$" + s.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

/* ---------------------------------------------------------------------------
   The pack ladder — a verbatim mirror of server/src/services/pricing.ts's PACKS
   so the PUBLIC landing page (no auth) renders correct numbers. Packs carry ONE
   price each. If they drift from pricing.ts, this public page quotes a price we
   do not charge.

   #286: this used to be a plan catalog too (`plans: [Scout, Deployments]`), fed
   live from GET /api/billing/plans for a signed-in visitor. Edge has no plans, so
   the catalog, its fetch and the plan cards are removed together — removing only
   the fetch would have frozen the page on the hard-coded plan cards.
--------------------------------------------------------------------------- */
const PRICING_PACKS = [
  { size: 10, popular: false, priceCents: 8500, perBriefCents: 850 },
  { size: 25, popular: true, priceCents: 20000, perBriefCents: 800 },
  { size: 60, popular: false, priceCents: 45000, perBriefCents: 750 },
  { size: 150, popular: false, priceCents: 105000, perBriefCents: 700 },
];

function CommissionCalc() {
  const [comm, setComm] = React.useState(2500);
  const [deals, setDeals] = React.useState(2);
  const fmt = (n) => "$" + Math.round(n).toLocaleString();
  // Typed fields accept any number; strip non-digits and guard NaN/negatives.
  const numOr = (v, def) => { const n = parseInt(String(v).replace(/[^0-9]/g, ""), 10); return Number.isFinite(n) ? n : def; };
  const extraMo = deals * comm;
  const annual = extraMo * 12;

  const Ctrl = ({ label, children }) => (
    <div>
      <div className="ld-ctrl__top"><span className="ld-ctrl__lbl">{label}</span></div>
      {children}
    </div>
  );

  return (
    <div className="ld-calc">
      <div className="ld-calc__controls">
        <Ctrl label="Your commission per closed deal">
          <div className="ld-numfield">
            <span className="ld-numfield__pre">$</span>
            <input className="ld-numin" type="number" inputMode="numeric" min="0" step="100" value={comm}
              onChange={e => setComm(numOr(e.target.value, 0))} aria-label="Your commission per closed deal" />
            <span className="ld-numfield__suf">per deal</span>
          </div>
        </Ctrl>
        <Ctrl label="Extra deals a month from walking in ready">
          <div className="ld-numfield">
            <input className="ld-numin" type="number" inputMode="numeric" min="0" value={deals}
              onChange={e => setDeals(numOr(e.target.value, 0))} aria-label="Extra deals a month from walking in ready" />
            <span className="ld-numfield__suf">deals / mo</span>
          </div>
        </Ctrl>
        <p style={{ margin: 0, fontSize: "var(--fs-body-3)", color: "var(--fg-3)", lineHeight: 1.5 }}>
          Just close a couple more a month because you showed up prepared instead of winging it — here's what that's worth over a year.
        </p>
      </div>
      <div className="ld-calc__out">
        <span className="ld-calc__outlbl">Extra commission a year</span>
        <span className="ld-calc__big">{fmt(annual)}</span>
        <span className="ld-calc__chip"><Icon name="TrendingUp" size={15} strokeWidth={2.4} /> {deals} more {deals === 1 ? "deal" : "deals"} / month</span>
        <span className="ld-calc__sub">That's {fmt(extraMo)} more a month from prep you used to skip — for a tool that costs less than one lost deal.</span>
      </div>
    </div>
  );
}

function Stars() {
  return <span className="ld-rating__stars">{[0,1,2,3,4].map(i => <Icon key={i} name="Star" size={15} strokeWidth={0} style={{ fill: "var(--gold-1)" }} />)}</span>;
}

function FaqItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div className="ld-faqitem">
      <button className={`ld-faqq${open ? " is-open" : ""}`} onClick={() => setOpen(o => !o)}>
        {q} <Icon name="ChevronDown" size={20} />
      </button>
      {open && <div className="ld-faqa">{a}</div>}
    </div>
  );
}

const TESTIMONIALS = [
  { seg: "Managed Services", color: "var(--blue-1)", name: "Ray T.", role: "Managed Services AE",
    q: "I used to burn an evening researching a prospect's stack and still wing the pitch. Now I get that depth in a minute and walk in with a pitch built around their exact environment — my pitch-to-second-call rate basically doubled.",
    metric: "Pitch → 2nd call up ~2x" },
  { seg: "Digital Transformation", color: "var(--purple-1)", name: "Sofia M.", role: "Digital Transformation Consultant",
    q: "Every transformation deal is different, and generic decks die fast. The brief tells me what this specific buyer actually cares about before I dial, so the whole conversation feels tailor-made. Far more first calls turn into registered opportunities now.",
    metric: "More first calls → registered" },
  { seg: "Server & Compute", color: "var(--green-1)", name: "Daniel K.", role: "Server & Compute Sales",
    q: "I'd walk into refresh calls with the same spiel for everyone. Now I know their workloads and refresh timeline going in and tailor the pitch to it. It saves me hours a week and my follow-up rate jumped.",
    metric: "Hours saved every week" },
  { seg: "Storage Solutions", color: "var(--gold-1)", name: "Aisha R.", role: "Storage Solutions AE",
    q: "The prep depth is the whole difference. I show up understanding their capacity pain and growth plans, so the pitch speaks directly to them instead of at them. Way more of my first meetings convert to a second.",
    metric: "2nd-call conversion up" },
  { seg: "Cybersecurity", color: "var(--red-1)", name: "Marcus V.", role: "Cybersecurity Account Exec",
    q: "Security buyers can smell a canned pitch instantly. This hands me their likely posture and concerns up front, so every call is customized to them. My deals move from intro to registered pipeline far faster.",
    metric: "Faster to registered pipeline" },
  { seg: "Network Infrastructure", color: "var(--blue-1)", name: "Priya S.", role: "Network Infrastructure Sales",
    q: "I cover a huge territory and can't deep-research every call. This gives me veteran-level prep in a minute, customized per account, so I walk in sounding like a specialist. My first-pitch-to-next-step rate climbed noticeably.",
    metric: "More next steps booked" },
  { seg: "Cloud & SaaS", color: "var(--purple-1)", name: "Tom B.", role: "Cloud Solutions AE",
    q: "Time was my enemy — too many calls, no time to prep. Now I get a tailored game plan per prospect in seconds and sound like I've studied their business for days. My second-call rate is up and so is my pipeline.",
    metric: "Pipeline noticeably up" },
  { seg: "Data Center & Colo", color: "var(--green-1)", name: "Lena P.", role: "Data Center Sales",
    q: "Colo deals hinge on understanding their footprint and growth. I get that context before the call and pitch to their exact situation, not a template. Hours saved, and more pitches turn into registered deals.",
    metric: "More registered deals" },
  { seg: "Unified Comms & VoIP", color: "var(--gold-1)", name: "Devin O.", role: "UC & Collaboration Sales",
    q: "I used to repeat the same UC pitch to everyone. Now each call is customized to the prospect's setup and pain — from real prep I didn't have to do myself. My pitch-to-second-meeting rate completely transformed.",
    metric: "Pitch → meeting up" },
  { seg: "Endpoint & Devices", color: "var(--blue-1)", name: "Hannah G.", role: "Endpoint & Device Sales",
    q: "Speed plus depth. In a minute I know the account cold and walk in with a pitch aligned to them specifically. More of my first conversations now end with a real next step on the calendar instead of a polite 'we'll think about it.'",
    metric: "More next steps locked" }
];

function TMini({ t }) {
  const initials = t.name.split(" ").map(w => w[0]).slice(0, 2).join("");
  return (
    <div className="ld-tmini">
      <span className="ld-tmini__seg"><Icon name="Briefcase" size={11} strokeWidth={2.4} /> {t.seg}</span>
      <p className="ld-tmini__q">“{t.q}”</p>
      <span className="ld-tmini__metric"><Icon name="TrendingUp" size={13} strokeWidth={2.4} /> {t.metric}</span>
      <div className="ld-tmini__by">
        <span className="ld-tmini__av" style={{ background: t.color }}>{initials}</span>
        <span>
          <div className="ld-tmini__name">{t.name}</div>
          <div className="ld-tmini__role">{t.role}</div>
        </span>
      </div>
    </div>
  );
}

function TestimonialCarousel() {
  // duplicate the list so the marquee loops seamlessly
  const loop = TESTIMONIALS.concat(TESTIMONIALS);
  return (
    <div className="ld-marquee">
      <div className="ld-marquee__track">
        {loop.map((t, i) => <TMini key={i} t={t} />)}
      </div>
    </div>
  );
}

/* ============================================================================
   PRICING — consumption only (pitchiq #24, #286): the pay-as-you-go pack ladder
   and how the shared pool works. No plan cards, no tiers, no recurring price.
============================================================================ */

/* The PAYG / pool pack ladder (10 / 25 / 60 / 150) with per-brief early rates. */
function PackLadder({ packs }) {
  return (
    <div className="ld-packs">
      <div className="ld-packs__head">
        <span className="ld-tier__name"><Icon name="Layers" size={18} strokeWidth={2.2} /> Credit packages</span>
        <p className="ld-tier__tag">No subscription, no seats. Credits are bought in Evolve Suite and burned down oldest-first — every pack expires 12 months after purchase.</p>
      </div>
      <div className="ld-packgrid">
        {packs.map((p) => (
          <a key={p.size} className={`ld-pack${p.popular ? " is-popular" : ""}`} href={APP_URL}>
            {p.popular && <span className="ld-pack__pop">Most popular</span>}
            <div className="ld-pack__qty"><span className="num">{p.size}</span> briefs</div>
            <div className="ld-pack__total">
              <span className="num">{centsToUsd(p.priceCents)}</span>
            </div>
            <div className="ld-pack__rate">
              <span className="num">{centsToUsd(p.perBriefCents)}</span> / brief
            </div>
          </a>
        ))}
      </div>
      <p className="ld-packs__foot">
        <Icon name="Info" size={13} strokeWidth={2.4} /> Bigger packs cost less per brief. Burned oldest-first · 12-month expiry · low-balance &amp; auto-refill alerts from Evolve Suite.
      </p>
    </div>
  );
}

/* How free seats + the one shared pool work (consumption-only, pitchiq #24). */
function SeatPoolExplainer() {
  return (
    <div className="ld-flow">
      <span className="ld-flow__title"><Icon name="GitMerge" size={18} strokeWidth={2.2} /> Seats are free. Briefs are the meter.</span>
      <p className="ld-flow__sub">Put the whole team on it — inviting people costs nothing, and no briefs are ever stranded on a seat that never logged in. Everyone draws from one shared pool, so what you pay for is what actually got generated.</p>
      <div className="ld-flow__grid">
        <div className="ld-seatcol">
          <div className="ld-seatbox">
            <div className="ld-seatbox__top"><span className="ld-seatbox__av">AR</span> Rep 1 · light week</div>
            <span className="ld-seatbox__cap">2 briefs · free seat</span>
          </div>
          <div className="ld-seatbox">
            <div className="ld-seatbox__top"><span className="ld-seatbox__av">JK</span> Rep 2 · heavy week</div>
            <span className="ld-seatbox__cap">11 briefs · free seat</span>
          </div>
        </div>
        <div className="ld-flowmid">
          <span className="ld-flowmid__arrow"><Icon name="ArrowRight" size={22} strokeWidth={2.4} /></span>
          <span className="ld-flowmid__lbl">Both draw from one pool</span>
          <span className="ld-flowmid__sub">no per-seat allowance to strand</span>
        </div>
        <div className="ld-poolbox">
          <div className="ld-poolbox__top"><Icon name="Database" size={17} strokeWidth={2.2} /> Shared brief pool</div>
          <div className="ld-poolbox__amt num">312</div>
          <span className="ld-poolbox__cap">briefs remaining · prepaid</span>
          <div className="ld-poolbox__bar"><i></i></div>
          <p className="ld-poolbox__note">Topped up by admins with credit packages · burned oldest-first · 12-month expiry · low-balance &amp; auto-refill alerts from Evolve Suite.</p>
        </div>
      </div>
    </div>
  );
}

/* The full marketing pricing block. */
function PricingSection() {
  return (
    <section className="ld-section" id="pricing">
      <div className="ld-wrap">
        <Reveal className="ld-shead">
          <span className="ld-eyebrow"><Icon name="Tag" size={13} strokeWidth={2.4} /> Pricing</span>
          <h2 className="ld-h2">Start free. Pay for briefs, not seats you don't use.</h2>
          <p className="ld-lead">Five free briefs to start. After that, buy a credit package in Evolve Suite and burn it down — no subscription, no per-seat bill. One credit = one full brief.</p>
        </Reveal>

        <Reveal delay={80}><PackLadder packs={PRICING_PACKS} /></Reveal>

        <Reveal delay={80}><SeatPoolExplainer /></Reveal>

        <Reveal>
          <div className="ld-refer">
            <span className="ld-refer__icon"><Icon name="Gift" size={26} strokeWidth={2} /></span>
            <div>
              <div className="ld-refer__t">Out of briefs? Invite a colleague.</div>
              <div className="ld-refer__p">Refer a teammate and <b>you both get +2 brief credits</b>, free — up to +10. Referral credits expire 12 months after they land, same as every credit.</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function LandingD() {
  const stats = [
    { n: "1 in 4", l: "B2B reps hit quota last year. Prep is what separates them." },
    { n: "~1 min", l: "to a full, personalized brief — not 3–4 hours of digging." },
    { n: "+30%", l: "win rate when the right specialist joins the deal." },
    { n: "Day 1", l: "you start prepping like a seasoned closer." }
  ];
  const steps = [
    { n: "1", icon: "Sparkles", h: "Drop in who you're meeting", p: "Paste an email, a link, or a name — or just forward the calendar invite. That's the whole setup." },
    { n: "2", icon: "Radar", h: "It does the homework", p: "Researches them across the web and scores their fit with what you sell, so you qualify before you spend a slot." },
    { n: "3", icon: "ClipboardCheck", h: "Walk in with a game plan", p: "Opening line, smart questions, likely objections, and the roles to bring — ready to read in the elevator." }
  ];
  const showrows = [
    { icon: "Target", t: "t-green", h: "Seller-to-buyer fit, scored", p: "Know if they're a real match before you invest the time." },
    { icon: "Zap", t: "t-blue", h: "30-second game plan", p: "Exactly what to say in the first five minutes." },
    { icon: "HelpCircle", t: "t-purple", h: "Smart questions to ask", p: "Read them off the brief and sound like you did your homework." },
    { icon: "ShieldAlert", t: "t-gold", h: "Objections, pre-handled", p: "The pushback on price and timing — with your answer ready." },
    { icon: "Users", t: "t-blue", h: "Who's in the room", p: "Each stakeholder's priorities and the angle that wins them." },
    { icon: "UserPlus", t: "t-green", h: "Roles to bring", p: "When a teammate lifts your win rate — and which one." }
  ];

  return (
    <div className="ld ld-d">
      <SiteNav />

      {/* The early-adopter promo banner was removed: it advertised a "subscription
          rate locked for life" at "Solo $39/mo" and "33% off Brief Packs", and
          Edge sells none of those — pricing.ts has no Solo plan, and its docblock
          records "Early-adopter discount: none." (each pack has ONE price).
          Deliberately NOT replaced with different promotional copy: what, if
          anything, belongs here is a product decision for the owner / Eli. */}

      {/* hero */}
      <header className="ld-hero">
        <div className="ld-wrap ld-hero__grid">
          <div className="ld-hero__copy">
            <span className="ld-eyebrow is-warm"><Icon name="Gauge" size={13} strokeWidth={2.4} /> The pre-call edge</span>
            <h1 className="ld-h1">Your unfair advantage, <span className="ld-accent">60 seconds</span> before every call.</h1>
            <p className="ld-lead">Evolve Edge researches the prospect, scores their fit with what you sell, and hands you a play-by-play — so you out-prepare every rep across the table and turn more calls into registered deals.</p>
            <div className="ld-hero__cta">
              <LBtn size="lg" icon="Sparkles" iconRight="ArrowRight">Generate my first brief free</LBtn>
              <a className="ld-btn ld-btn--ghost ld-btn--lg" href="#inside">See what's inside</a>
            </div>
            <div className="ld-rating">
              <Stars />
              <span className="ld-rating__txt"><b>Loved by reps</b> who used to dread discovery calls</span>
            </div>
          </div>
          <div className="ld-hero__visual">
            <span className="ld-blob" style={{ width: 340, height: 340, background: "var(--bg-light-blue)", top: -40, right: -30 }}></span>
            <span className="ld-blob" style={{ width: 200, height: 200, background: "var(--bg-light-gold)", bottom: -20, left: -20 }}></span>
            <BriefMock />
            <div className="ld-mock__float ld-mock__float--tr">
              <span className="num">94%</span>
              <span className="ld-mock__floatlbl">ICP fit<br />score</span>
            </div>
          </div>
        </div>
      </header>

      {/* stat ticker */}
      <section className="ld-section ld-section--tight">
        <div className="ld-wrap"><Reveal><StatStrip stats={stats} /></Reveal></div>
      </section>

      {/* two ways — emotional/status beat */}
      <section className="ld-section" id="why" style={{ background: "var(--bg-surface)" }}>
        <div className="ld-wrap">
          <Reveal className="ld-shead">
            <span className="ld-eyebrow is-warm"><Icon name="GitFork" size={13} strokeWidth={2.4} /> Two ways to take your next call</span>
            <h2 className="ld-h2">Same prospect. Same 30 minutes. Very different outcome.</h2>
          </Reveal>
          <div className="ld-compare">
            <Reveal>
              <div className="ld-comparecard ld-comparecard--bad">
                <span className="ld-comparecard__tag"><Icon name="CloudDrizzle" size={13} strokeWidth={2.4} /> Winging it</span>
                <h3>You improvise and hope.</h3>
                <ul className="ld-comparelist">
                  <li><Icon name="X" size={18} strokeWidth={2.4} /><span>Generic discovery — the same questions you ask everyone.</span></li>
                  <li><Icon name="X" size={18} strokeWidth={2.4} /><span>Blindsided when price and timing come up.</span></li>
                  <li><Icon name="X" size={18} strokeWidth={2.4} /><span>A slot burned on a prospect who was never a fit.</span></li>
                  <li><Icon name="X" size={18} strokeWidth={2.4} /><span>Another call that quietly fades to "no decision."</span></li>
                </ul>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="ld-comparecard ld-comparecard--good">
                <span className="ld-comparecard__tag"><Icon name="Sparkles" size={13} strokeWidth={2.4} /> Pitch ready</span>
                <h3>You run the room.</h3>
                <ul className="ld-comparelist">
                  <li><Icon name="Check" size={18} strokeWidth={2.6} /><span>You name their pain before they do — and earn the next 20 minutes.</span></li>
                  <li><Icon name="Check" size={18} strokeWidth={2.6} /><span>You handle objections before they stall the deal.</span></li>
                  <li><Icon name="Check" size={18} strokeWidth={2.6} /><span>You qualify fast and protect your calendar.</span></li>
                  <li><Icon name="Check" size={18} strokeWidth={2.6} /><span>You book the next step — and it shows up in your commission.</span></li>
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* calculator — the engagement centerpiece, pulled high */}
      <section className="ld-section" id="math">
        <div className="ld-wrap">
          <Reveal className="ld-shead">
            <span className="ld-eyebrow"><Icon name="Calculator" size={13} strokeWidth={2.4} /> Do the math on your own deals</span>
            <h2 className="ld-h2">What's one more deal a month actually worth to you?</h2>
            <p className="ld-lead">Punch in your own numbers. A few more conversions is the gap between missing your number and blowing past it.</p>
          </Reveal>
          <Reveal><CommissionCalc /></Reveal>
        </div>
      </section>

      {/* how it works */}
      <section className="ld-section" id="how" style={{ background: "var(--bg-surface)" }}>
        <div className="ld-wrap">
          <Reveal className="ld-shead">
            <span className="ld-eyebrow"><Icon name="Workflow" size={13} strokeWidth={2.4} /> How it works</span>
            <h2 className="ld-h2">Three taps to call-ready. No setup, no learning curve.</h2>
            <p className="ld-lead">No setup project. No new workflow. If you can paste a link, you can prep like a top performer.</p>
          </Reveal>
          <div className="ld-steps">
            {steps.map((s, i) => (
              <Reveal key={i} delay={i * 110}>
                <div className="ld-step">
                  <div className="ld-step__bar"></div>
                  <div className="ld-step__n">{s.n}</div>
                  <div className="ld-step__icon"><Icon name={s.icon} size={22} /></div>
                  <h3>{s.h}</h3><p>{s.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* showcase — what's in the brief */}
      <section className="ld-section" id="inside">
        <div className="ld-wrap ld-showcase">
          <Reveal className="ld-showcase__visual">
            <span className="ld-blob" style={{ width: 260, height: 260, background: "var(--bg-light-gold)", top: -20, left: -20 }}></span>
            <BriefMock company="Veltris Health" fitLabel="Strong ICP match" floatN="0" floatLbl="hours of prep" />
          </Reveal>
          <Reveal delay={120}>
            <span className="ld-eyebrow is-warm"><Icon name="FileText" size={13} strokeWidth={2.4} /> Inside every Game Day Brief</span>
            <h2 className="ld-h2" style={{ margin: "16px 0 28px" }}>Everything you'd prep yourself — if you had three hours.</h2>
            <div className="ld-showcase__list">
              {showrows.map((r, i) => (
                <div className="ld-showrow" key={i}>
                  <span className={`ld-showrow__icon ${r.t}`}><Icon name={r.icon} size={20} /></span>
                  <div><h3>{r.h}</h3><p>{r.p}</p></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* testimonials carousel */}
      <section className="ld-section ld-section--tight" style={{ background: "var(--bg-surface)" }}>
        <div className="ld-wrap">
          <Reveal className="ld-shead">
            <span className="ld-eyebrow"><Icon name="Quote" size={13} strokeWidth={2.4} /> From the field</span>
            <h2 className="ld-h2">Reps across every corner of tech sales — same result.</h2>
            <p className="ld-lead">Less time prepping, more depth before the call, and a pitch built for the exact prospect in front of them.</p>
          </Reveal>
          <Reveal><TestimonialCarousel /></Reveal>
        </div>
      </section>

      {/* guarantee / risk reversal */}
      <section className="ld-section ld-section--tight">
        <div className="ld-wrap">
          <Reveal>
            <div className="ld-guarantee">
              <span className="ld-guarantee__seal"><Icon name="BadgeCheck" size={42} strokeWidth={1.7} /></span>
              <div>
                <h3>Walk in sharper on your next call — or it cost you nothing.</h3>
                <p>Your first briefs are free, set up takes under a minute, and there's no credit card. Generate one before your next call. If you don't feel more prepared than you've ever been, you've lost 60 seconds. That's the whole risk.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* pricing — consumption only; credits are bought in Evolve Suite (no plans, #286) */}
      <PricingSection />

      {/* FAQ — answers the real objections */}
      <section className="ld-section" style={{ background: "var(--bg-surface)" }}>
        <div className="ld-wrap">
          <Reveal className="ld-shead">
            <span className="ld-eyebrow"><Icon name="MessageCircleQuestion" size={13} strokeWidth={2.4} /> Straight answers</span>
            <h2 className="ld-h2">The questions reps actually ask.</h2>
          </Reveal>
          <Reveal className="ld-faq">
            <FaqItem defaultOpen q="Is this going to replace me?"
              a="No. The AI does the grunt research nobody enjoys. You bring the relationship, the read on the room, and the close — the parts that have always been yours. It makes you look good, not replaceable." />
            <FaqItem q="How long does it take to set up?"
              a="Under a minute. You sign in with your work email, confirm what you sell and who you sell to, and you're ready. Every brief after that is about a minute." />
            <FaqItem q="Do I need to be technical?"
              a="Not at all. If you can paste a link or forward a calendar invite, you're done — there's nothing to learn and nothing to configure." />
            <FaqItem q="What does it cost?"
              a="Free to start — 5 brief credits, no credit card. After that you buy a credit package in Evolve Suite and burn it down; seats are free and there is nothing recurring to pay. Pack sizes and prices are listed in the pricing section above. Every credit, free or purchased, is good for 12 months." />
            <FaqItem q="Do my briefs expire?"
              a="Your 5 free credits and any credits you buy stay good for 12 months from the day you get them, burned oldest-first — we'll remind you about 30 days before anything lapses. Seats are free, so nothing is stranded on a teammate who never logs in." />
          </Reveal>
        </div>
      </section>

      {/* final CTA */}
      <section className="ld-section">
        <div className="ld-wrap">
          <CTABand
            headline="Your next call is coming. Be prepared."
            sub="Generate your first Game Day Brief free and feel the difference before you even dial."
            primaryLabel="Generate my first brief free"
            fine="Free to start · no credit card · then credit packages from Evolve Suite, and every credit is good for 12 months" />
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

Object.assign(window, {
  LandingD, FaqItem,
  // pricing surface (also consumed by the standalone landing/pricing.html promo page)
  centsToUsd, PRICING_PACKS,
  PackLadder, SeatPoolExplainer, PricingSection,
});