// VibeAlchemy Marketing · Pricing

const TIERS = [
  {
    role: 'Try it on one idea, free.',
    name: 'Spark',
    price: { monthly: 0, annual: 0, founding: 0 },
    runs: '1 full validation, lifetime',
    cta: 'Run my free validation →',
    features: [
      'A verdict (pursue, pivot, sharpen, or rethink) and the assumption most likely to break it',
      'Bottoms-up market sizing: TAM, SAM, SOM',
      'See the full report shape, so you know what Validate adds',
    ],
  },
  {
    role: 'For the first idea you actually care about.',
    name: 'Validate',
    price: { monthly: 29, annual: 23, founding: 14 },
    runs: '5 validations per month',
    cta: 'Choose Validate →',
    features: [
      'Everything in Spark, plus the full pipeline: customer research, competitive landscape, moat, business model, red team, and a pivot map',
      'Write the idea, walk away, come back to a defensible answer',
      'Auto-pauses if your idea has drifted from where you started',
      '3 share links per run',
      'One-click pivot re-run when a stronger angle shows up',
    ],
  },
  {
    role: 'For founders running more than one bet.',
    name: 'Founder',
    price: { monthly: 69, annual: 55, founding: 34 },
    runs: '25 validations per month',
    cta: 'Choose Founder →',
    recommended: true,
    features: [
      'Everything in Validate, plus Guided mode: steer the AI before each stage. Sharpen the customer, point at competitors, catch bad framing early.',
      'Compare runs side by side. Portfolio view across all your ideas.',
      'One-click re-frame: change the angle, keep the research',
      'PDF export, unlimited share links',
      'Priority compute queue',
    ],
  },
  {
    role: "For the one idea you're betting the year on.",
    name: 'All-In',
    price: { monthly: 149, annual: 119, founding: 74 },
    runs: '50 validations per month (fair use)',
    cta: 'Choose All-In →',
    features: [
      'Everything in Founder, plus Investor Memo on demand: cited, fact-checked, ready to send',
      'Investor share mode: send the memo without exposing who you are',
      'Roadmap generator: turn validated assumptions into milestones',
      'Patterns across all your runs: what you keep getting right, what you keep missing',
      'Top-priority compute queue',
    ],
  },
];

function PricingCards({ teaser, billing: billingProp }) {
  const [billing, setBilling] = useState(billingProp || 'annual');
  return (
    <div>
      {!teaser && (
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
          <div className="seg">
            <button className={`seg-btn ${billing === 'monthly' ? 'on' : ''}`} onClick={() => setBilling('monthly')}>Monthly</button>
            <button className={`seg-btn ${billing === 'annual' ? 'on' : ''}`} onClick={() => setBilling('annual')}>
              Annual <span className="save-tag">Save 20%</span>
            </button>
          </div>
        </div>
      )}
      {!teaser && (
        <p className="mono mute2" style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.1em', marginBottom: 24 }}>
          {window.PRIVATE_BETA !== false
            ? 'Private beta · pricing shown for transparency · checkout opens to invited beta users'
            : 'First 100 paying customers — 50% off year 1, on top of annual.'}
        </p>
      )}
      <div className="pricing-grid">
        {TIERS.map((t, i) => {
          const list = teaser ? t.features.slice(0, 5) : [...t.features, ...(t.extra || [])];
          const showPrice = billing === 'monthly' ? t.price.monthly : t.price.annual;
          const showFounding = t.price.founding;
          return (
            <div className={`pricing-card ${t.recommended ? 'recommended' : ''}`} key={t.name}>
              {t.recommended && <span className="ribbon">★ Most popular</span>}
              <div className="pricing-role">{t.role}</div>
              <div className="pricing-name">{t.name}</div>
              <div>
                <div className="pricing-price-row">
                  <span className="pricing-price">${showPrice}</span>
                  <span className="pricing-cycle">{showPrice === 0 ? '' : '/mo'}</span>
                </div>
                {showFounding > 0 && (
                  <div className="pricing-founding" style={{ marginTop: 6 }}>
                    ${showFounding}/mo · founding member
                  </div>
                )}
                {showFounding === 0 && t.name === 'Spark' && (
                  <div className="pricing-founding" style={{ marginTop: 6 }}>
                    Free, always
                  </div>
                )}
              </div>
              <div className="pricing-runs">{t.runs}</div>
              <ul className="pricing-features">
                {list.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <div className="pricing-cta">
                {window.PRIVATE_BETA !== false ? (
                  <a
                    className={`btn ${t.recommended ? 'btn-primary' : ''}`}
                    style={{ width: '100%', justifyContent: 'center' }}
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      openWaitlist({
                        source: t.name === 'All-In' ? 'all_in_page' : 'marketing',
                        tier_interest: t.name === 'All-In' ? 'all_in' : 'general',
                      });
                    }}
                  >Join the private beta →</a>
                ) : (
                  <a className={`btn ${t.recommended ? 'btn-primary' : ''}`} style={{ width: '100%', justifyContent: 'center' }} href="/login.html">{t.cta}</a>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Full comparison table ───────────────────────────────────────────────
const COMPARE_GROUPS = [
  {
    name: 'Plan',
    rows: [
      ['Monthly price', '$0', '$29', '$69', '$149'],
      ['Annual (founding member)', '—', '$14/mo', '$34/mo', '$74/mo'],
      ['Runs / month', '1 lifetime', '5', '25', '50 (fair use)'],
      ['Credits / month (add-ons + overage)', '—', '6', '20', '50'],
      ['Overage run cost', '—', '2 cr', '2 cr', '3 cr'],
      ['Concurrent runs', '1', '1', '2', '3'],
    ],
  },
  {
    name: 'Pipeline',
    rows: [
      ['Full pipeline', 'Slim (framing + sizing)', '✓', '✓', '✓'],
      ['Cadence', '—', 'Autonomous only', 'Auto + Guided', 'Auto + Guided'],
      ['Drift safety check-in', '—', '✓', '✓', '✓'],
    ],
  },
  {
    name: 'Documents',
    rows: [
      ['Decision Memo', 'From slim pipeline', 'Full', 'Full', 'Full'],
      ['Market Intelligence', 'Sizing only', 'Full', 'Full', 'Full'],
      ['Red Team Report', '—', 'Full', 'Full', 'Full'],
      ['Assumption Ledger', '—', 'Full', 'Full', 'Full'],
      ['Pivot Map', '—', 'Full', 'Full', 'Full'],
      ['Launch Plan', '—', '1 credit', '1 credit', '1 credit'],
      ['Roadmap', '—', '—', '—', '1 credit'],
    ],
  },
  {
    name: 'All-In features',
    rows: [
      ['Investor Memo (verifier + framing + citations)', '—', '—', '—', '1 credit'],
      ['Investor share mode', '—', '—', '—', '✓'],
    ],
  },
  {
    name: 'Workflow',
    rows: [
      ['Re-run from any stage', '—', '✓', '✓', '✓'],
      ['Pivot re-run', '—', '✓', '✓', '✓'],
      ['Compare runs', '—', '—', '✓', '✓'],
      ['Quick re-frame', '—', '—', '✓', '✓'],
      ['Portfolio Insights (pattern analysis)', '—', '—', '—', '✓'],
    ],
  },
  {
    name: 'Sharing & Export',
    rows: [
      ['Share links / run', '—', '3', 'Unlimited', 'Unlimited + investor'],
      ['PDF export', '—', '—', '✓', '✓'],
    ],
  },
];

const PRICING_FAQ = [
  {
    q: 'What counts as a run? What counts as an add-on?',
    a: "One run = one full pass through the validation pipeline. Re-runs with new inputs and pivot re-runs each count as a separate run — they use the full pipeline compute. Error re-runs are free — if our system fails mid-run, retrying doesn't cost a run or a credit. Add-ons (Launch Plan, Investor Memo, Roadmap, Objection Brief) are extras generated from a completed run; each one costs 1 credit from your monthly bundle. Add-ons don't count against your run quota.",
  },
  {
    q: "What's the difference between Autonomous and Guided mode?",
    a: "Autonomous runs the full pipeline end-to-end without stopping for input — you get the validation pack when it's done. Both modes still pause for safety checks (confirming the framing of your idea up front, and any mid-run drift detection). Guided adds steering check-ins before each major stage (Research, Analyse, Challenge), so you can sharpen the customer, redirect research, or point at specific incumbents before assumptions get baked in. Guided is included with Founder and All-In tiers.",
  },
  {
    q: 'What if I run out of runs in a month?',
    a: "Two options. (1) Use your remaining monthly credits as overage runs — Validate/Founder = 2 credits per run, All-In = 3 credits per run. (2) Buy a credit pack to extend (10 credits for $39, 30 for $89). Subscription runs are still much cheaper per run than overage, so for sustained heavier use upgrading the tier is the better value.",
  },
  {
    q: 'Can I switch between tiers?',
    a: 'Yes, anytime. Upgrade and the new features unlock immediately, prorated for the rest of the cycle. Downgrade and the change takes effect at the next billing date.',
  },
  {
    q: 'Annual vs monthly — can I switch later?',
    a: 'Yes. Switch monthly → annual any time to lock in the 20% annual discount. Switching annual → monthly only happens at the end of your annual term — when you commit to a year, you stay on annual for that year.',
  },
  {
    q: 'Refunds?',
    a: "Yes, within 14 days for monthly plans and 30 days for annual — prorated by your actual usage. If you've used 3 of 5 Validate runs in your billing month, you get a 40% refund. This keeps refunds fair and prevents the \"subscribe, run ideas, refund\" pattern.",
  },
  {
    q: 'Do credits expire?',
    a: "Two pools, two rules. Your subscription bundle (the monthly credits that come with your plan) is reset at every billing cycle — use them or lose them. Credits you buy as à-la-carte packs never expire and roll over indefinitely; they only end when you spend them. Spending always burns subscription credits first, so your paid pack credits stick around as long as possible.",
  },
  {
    q: 'Does the founding-member discount end after year 1?',
    a: "Founding pricing is capped at the first 100 paying customers — Validate, Founder, or All-In subscribers. Spark users don't count until they upgrade, and only qualify if they upgrade while the founding-100 window is still open. The 50% off applies to year 1 only; at year 2 you fall back to regular pricing, but as a thank-you you keep 10 bonus credits, a founding-member badge, and first dibs on new features.",
  },
  {
    q: 'Do you support BYOK?',
    a: 'No. We pay the model costs so we can control quality and shipping pace — BYOK introduces variance we\'d have to engineer around.',
  },
];

function PricingPage() {
  return (
    <div className="page">
      <PageHero
        eyebrow="PRICING"
        headline={window.PRIVATE_BETA !== false ? 'Pricing held for beta invitees.' : 'Start free. Lock in 50% off year 1.'}
        sub={window.PRIVATE_BETA !== false
          ? "We're in private beta. Pricing is shown so you know what you're walking into — checkout opens once you're invited."
          : 'Four tiers. First 100 paying customers lock in 50% off year 1.'}
      />
      <section className="section-tight">
        <div className="wrap">
          <PricingCards />

          {/* Credits explainer — sits tight against the cards, full width */}
          <div className="surface credits-explainer" style={{ padding: '28px 32px', marginTop: 32 }}>
            <div className="eyebrow gold" style={{ marginBottom: 14 }}>HOW RUNS AND CREDITS WORK</div>
            <p className="credits-explainer-body" style={{ marginBottom: 16 }}>
              Each plan includes a bundle of validations. Credits are the universal currency for everything beyond that.
            </p>
            <ul className="credits-explainer-list">
              <li><span><strong>Add-ons</strong> (Launch Plan, Investor Memo, Roadmap): 1 credit each.</span></li>
              <li><span><strong>Extra validations</strong> beyond your monthly bundle: 2 credits each on Validate and Founder, 3 credits each on All-In.</span></li>
              <li><span>Your monthly credit bundle is sized to cover normal use. You'll only notice credits if you go past your bundle.</span></li>
            </ul>
            <p className="mono" style={{ fontSize: 13, letterSpacing: '0.06em', marginTop: 16, color: 'var(--parchment)' }}>
              Bundle sizes: Validate 6 / Founder 20 / All-In 50 credits per month.
            </p>
          </div>

          <div style={{ textAlign: 'center', marginTop: 36 }}>
            <a className="link" href="#compare" style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Compare full features across tiers ↓</a>
          </div>
        </div>
      </section>

      {/* full comparison */}
      <section id="compare" className="section">
        <div className="wrap">
          <div className="section-header">
            <div className="eyebrow">COMPARE</div>
            <h2 className="h2 serif">Full feature comparison.</h2>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table className="tier-table">
              <thead>
                <tr>
                  <th style={{ width: '32%' }}></th>
                  <th>Spark</th>
                  <th>Validate</th>
                  <th className="us">Founder ★</th>
                  <th>All-In</th>
                </tr>
              </thead>
              <tbody>
                {COMPARE_GROUPS.map((g, gi) => (
                  <React.Fragment key={g.name}>
                    <tr className="group-row"><td colSpan={5}>{g.name}</td></tr>
                    {g.rows.map((row, ri) => (
                      <tr key={`${gi}-${ri}`}>
                        <td style={{ color: 'var(--parchment)' }}>{row[0]}</td>
                        <td className={row[1] === '—' ? 'cell-no' : 'cell-yes'}>{row[1]}</td>
                        <td className={row[2] === '—' ? 'cell-no' : 'cell-yes'}>{row[2]}</td>
                        <td className="us">{row[3]}</td>
                        <td className={row[4] === '—' ? 'cell-no' : 'cell-yes'}>{row[4]}</td>
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* pricing faq */}
      <Section eyebrow="PRICING FAQ" headline="What you'd want to know before signing up." narrow>
        <FAQAccordion items={PRICING_FAQ} />
      </Section>

      {window.PRIVATE_BETA !== false ? (
        <FinalCTA headline="Want in?" />
      ) : (
        <FinalCTA headline="Pick your tier. Lock in 50% off year 1." sub="Free first run. First 100 paying customers lock in 50% off year 1. No card required." />
      )}
    </div>
  );
}

Object.assign(window, { PricingPage, PricingCards, TIERS });