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

   PRICING: the marketing pricing block mirrors web/strategy/Pricing Strategy.html
   but renders the *live* model — Scout / Solo / Team / PAYG packs / Enterprise.
   Numbers are pulled from /api/billing/plans when a session is present, and
   otherwise fall back to PRICING_FALLBACK, which is 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, ",");
}

/* ---------------------------------------------------------------------------
   Static catalog — a verbatim mirror of server/src/services/pricing.ts so the
   PUBLIC landing page (no auth) always renders correct numbers. Shapes match
   PlanView / PackView from /api/billing/plans exactly, so the live fetch can
   drop straight in. earlyAdopter defaults TRUE (config.earlyAdopterPricing).
--------------------------------------------------------------------------- */
const ANNUAL_DISCOUNT = 0.15;
const annualMo = (m) => Math.round(m * (1 - ANNUAL_DISCOUNT));
const priceView = (m) => ({ monthlyCents: m, annualMonthlyCents: annualMo(m), annualTotalCents: annualMo(m) * 12 });

const PRICING_FALLBACK = {
  earlyAdopter: true,
  plans: [
    {
      id: "scout", name: "Scout", tagline: "Try it on your next few calls.",
      perSeat: false, briefsIncluded: 5,
      briefsLabel: "5 free brief credits — expire 12 months after signup",
      earlyAdopter: false, price: null, regularPrice: null,
      features: ["Complete Game Day Briefs", "ICP fit score & 30-sec game plan", "Questions, objections & roles to bring"],
      cta: "Start free",
    },
    {
      id: "solo", name: "Solo", tagline: "One rep. Subscribe, or just buy briefs.",
      perSeat: false, briefsIncluded: 10,
      briefsLabel: "10 briefs / month — resets monthly, no rollover",
      earlyAdopter: true, price: priceView(3900), regularPrice: priceView(5500),
      features: ["The same full brief, at a better rate than packs", "Monthly or annual (15% off)", "Top up anytime with Brief Packs", "Predictable monthly bill"],
      cta: "Subscribe",
    },
    {
      id: "team", name: "Team", tagline: "Per seat, with a shared pool for the heavy weeks.",
      perSeat: true, minSeats: 3, briefsIncluded: 10,
      briefsLabel: "10 briefs / seat / month + shared org pool",
      earlyAdopter: true, price: priceView(4900), regularPrice: priceView(6500),
      features: ["Per-seat included briefs every month", "Shared pool for heavy weeks — no per-seat overage", "Admin caps, alerts & usage analytics", "Min 3 seats · self-serve to ~25"],
      cta: "Start a team",
    },
    {
      id: "enterprise", name: "Enterprise", tagline: "Custom seat & pool pricing, SSO, terms.",
      perSeat: true, briefsIncluded: 0, briefsLabel: "Custom allowance + shared pool",
      earlyAdopter: false, price: null, regularPrice: null,
      features: ["Custom seat & pool pricing", "SSO / SAML, security & DPA review", "Invoicing / net terms", "Dedicated support"],
      cta: "Talk to sales",
    },
  ],
  packs: [
    { size: 10, popular: false, priceCents: 5290, perBriefCents: 529, regularPriceCents: 7900, regularPerBriefCents: 790 },
    { size: 25, popular: true, priceCents: 11475, perBriefCents: 459, regularPriceCents: 17100, regularPerBriefCents: 684 },
    { size: 60, popular: false, priceCents: 23700, perBriefCents: 395, regularPriceCents: 35400, regularPerBriefCents: 590 },
    { size: 150, popular: false, priceCents: 50250, perBriefCents: 335, regularPriceCents: 75000, regularPerBriefCents: 500 },
  ],
};

/* Pull live plan/pack numbers from the API when a session exists; otherwise the
   static fallback (the public visitor's path). Never blocks render. */
function usePricingCatalog() {
  const [cat, setCat] = React.useState(PRICING_FALLBACK);
  React.useEffect(() => {
    let alive = true;
    fetch("/api/billing/plans", { credentials: "include", headers: { Accept: "application/json" } })
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => {
        if (!alive || !d || !Array.isArray(d.plans) || !Array.isArray(d.packs)) return;
        setCat({
          plans: d.plans,
          packs: d.packs,
          earlyAdopter: d.current ? !!d.current.earlyAdopter : d.plans.some((p) => p.earlyAdopter),
        });
      })
      .catch(() => { /* anonymous visitor / offline → keep static fallback */ });
    return () => { alive = false; };
  }, []);
  return cat;
}

const ENTERPRISE_MAILTO = "mailto:sales@evolvesuite.io?subject=Evolve%20Edge%20Enterprise";

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 — the new model (Scout / Solo / Team / PAYG packs / Enterprise),
   mirroring web/strategy/Pricing Strategy.html. Monthly/Annual toggle drives
   the displayed subscription prices; early-adopter cards show the struck-through
   regular price + a "locked for life" badge. All numbers from usePricingCatalog.
============================================================================ */

/* Monthly / Annual segmented toggle (Annual = save 15%). */
function BillToggle({ period, onChange }) {
  return (
    <div className="ld-billtoggle" role="group" aria-label="Billing period">
      <button
        type="button"
        className={`ld-billtoggle__btn${period === "monthly" ? " is-on" : ""}`}
        aria-pressed={period === "monthly"}
        onClick={() => onChange("monthly")}
      >
        Monthly
      </button>
      <button
        type="button"
        className={`ld-billtoggle__btn${period === "annual" ? " is-on" : ""}`}
        aria-pressed={period === "annual"}
        onClick={() => onChange("annual")}
      >
        Annual <span className="ld-billtoggle__save">save 15%</span>
      </button>
    </div>
  );
}

/* One subscription/free/enterprise tier card. */
function PlanCard({ plan, period, accent }) {
  const annual = period === "annual";
  const isFeature = plan.id === "team";
  const href = plan.id === "enterprise" ? ENTERPRISE_MAILTO : APP_URL;
  const btnVariant = isFeature ? "primary" : "ghost";

  // Price block — null price = free (Scout) or custom (Enterprise).
  let priceEl = null;
  if (plan.id === "scout") {
    priceEl = (
      <div className="ld-tier__price">
        <span className="ld-tier__amt num">$0</span>
        <span className="ld-tier__per">free · 5 credits</span>
      </div>
    );
  } else if (plan.id === "enterprise") {
    priceEl = (
      <div className="ld-tier__price">
        <span className="ld-tier__amt ld-tier__amt--talk">Let's talk</span>
        <span className="ld-tier__per">custom pricing</span>
      </div>
    );
  } else if (plan.price) {
    const showMonthly = annual ? plan.price.annualMonthlyCents : plan.price.monthlyCents;
    const wasMonthly = plan.regularPrice ? (annual ? plan.regularPrice.annualMonthlyCents : plan.regularPrice.monthlyCents) : null;
    const perUnit = plan.perSeat ? "/ seat / mo" : "/ month";
    priceEl = (
      <div className="ld-tier__price">
        {wasMonthly != null && <span className="ld-tier__was num">{centsToUsd(wasMonthly)}</span>}
        <span className="ld-tier__amt num">{centsToUsd(showMonthly)}</span>
        <span className="ld-tier__per">{annual ? `${perUnit} · billed annually` : perUnit}</span>
      </div>
    );
  }

  // "locked for life" early-adopter save line (subscriptions only).
  let saveEl = null;
  if (plan.earlyAdopter && plan.price && plan.regularPrice) {
    if (annual) {
      const yr = centsToUsd(plan.price.annualTotalCents);
      saveEl = <div className="ld-tier__save">{yr}{plan.perSeat ? " / seat / yr" : " / yr"} — the 15% annual discount stacks on your early-adopter rate, locked for life.</div>;
    } else {
      const off = Math.round((1 - plan.price.monthlyCents / plan.regularPrice.monthlyCents) * 100);
      saveEl = <div className="ld-tier__save">Lock in {centsToUsd(plan.price.monthlyCents)}{plan.perSeat ? "/seat" : "/mo"} for life — {off}% off the {centsToUsd(plan.regularPrice.monthlyCents)} regular price.</div>;
    }
  }

  const iconByPlan = { scout: "Compass", solo: "User", team: "Users", enterprise: "Building2" };

  return (
    <div className={`ld-tier${isFeature ? " ld-tier--feature" : ""} ld-tier--${plan.id}`}>
      {isFeature && <span className="ld-tier__flag">The model</span>}
      <div className="ld-tier__bar" style={{ background: accent }}></div>
      <div className="ld-tier__in">
        <span className="ld-tier__name"><Icon name={iconByPlan[plan.id] || "Tag"} size={18} strokeWidth={2.2} /> {plan.name}</span>
        <p className="ld-tier__tag">{plan.tagline}</p>
        {plan.earlyAdopter && (
          <span className="ld-tier__ea"><Icon name="Rocket" size={12} strokeWidth={2.4} /> Early adopter — locked for life</span>
        )}
        {priceEl}
        {saveEl}
        <div className="ld-tier__unit" dangerouslySetInnerHTML={{ __html: briefsHtml(plan) }} />
        <ul className="ld-tier__list">
          {plan.features.map((f, i) => (
            <li key={i}><Icon name="Check" size={15} strokeWidth={2.6} /> {f}</li>
          ))}
        </ul>
        <a className={`ld-btn ld-btn--${btnVariant} ld-btn--md ld-tier__btn`} href={href}>{plan.cta}</a>
      </div>
    </div>
  );
}

/* The included-briefs explainer line, bolding the key allowance phrase. */
function briefsHtml(plan) {
  const lbl = plan.briefsLabel || "";
  // bold the leading allowance ("5 free brief credits", "10 briefs / month", etc.)
  const m = lbl.match(/^([^—-]+)(.*)$/);
  if (m) return `<b>${m[1].trim()}</b>${m[2] ? " " + m[2].replace(/^[—-]\s*/, "— ") : ""}`;
  return lbl;
}

/* The PAYG / pool pack ladder (10 / 25 / 60 / 150) with per-brief early rates. */
function PackLadder({ packs, earlyAdopter }) {
  return (
    <div className="ld-packs">
      <div className="ld-packs__head">
        <span className="ld-tier__name"><Icon name="Layers" size={18} strokeWidth={2.2} /> Pay-as-you-go Brief Packs</span>
        <p className="ld-tier__tag">No subscription. Buy briefs, burn them down oldest-first — every pack expires 12 months after purchase.</p>
        {earlyAdopter && (
          <span className="ld-tier__ea"><Icon name="Rocket" size={12} strokeWidth={2.4} /> 33% off every pack — early access only</span>
        )}
      </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">
              {earlyAdopter && p.regularPriceCents !== p.priceCents && (
                <span className="ld-pack__was num">{centsToUsd(p.regularPriceCents)}</span>
              )}
              <span className="num">{centsToUsd(p.priceCents)}</span>
            </div>
            <div className="ld-pack__rate">
              <span className="num">{centsToUsd(p.perBriefCents)}</span> / brief
              {earlyAdopter && p.regularPerBriefCents !== p.perBriefCents && (
                <span className="ld-pack__ratewas num"> was {centsToUsd(p.regularPerBriefCents)}</span>
              )}
            </div>
          </a>
        ))}
      </div>
      <p className="ld-packs__foot">
        <Icon name="Info" size={13} strokeWidth={2.4} /> Same packs fund a Solo balance or a Team's shared pool. Burned oldest-first · 12-month expiry · low-balance &amp; auto-refill alerts.
      </p>
    </div>
  );
}

/* The seat + shared-pool explainer (mirrors the strategy doc's .flow diagram). */
function SeatPoolExplainer() {
  return (
    <div className="ld-flow">
      <span className="ld-flow__title"><Icon name="GitMerge" size={18} strokeWidth={2.2} /> How seats + the shared pool work</span>
      <p className="ld-flow__sub">Every seat gets the same 10 briefs a month (resets, no rollover). Light reps don't use all of theirs; heavy reps quietly pull from the org pool — so the team never sees a pile of per-seat overage charges, just one pool that drains predictably.</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> Seat 1 · light week</div>
            <div className="ld-seatbox__meter">{Array.from({ length: 10 }).map((_, i) => <span key={i} className={i < 4 ? "on" : ""}></span>)}</div>
            <span className="ld-seatbox__cap">4 of 10 used · rest resets at month-end</span>
          </div>
          <div className="ld-seatbox ld-seatbox--over">
            <div className="ld-seatbox__top"><span className="ld-seatbox__av">JK</span> Seat 2 · heavy week</div>
            <div className="ld-seatbox__meter">{Array.from({ length: 10 }).map((_, i) => <span key={i} className="on"></span>)}</div>
            <span className="ld-seatbox__cap">10 of 10 used → overflow to pool ↓</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">Overflow draws from the pool</span>
          <span className="ld-flowmid__sub">automatic, at the org's volume rate</span>
        </div>
        <div className="ld-poolbox">
          <div className="ld-poolbox__top"><Icon name="Database" size={17} strokeWidth={2.2} /> Shared org pool</div>
          <div className="ld-poolbox__amt num">312</div>
          <span className="ld-poolbox__cap">briefs remaining · prepaid at the volume rate</span>
          <div className="ld-poolbox__bar"><i></i></div>
          <p className="ld-poolbox__note">Topped up by admins like Brief Packs · burned oldest-first · 12-month expiry · low-balance &amp; auto-refill alerts.</p>
        </div>
      </div>
    </div>
  );
}

/* The full marketing pricing block. */
function PricingSection() {
  const cat = usePricingCatalog();
  const [period, setPeriod] = React.useState("monthly");
  const accents = {
    scout: "linear-gradient(90deg, var(--neutral-2), var(--neutral-4))",
    solo: "linear-gradient(90deg, var(--gold-3), var(--bg-light-gold))",
    team: "linear-gradient(90deg, var(--blue-1), var(--bg-light-blue))",
    enterprise: "linear-gradient(90deg, var(--purple-1), var(--bg-light-purple))",
  };

  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. Subscribe for a better per-brief rate, or just buy a pack and burn it down. One credit = one full brief, on every plan.</p>
        </Reveal>

        <Reveal className="ld-billtoggle__wrap"><BillToggle period={period} onChange={setPeriod} /></Reveal>

        <Reveal>
          <div className="ld-tiers">
            {cat.plans.map((p) => <PlanCard key={p.id} plan={p} period={period} accent={accents[p.id]} />)}
          </div>
        </Reveal>

        <Reveal delay={80}><PackLadder packs={cat.packs} earlyAdopter={cat.earlyAdopter} /></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 />

      {/* early-adopter promo banner — the launch offer, locked for life */}
      <a className="ld-promo" href="#pricing">
        <span className="ld-promo__badge"><Icon name="Rocket" size={13} strokeWidth={2.4} /> Early adopter</span>
        <span className="ld-promo__txt">
          Lock in your subscription rate <b>for life</b> — Solo <span className="num">$39</span>/mo (reg. <span className="ld-promo__was num">$55</span>). Plus <b>33% off</b> Brief Packs while early access is open.
        </span>
        <span className="ld-promo__cta">See pricing <Icon name="ArrowRight" size={14} strokeWidth={2.6} /></span>
      </a>

      {/* 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 — the new model (Scout / Solo / Team / PAYG packs / Enterprise) */}
      <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, subscribe (Solo is $39/mo early-adopter, $55 regular, for 10 briefs a month) or just buy a Brief Pack and pay as you go, from about $3.35 a brief at volume. Teams are $49 per seat/mo with a shared pool. Every credit, free or purchased, is good for 12 months." />
            <FaqItem q="Do my briefs expire?"
              a="Your 5 free Scout credits and any Brief Pack 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. Subscription briefs are a fresh 10 each month and don't roll over; on a Team, heavy weeks overflow into the shared pool instead of hitting a wall." />
            <FaqItem q="Subscription or pay-as-you-go — which should I pick?"
              a="If you prep most of your calls, subscribe — the per-brief rate beats packs and the bill is predictable. If your pipeline is seasonal or you're just starting, grab a Brief Pack and burn it down with no commitment. You can always top up a subscription with packs later." />
          </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 · Solo from $39/mo or packs from $3.35 a brief" />
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

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