/* PRICING — subscription tiers + top-up packs + FAQ + closing CTA.
   Spec: Standard / Plus / Premier (popular) / Elite / Bespoke,
   monthly↔annual toggle, five top-up packs, eight-item FAQ. */

function PricingPage() {
  const { isMobile, isTablet } = useBreakpoint();
  const [billing, setBilling] = React.useState('monthly'); // 'monthly' | 'annual'
  const [stickyOpen, setStickyOpen] = React.useState(false);

  // Sticky bottom CTA on mobile after 50% scroll
  React.useEffect(() => {
    if (!isMobile) {setStickyOpen(false);return;}
    const onScroll = () => {
      const d = document.documentElement;
      const max = d.scrollHeight - d.clientHeight || 1;
      setStickyOpen(window.scrollY / max > 0.5);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [isMobile]);

  return (
    <div data-screen-label="05 Pricing">
      <PricingHeader billing={billing} setBilling={setBilling} />
      <SubscriptionTiers billing={billing} isMobile={isMobile} isTablet={isTablet} />
      <TopUpPacks isMobile={isMobile} isTablet={isTablet} />
      <PricingFAQ isMobile={isMobile} />
      <PricingClosingCTA />
      {isMobile &&
      <div style={{
        position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 40,
        padding: '12px 16px calc(12px + env(safe-area-inset-bottom))',
        background: 'var(--canvas)', borderTop: '1px solid var(--bone)',
        boxShadow: '0 -8px 24px rgba(0,0,0,0.06)',
        transform: stickyOpen ? 'translateY(0)' : 'translateY(110%)',
        transition: 'transform 280ms var(--ease-standard)'
      }}>
          <Button variant="primary" size="large" arrow style={{ width: '100%', justifyContent: 'center' }}>Start free trial</Button>
        </div>
      }
    </div>);

}

window.PricingPage = PricingPage;

/* ─────────────────────── 1. Page header ─────────────────────── */

function PricingHeader({ billing, setBilling }) {
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ background: 'var(--paper)', padding: `clamp(28px, 4vw, 40px) var(--pad-x) clamp(40px, 6vw, 64px)` }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Breadcrumbs trail={[{ l: 'Pricing' }]} />
        <div style={{ marginTop: 24, maxWidth: 'min(960px, 92vw)' }}>
          <Eyebrow>Pricing</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            lineHeight: 1.0, letterSpacing: '-0.03em',
            color: 'var(--ink)', margin: '20px 0 0', fontSize: 'clamp(34px, 6.2vw, 70px)'
          }}>
            One platform.<br />All features.<br /><em style={{ fontStyle: 'italic' }}>Choose by volume.</em>
          </h1>
          <p style={{ marginTop: 20, fontSize: 'clamp(16px, 1.6vw, 18px)', lineHeight: 1.6, color: 'var(--graphite)', maxWidth: 600 }}>
            Unlike other companies, every plan includes every feature. Choose based on how many images you need each month.
          </p>
          <div style={{ marginTop: 32 }}>
            <BillingToggle value={billing} onChange={setBilling} />
          </div>
        </div>
      </div>
    </section>);

}

function BillingToggle({ value, onChange }) {
  const isAnnual = value === 'annual';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
      <div role="group" aria-label="Billing period" style={{
        display: 'inline-flex', padding: 4, borderRadius: 999,
        background: 'var(--canvas)', border: '1px solid var(--mist)'
      }}>
        {[
        { k: 'monthly', l: 'Monthly' },
        { k: 'annual', l: 'Annual' }].
        map((o) => {
          const active = value === o.k;
          return (
            <button
              key={o.k}
              type="button"
              role="switch"
              aria-checked={active}
              onClick={() => onChange(o.k)}
              style={{
                appearance: 'none', border: 'none', cursor: 'pointer',
                padding: '8px 18px', borderRadius: 999,
                background: active ? 'var(--ink)' : 'transparent',
                color: active ? 'var(--canvas)' : 'var(--graphite)',
                fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
                transition: 'all 200ms var(--ease-standard)'
              }}>{o.l}</button>);

        })}
      </div>
      <span aria-live="polite" style={{
        opacity: isAnnual ? 1 : 0,
        transform: isAnnual ? 'translateX(0)' : 'translateX(-6px)',
        transition: 'opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard)',
        pointerEvents: isAnnual ? 'auto' : 'none'
      }}>
        <Tag variant="featured" style={{ fontSize: 14, padding: '7px 16px', letterSpacing: '0.1em' }}>Save 20%</Tag>
      </span>
    </div>);

}

/* ─────────────────── 2. Subscription tiers ─────────────────── */

const UNIFIED_FEATURES = [
'All resolutions (1K, 2K, 4K)',
'Full model and environment library',
'Digital twin model creation',
'Write your own brief',
'Bulk processing with batch discounts',
'SEO text generation',
'Image editing before download',
'Account support'];


const TIERS = [
{
  key: 'standard',
  name: 'Standard',
  monthly: 19.99, annual: 15.99,
  credits: 40, perCredit: '£0.50',
  bestFor: 'Boutiques, testing',
  features: UNIFIED_FEATURES,
  cta: { label: 'Start free trial', variant: 'secondary' }
},
{
  key: 'plus',
  name: 'Plus',
  monthly: 49.99, annual: 39.99,
  credits: 130, perCredit: '£0.38',
  bestFor: 'Independent online retailers, small brands',
  features: UNIFIED_FEATURES,
  cta: { label: 'Start free trial', variant: 'secondary' }
},
{
  key: 'premier',
  name: 'Premier',
  monthly: 129.99, annual: 103.99,
  credits: 380, perCredit: '£0.34',
  bestFor: 'High street brands, growing e-commerce',
  features: UNIFIED_FEATURES,
  cta: { label: 'Start free trial', variant: 'primaryInv' },
  featured: true
},
{
  key: 'elite',
  name: 'Elite',
  monthly: 299.99, annual: 239.99,
  credits: 1000, perCredit: '£0.30',
  bestFor: 'Value retailers, wholesalers',
  features: UNIFIED_FEATURES,
  cta: { label: 'Start free trial', variant: 'secondary' }
},
{
  key: 'bespoke',
  name: 'Bespoke',
  custom: true,
  customLabel: 'Custom', customCadence: '',
  creditLabel: 'Tailored to your business',
  bestFor: 'Enterprise / managed creative service',
  features: [
  'All features',
  'Custom credit allocation',
  'Full creative direction and prompt writing',
  'Batch processing handled by our team',
  'Quality control and approval workflow',
  'Dedicated account manager'],

  cta: { label: 'Talk to us', variant: 'bespokeOutline' }
}];


function SubscriptionTiers({ billing, isMobile, isTablet }) {
  /* New layout:
       Desktop  → left column holds the four self-serve cards + the "In every plan" features panel
                  + a shared "Start free trial" CTA. The Bespoke card lives in the right column and
                  spans the full height so it visually anchors a separate managed-service path.
       Tablet   → the self-serve cards become a 2×2 grid; Bespoke stacks below the features panel.
       Mobile   → everything stacks vertically (Premier first per the existing order). */
  const selfServe = TIERS.filter((t) => !t.custom);
  const bespoke = TIERS.find((t) => t.custom);
  const mobileOrder = [selfServe[2], selfServe[0], selfServe[1], selfServe[3]]; // Premier first
  const cards = isMobile ? mobileOrder : selfServe;
  const cardCols = isMobile ? '1fr' : 'repeat(4, 1fr)';

  return (
    <section style={{ background: 'var(--paper)', padding: `0 var(--pad-x) clamp(40px, 6vw, 64px)` }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 'clamp(12px, 1.2vw, 20px)' }}>
        {/* Desktop: 4-card row + features panel in the left column; Bespoke on the right.
                Tablet / mobile: stacked cards, features panel, Bespoke, CTA. */}
        {isMobile || isTablet ?
        <>
            <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: isMobile ? 16 : 'clamp(12px, 1.2vw, 20px)',
            alignItems: 'start'
          }}>
              {cards.map((t) => <TierCard key={t.key} t={t} billing={billing} compact />)}
            </div>
            <UnifiedFeaturesPanel isMobile={isMobile} isTablet={isTablet} />
            {bespoke && <TierCard t={bespoke} billing={billing} compact />}
          </> :

        <div style={{
          display: 'grid',
          gridTemplateColumns: '4fr 1fr',
          gap: 'clamp(12px, 1.2vw, 20px)',
          alignItems: 'stretch'
        }}>
            {/* Left: 4 self-serve cards in row 1, features panel filling row 2 */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(12px, 1.2vw, 20px)' }}>
              <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 'clamp(12px, 1.2vw, 20px)',
              alignItems: 'start'
            }}>
                {cards.map((t) => <TierCard key={t.key} t={t} billing={billing} compact />)}
              </div>
              <div style={{ flex: 1, display: 'flex' }}>
                <UnifiedFeaturesPanel isMobile={isMobile} isTablet={isTablet} fillHeight />
              </div>
            </div>
            {/* Right: Bespoke card spanning both rows */}
            {bespoke &&
          <div style={{ display: 'flex' }}>
                <div style={{ flex: 1, display: 'flex' }}>
                  <TierCard t={bespoke} billing={billing} compact fillHeight />
                </div>
              </div>
          }
          </div>
        }

        {/* Shared CTA + reassurance row, sits beneath both columns */}
        <div style={{
          marginTop: 8,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12
        }}>
          <Button
            variant="primary"
            size="large"
            arrow
            onClick={() => {window.location.href = 'https://app.vizostudio.ai';}}
            style={{ minWidth: isMobile ? '100%' : 320, justifyContent: 'center' }}>
            Start free trial</Button>
          <p style={{
            margin: 0, textAlign: 'center',
            fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--slate)',
            maxWidth: 56 * 8
          }}>
            All plans include a 14-day free trial with 20 credits. No card required to start.
          </p>
        </div>
      </div>
    </section>);

}

/* Compact features panel — used inside the self-serve column.
   Three columns × four items on desktop; two columns on tablet; one on mobile. */
const UNIFIED_FEATURE_COLUMNS = [
[
'All resolutions (1K, 2K, 4K)',
'Full model and environment library',
'Digital twin model creation',
'Write your own brief'],

[
'Bulk processing with batch discounts',
'SEO text generation',
'Image editing before download',
'Account support'],

[
'All aspect ratios (4:5, 1:1, 16:9, 9:16)',
'Video generation (720p, 1080p, 4K)',
'Optional AI watermarking',
'Multi-user team accounts']];



function UnifiedFeaturesPanel({ isMobile, isTablet, fillHeight }) {
  const allItems = UNIFIED_FEATURE_COLUMNS.flat();
  const cols = isMobile ?
  [allItems] :
  isTablet ?
  [allItems.slice(0, 6), allItems.slice(6, 12)] :
  UNIFIED_FEATURE_COLUMNS;

  return (
    <div style={{
      background: 'var(--canvas)',
      border: '1px solid var(--mist)',
      borderRadius: 12,
      padding: 'clamp(20px, 2.4vw, 32px)',
      width: fillHeight ? '100%' : 'auto',
      height: fillHeight ? '100%' : 'auto',
      display: 'flex', flexDirection: 'column'
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 12
      }}>
        <div>
          <Eyebrow color="var(--graphite)">In every plan</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.1, letterSpacing: '-0.02em',
            color: 'var(--ink)', margin: '12px 0 0', maxWidth: '24ch'
          }}>
            One feature set across every tier.
          </h2>
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
          color: 'var(--slate)', textTransform: 'uppercase'
        }}>12 features &nbsp;·&nbsp; 0 lock-outs</span>
      </div>

      <div style={{
        marginTop: 'clamp(18px, 2vw, 24px)',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1fr 1fr 1fr',
        columnGap: 'clamp(20px, 2.5vw, 32px)'
      }}>
        {cols.map((col, ci) =>
        <ul key={ci} style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {col.map((f, i) =>
          <li key={`${ci}-${i}`} style={{
            padding: '12px 0',
            borderTop: '1px solid var(--bone)',
            display: 'flex', gap: 10, alignItems: 'flex-start',
            fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.5,
            color: 'var(--graphite)'
          }}>
                <Icon.check width="15" height="15" style={{ color: 'var(--ink)', flexShrink: 0, marginTop: 3 }} />
                <span>{f}</span>
              </li>
          )}
          </ul>
        )}
      </div>
    </div>);

}

window.UnifiedFeaturesPanel = UnifiedFeaturesPanel;

/* ─────────────────────── 2c. Tier card ─────────────────────── */

function TierCard({ t, billing, fillHeight }) {
  const [hover, setHover] = React.useState(false);
  const featured = !!t.featured;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      tabIndex={0}
      style={{
        position: 'relative',
        background: featured ? 'var(--ink)' : 'var(--canvas)',
        color: featured ? 'var(--paper)' : 'var(--ink)',
        border: featured ? 'none' : '1px solid var(--mist)',
        borderRadius: 12,
        padding: 'clamp(18px, 1.4vw, 24px)',
        boxShadow: featured ?
        '0 12px 40px rgba(0,0,0,0.12)' :
        hover ? '0 4px 24px rgba(0,0,0,0.06)' : 'none',
        transform: featured ?
        'scale(1.02)' :
        hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'transform 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard)',
        display: 'flex', flexDirection: 'column',
        outline: 'none',
        minWidth: 0,
        height: fillHeight ? '100%' : 'auto',
        width: fillHeight ? '100%' : 'auto'
      }}>
      {featured &&
      <div style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)' }}>
          <Tag variant="featured">Most popular</Tag>
        </div>
      }

      {/* Plan name + (annual mode) crossed-out monthly price in the top right */}
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10
      }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 'clamp(18px, 1.5vw, 22px)',
          fontWeight: 600, letterSpacing: '-0.01em',
          color: featured ? 'var(--paper)' : 'var(--ink)'
        }}>{t.name}</div>
        {!t.custom && billing === 'annual' &&
        <s style={{
          fontFamily: 'var(--font-sans)', fontSize: 13,
          fontVariantNumeric: 'tabular-nums',
          color: featured ? 'var(--ash)' : 'var(--slate)',
          textDecorationThickness: '1.5px',
          whiteSpace: 'nowrap'
        }}>£{t.monthly.toFixed(2)}/mo</s>
        }
      </div>

      {/* Price block — cross-fades when billing changes */}
      <div style={{ marginTop: 14, minHeight: t.custom ? 90 : 0 }}>
        {t.custom ?
        <>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, whiteSpace: 'nowrap' }}>
              <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(28px, 3vw, 48px)', letterSpacing: '-0.02em',
              lineHeight: 1, color: 'var(--ink)'
            }}>Custom</span>
            </div>
            <div style={{ marginTop: 6, fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 400, color: 'var(--slate)' }}>Tailored to your business</div>
          </> :

        <PriceBlock t={t} billing={billing} featured={featured} />
        }
      </div>

      {/* Credits + per-credit */}
      <div style={{
        marginTop: 14,
        fontFamily: 'var(--font-sans)', fontSize: 'clamp(14px, 1.1vw, 16px)',
        fontWeight: 500, lineHeight: 1.4,
        color: featured ? 'var(--paper)' : 'var(--ink)'
      }}>
        {t.custom ? t.creditLabel : `${t.credits.toLocaleString()} credits per month`}
      </div>
      {!t.custom &&
      <div style={{
        marginTop: 4, fontFamily: 'var(--font-sans)', fontSize: 12.5,
        color: featured ? 'var(--ash)' : 'var(--slate)'
      }}>{t.perCredit} per credit</div>
      }

      {/* Features list — only the Bespoke card keeps its in-card list (it differs from the unified set).
              Self-serve tiers share the same 12 features and surface them in the panel below the cards row,
              so we keep these cards tight on name/price/credits/CTA. */}
      {t.custom &&
      <ul style={{
        listStyle: 'none', padding: 0, margin: '20px 0 0',
        display: 'flex', flexDirection: 'column'
      }}>
          {t.features.map((f, i) =>
        <li key={f} style={{
          padding: '10px 0',
          borderTop: '1px solid ' + (featured ? 'var(--ink-soft)' : 'var(--bone)'),
          fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.45,
          color: featured ? 'var(--paper)' : 'var(--graphite)',
          display: 'flex', gap: 8, alignItems: 'flex-start'
        }}>
              <Icon.check width="14" height="14" style={{
            color: featured ? 'var(--accent-amber)' : 'var(--ink)',
            flexShrink: 0, marginTop: 4
          }} />
              <span>{f}</span>
            </li>
        )}
        </ul>
      }

      {/* CTA — Bespoke keeps it inline. Self-serve cards omit it; one shared CTA below the features panel covers them all. */}
      {t.custom &&
      <div style={{ marginTop: 'auto', paddingTop: 20 }}>
          <TierCTA cta={t.cta} featured={featured} />
        </div>
      }
    </div>);

}

function PriceBlock({ t, billing, featured }) {
  const showAnnual = billing === 'annual';
  const price = showAnnual ? t.annual : t.monthly;
  return (
    <div style={{ position: 'relative' }}>
      <div key={billing} style={{
        display: 'flex', alignItems: 'baseline', gap: 6, whiteSpace: 'nowrap',
        animation: 'pf 220ms var(--ease-standard)'
      }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(26px, 2.6vw, 40px)', letterSpacing: '-0.02em',
          lineHeight: 1, fontVariantNumeric: 'tabular-nums',
          color: featured ? 'var(--paper)' : 'var(--ink)'
        }}>£{price.toFixed(2)}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: featured ? 'var(--ash)' : 'var(--slate)' }}>/mo</span>
      </div>
      <div style={{
        marginTop: 6, fontFamily: 'var(--font-sans)', fontSize: 13,
        color: featured ? 'var(--ash)' : 'var(--slate)',
        minHeight: 18
      }}>
        {showAnnual ?
        <span style={{ color: featured ? 'var(--accent-amber)' : 'var(--ink)', fontWeight: 600 }}>Save 20%</span> :
        <>£{t.annual.toFixed(2)}/mo billed annually</>}
      </div>
      <style>{`@keyframes pf { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>);

}

function TierCTA({ cta, featured }) {
  const isBespoke = cta.variant === 'bespokeOutline';
  if (isBespoke) {
    return (
      <button
        type="button"
        style={{
          width: '100%', height: 44, borderRadius: 4,
          background: 'transparent',
          color: 'var(--ink)',
          border: '1.5px solid var(--accent-amber)',
          fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
          letterSpacing: '0.01em', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          transition: 'all 200ms var(--ease-standard)'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--accent-amber-soft)';}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';}}>
        
        <span>{cta.label}</span>
        <span>→</span>
      </button>);

  }
  return (
    <Button
      variant={cta.variant}
      size="medium"
      arrow
      style={{ width: '100%', justifyContent: 'center' }}>
      {cta.label}</Button>);

}

/* ─────────────────── 3. Top-up credit packs ─────────────────── */

const TOP_UPS = [
{ name: 'Small', price: 14.99, credits: 25, perCredit: '£0.60' },
{ name: 'Medium', price: 39.99, credits: 80, perCredit: '£0.50' },
{ name: 'Large', price: 89.99, credits: 200, perCredit: '£0.45' },
{ name: 'Extra Large', price: 199.99, credits: 500, perCredit: '£0.40' },
{ name: 'Mega', price: 449.99, credits: 1250, perCredit: '£0.36' }];


function TopUpPacks({ isMobile, isTablet }) {
  const gridCols = isMobile ? '1fr' : isTablet ? 'repeat(3, 1fr)' : 'repeat(5, 1fr)';
  return (
    <section style={{ background: 'var(--canvas)', padding: `clamp(64px, 8vw, 96px) var(--pad-x)` }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 'clamp(28px, 4vw, 40px)' }}>
          <Eyebrow>Need more? Add top-up credits</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(28px, 4vw, 36px)', lineHeight: 1.1, letterSpacing: '-0.02em',
            color: 'var(--ink)', margin: '16px 0 0', maxWidth: '22ch'
          }}>
            Top up any plan when you need a boost.
          </h2>
          <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.65, color: 'var(--graphite)', maxWidth: 600 }}>
            Top-up credits never expire and work alongside your monthly allocation. We use your subscription credits first — top-ups kick in only when you need them.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: gridCols,
          gap: isMobile ? 12 : 16
        }}>
          {TOP_UPS.map((p) => <TopUpCard key={p.name} pack={p} />)}
        </div>
      </div>
    </section>);

}

function TopUpCard({ pack }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--paper)', border: '1px solid var(--bone)',
        borderColor: hover ? 'var(--ink)' : 'var(--bone)',
        borderRadius: 8, padding: 24,
        display: 'flex', flexDirection: 'column',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 4px 24px rgba(0,0,0,0.06)' : 'none',
        transition: 'all 250ms var(--ease-standard)'
      }}>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--ink)' }}>{pack.name}</div>
      <div style={{
        marginTop: 12,
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.02em', lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
        color: 'var(--ink)'
      }}>£{pack.price.toFixed(2)}</div>
      <div style={{ marginTop: 8, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--slate)' }}>
        {pack.credits.toLocaleString()} credits
      </div>
      <a href="/pricing" onClick={(e) => e.preventDefault()} style={{
        marginTop: 'auto', paddingTop: 20,
        fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
        color: 'var(--ink)', textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        borderBottom: '1px solid transparent', alignSelf: 'flex-start'
      }}
      onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = 'var(--ink)'}
      onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>
        Buy now <span>→</span></a>
    </div>);

}

/* ─────────────────────── 4. FAQ ─────────────────────── */

const FAQS = [
{ q: 'How do rollover credits work?', a: 'Unused subscription credits roll over to the next month, up to a maximum of 2× your monthly allocation. Top-up credits never expire.' },
{ q: 'Do top-up credits expire?', a: 'No. Top-up credits stay in your account indefinitely while your subscription is active, and remain usable for 12 months if you cancel.' },
{ q: 'Which credits get used first?', a: 'We always use your monthly subscription credits first. Top-up credits only kick in when your subscription allocation is exhausted.' },
{ q: "What's included in the Bespoke plan?", a: 'Full managed creative service: prompt writing, model and environment direction, batch processing, quality control, and a dedicated account manager. Pricing is tailored to your volume and creative needs.' },
{ q: 'Can I change plans at any time?', a: 'Yes. Upgrade instantly with credits added immediately. Downgrades take effect at your next billing cycle.' },
{ q: 'How does bulk processing save credits?', a: 'Bulk processing applies a 50% credit discount on batches of 50+ SKUs processed within a single job. Available on Premier and above.' },
{ q: 'Are my generations commercially usable?', a: 'Yes. Standard includes single-brand commercial rights. Plus and above include full commercial rights including paid advertising and wholesale catalogues.' },
{ q: 'Do you offer refunds?', a: 'Unused credits within the first 14 days are fully refundable. Annual plans can be refunded on a pro-rata basis within the first 30 days.' }];


function PricingFAQ({ isMobile }) {
  const [openI, setOpenI] = React.useState(0);
  return (
    <section style={{ background: 'var(--paper)', padding: `clamp(64px, 8vw, 96px) var(--pad-x) clamp(40px, 6vw, 64px)` }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.7fr 1fr', gap: 'clamp(28px, 5vw, 72px)' }}>
        <div>
          <Eyebrow>Questions</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(28px, 4vw, 36px)', lineHeight: 1.1, letterSpacing: '-0.02em',
            color: 'var(--ink)', margin: '16px 0 0', maxWidth: '18ch'
          }}>
            Common questions about credits and billing.
          </h2>
          <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.6, color: 'var(--graphite)', maxWidth: '36ch' }}>
            Eight short answers. Need more detail?{' '}
            <Link to="/contact" style={{ color: 'var(--ink)' }}>Drop us a line</Link>.
          </p>
        </div>
        <div style={{ borderTop: '1px solid var(--mist)' }}>
          {FAQS.map((qi, i) => {
            const open = openI === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--mist)' }}>
                <button
                  type="button"
                  onClick={() => setOpenI(open ? -1 : i)}
                  aria-expanded={open}
                  style={{
                    width: '100%', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
                    padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16
                  }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.005em' }}>{qi.q}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 999, border: '1px solid var(--mist)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    transform: open ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 200ms var(--ease-standard)'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                  </span>
                </button>
                <div style={{
                  overflow: 'hidden',
                  maxHeight: open ? 240 : 0,
                  opacity: open ? 1 : 0,
                  transition: 'max-height 300ms var(--ease-standard), opacity 200ms var(--ease-standard)'
                }}>
                  <div style={{ paddingBottom: 20, paddingRight: 44, fontSize: 15, lineHeight: 1.65, color: 'var(--graphite)' }}>{qi.a}</div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ─────────────────── 5. Closing CTA band ─────────────────── */

function PricingClosingCTA() {
  const { isMobile } = useBreakpoint();
  return (
    <section style={{
      background: 'var(--ink)', color: 'var(--paper)',
      minHeight: '60vh',
      padding: 'clamp(64px, 10vw, 128px) var(--pad-x)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center'
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <Eyebrow color="var(--ash)">Start today</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(36px, 6vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.03em',
          color: 'var(--paper)', margin: '20px 0 0'
        }}>
          Your next photoshoot <em style={{ fontStyle: 'italic' }}>starts here.</em>
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, color: 'var(--mist)', maxWidth: '52ch', margin: '20px auto 0' }}>14-day free trial. 20 credits. No card required.

        </p>
        <div style={{
          marginTop: 36,
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          gap: 12, justifyContent: 'center', alignItems: isMobile ? 'stretch' : 'center'
        }}>
          <Button variant="primaryInv" size="xl" arrow>Start free trial</Button>
          <Button variant="secondaryInv" size="xl">Talk to our team</Button>
        </div>
      </div>
    </section>);

}

Object.assign(window, { PricingHeader, BillingToggle, SubscriptionTiers, TierCard, TopUpPacks, TopUpCard, PricingFAQ, PricingClosingCTA });