/* ============================================================
   PACKAGES — fixed-price service offerings
   Each package maps to the same intake + booking workflow.
   Exports: PackagesPage
   ============================================================ */

const PKG_DATA = [
  {
    id: 'boutique', name: 'Boutique', price: 85000, deposit: 42500,
    tagline: 'Single bouquet + accessories · Intimate events',
    turnaround: '3–5 days', color: 'var(--sage-soft)', accent: 'var(--sage-deep)', iconBg: 'var(--sage-soft)',
    icon: 'shield',
    deliverables: [
      { yes: true,  text: 'Round bridal bouquet (×1)' },
      { yes: true,  text: 'Classic boutonnière (×1)' },
      { yes: true,  text: 'Bridesmaid bouquet (×1)' },
      { yes: false, text: 'Wedding centrepieces' },
      { yes: false, text: 'Aisle arch installation' },
      { yes: false, text: 'Full venue florals' },
    ],
  },
  {
    id: 'bridal', name: 'Bridal Suite', price: 250000, deposit: 125000,
    tagline: 'Complete bridal florals · Up to 4 bridesmaids',
    turnaround: '7–14 days', color: 'var(--gold-soft)', accent: 'var(--gold-deep)', iconBg: 'var(--gold-soft)',
    icon: 'star', featured: true,
    deliverables: [
      { yes: true,  text: 'Cascading bridal bouquet' },
      { yes: true,  text: 'Bridesmaid bouquets (×4)' },
      { yes: true,  text: 'Boutonnières (×4)' },
      { yes: true,  text: 'Wedding centrepieces (×4)' },
      { yes: true,  text: 'Wrist corsages (×2)' },
      { yes: false, text: 'Arch & venue installation' },
    ],
  },
  {
    id: 'grand', name: 'Grand Wedding', price: 500000, deposit: 250000,
    tagline: 'Full venue florals · The complete experience',
    turnaround: '14–21 days', color: 'var(--blush-soft)', accent: 'var(--blush-deep)', iconBg: 'var(--blush-soft)',
    icon: 'gift',
    deliverables: [
      { yes: true, text: 'Everything in Bridal Suite' },
      { yes: true, text: 'Wedding arch installation' },
      { yes: true, text: 'Aisle pew & chair florals' },
      { yes: true, text: 'Full venue centrepieces' },
      { yes: true, text: 'Flower crown / halo' },
      { yes: true, text: 'Dedicated floral stylist' },
    ],
  },
  {
    id: 'bespoke', name: 'Bespoke', price: null, deposit: null,
    tagline: 'Fully custom · Weddings, funerals, events',
    turnaround: 'Quoted per project', color: 'var(--cream-deep)', accent: 'var(--ink)', iconBg: 'var(--cream-deep)',
    icon: 'sparkle',
    deliverables: [
      { yes: true, text: 'Fully custom arrangements' },
      { yes: true, text: 'Any occasion, any scale' },
      { yes: true, text: 'Funeral tributes available' },
      { yes: true, text: 'Custom pricing proposal' },
    ],
  },
];

const PKG_ICONS = {
  shield: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z" strokeLinejoin="round"/></svg>,
  star:   <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="m12 3 2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.9 6.6 19.5l1.2-6L3.3 9.3l6.1-.7L12 3Z"/></svg>,
  gift:   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 11h16v9H4zM4 8h16v3H4zM12 8v12M12 8c-1-3-5-3-5-1s4 1 5 1Zm0 0c1-3 5-3 5-1s-4 1-5 1Z" strokeLinejoin="round"/></svg>,
  sparkle:<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l1.5 6.5L20 11l-6.5 1.5L12 19l-1.5-6.5L4 11l6.5-1.5L12 3Z"/></svg>,
};

/* ── PackagesPage ─────────────────────────────────────────── */
function PackagesPage() {
  const [selected, setSelected] = useState(null); // pkg id
  if (selected) {
    const pkg = PKG_DATA.find(p => p.id === selected);
    return <PackageDetail pkg={pkg} onBack={() => setSelected(null)} />;
  }
  return <PackageGrid onSelect={setSelected} />;
}

/* ── Package grid ─────────────────────────────────────────── */
function PackageGrid({ onSelect }) {
  const { money } = useStore();
  return (
    <div>
      {/* Hero */}
      <div style={{ background: 'linear-gradient(160deg, var(--cream-deep) 0%, var(--cream) 100%)', borderBottom: '1px solid var(--line)', padding: 'clamp(56px,8vw,96px) var(--gutter)', textAlign: 'center' }}>
        <p className="eyebrow">Fixed-price packages</p>
        <h1 style={{ fontSize: 'clamp(40px,6vw,74px)', margin: '12px 0 16px', lineHeight: .96 }}>Floral packages,<br/><em style={{ fontStyle: 'italic' }}>priced clearly.</em></h1>
        <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: 520, margin: '0 auto', lineHeight: 1.75 }}>
          Choose the package that fits your occasion. All packages are fully customised to your vision, colour palette and bloom preferences.
        </p>
      </div>

      {/* Grid */}
      <div className="container wide" style={{ padding: 'clamp(48px,7vw,88px) var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px,1fr))', gap: 20, alignItems: 'start' }}>
          {PKG_DATA.map(pkg => (
            <PkgCard key={pkg.id} pkg={pkg} money={money} onSelect={() => onSelect(pkg.id)} />
          ))}
        </div>
        <div style={{ marginTop: 48, background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: '28px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div>
            <p className="eyebrow">Not sure which fits?</p>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 6 }}>Compare packages or submit a bespoke brief and let us recommend the perfect arrangement.</p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
            <button className="btn btn-primary" onClick={() => onSelect('bespoke')}>Submit a brief</button>
          </div>
        </div>
      </div>

      {/* How packages work */}
      <div style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--line)', padding: 'clamp(48px,7vw,80px) var(--gutter)' }}>
        <div className="container wide">
          <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', textAlign: 'center', marginBottom: 40 }}>How floral packages <em style={{ fontStyle: 'italic' }}>work</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28 }}>
            {[
              ['Select a package','Pick the tier that best matches your occasion and budget.'],
              ['Share your vision','Tell us your colour palette, bloom preferences and any specific details.'],
              ['Pay the deposit & we create','50% locks your slot. We craft your florals and deliver to your door.'],
            ].map(([t, d], i) => (
              <div key={t} style={{ textAlign: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--serif)', fontSize: 22, margin: '0 auto 16px', boxShadow: '0 4px 16px rgba(44,85,48,.25)' }}>{i + 1}</div>
                <h3 style={{ fontSize: 20, marginBottom: 8 }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.65 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function PkgCard({ pkg, money, onSelect }) {
  const [hover, setHover] = useState(false);
  return (
    <Reveal>
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ background: 'var(--ivory)', border: `1.5px solid ${pkg.featured ? 'var(--gold)' : 'var(--line)'}`, borderRadius: 'var(--r-xl)', padding: '28px 24px', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
          transition: 'transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s', transform: hover ? 'translateY(-5px)' : 'none', boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
          ...(pkg.featured ? { background: `linear-gradient(160deg, ${pkg.color} 0%, var(--ivory) 100%)` } : {}) }}>
        {pkg.featured && <div style={{ position: 'absolute', top: 16, right: 16, background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', color: '#fff', borderRadius: 100, padding: '4px 12px', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 500 }}>Most popular</div>}

        <div style={{ width: 46, height: 46, borderRadius: 'var(--r-md)', background: pkg.color, display: 'grid', placeItems: 'center', color: pkg.accent, marginBottom: 16 }}>
          {PKG_ICONS[pkg.icon]}
        </div>

        <h3 style={{ fontSize: 26, marginBottom: 5 }}>{pkg.name}</h3>
        <p style={{ fontSize: 13, color: 'var(--ink-soft)', marginBottom: 16, lineHeight: 1.5 }}>{pkg.tagline}</p>

        <div style={{ marginBottom: 20 }}>
          {pkg.price
            ? <><span style={{ fontFamily: 'var(--serif)', fontSize: 42, lineHeight: 1, color: 'var(--ink)' }}>{money(pkg.price)}</span><span style={{ fontSize: 13, color: 'var(--ink-faint)', marginLeft: 6 }}>all-in</span></>
            : <span style={{ fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--ink)', fontStyle: 'italic' }}>Custom quote</span>}
          {pkg.deposit && <div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 3 }}>50% deposit: {money(pkg.deposit)}</div>}
        </div>

        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8, flex: 1, marginBottom: 24 }}>
          {pkg.deliverables.map(({ yes, text }) => (
            <li key={text} style={{ display: 'flex', gap: 9, fontSize: 13.5, color: yes ? 'var(--ink)' : 'var(--ink-faint)', alignItems: 'flex-start' }}>
              <span style={{ flexShrink: 0, marginTop: 2, color: yes ? 'var(--gold-deep)' : 'var(--line)' }}>
                {yes
                  ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 13 4 4 10-11" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6 6 18M6 6l12 12"/></svg>}
              </span>
              <span style={{ textDecoration: yes ? 'none' : 'line-through', opacity: yes ? 1 : .55 }}>{text}</span>
            </li>
          ))}
        </ul>

        <div style={{ fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-faint)', marginBottom: 14 }}>⏱ {pkg.turnaround}</div>

        <button className={pkg.featured ? 'btn btn-primary' : 'btn btn-secondary'} onClick={onSelect} style={{ width: '100%', justifyContent: 'center' }}>
          {pkg.id === 'bespoke' ? 'Start a brief' : `Select ${pkg.name}`}
        </button>
      </div>
    </Reveal>
  );
}

/* ── Package detail + intake ──────────────────────────────── */
function PackageDetail({ pkg, onBack }) {
  const { money, nav, toast } = useStore();
  const [step, setStep]       = useState(0); // 0=customise 1=schedule 2=done
  const [theme, setTheme]     = useState('');
  const [notes, setNotes]     = useState('');
  const [date, setDate]       = useState('');
  const [schedMode, setSchedMode] = useState(null);
  const [bookingDone, setBookingDone] = useState(false);
  const ref = React.useMemo(() => 'PKG-' + Math.floor(100000 + Math.random() * 900000), []);

  if (step === 2) return (
    <div style={{ background: 'var(--cream)', minHeight: '80vh' }}>
      <div className="container" style={{ maxWidth: 680, padding: 'clamp(48px,7vw,84px) var(--gutter)', textAlign: 'center' }}>
        <div style={{ width: 76, height: 76, borderRadius: '50%', background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', display: 'grid', placeItems: 'center', color: '#fff', margin: '0 auto 24px', boxShadow: '0 10px 32px rgba(44,85,48,.3)' }}>
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 13 4 4 10-11" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <p className="eyebrow" style={{ color: 'var(--gold-deep)' }}>Package confirmed</p>
        <h2 style={{ fontSize: 'clamp(36px,5vw,56px)', margin: '10px 0 14px' }}>{pkg.name} — <em style={{ fontStyle: 'italic' }}>submitted!</em></h2>
        <p style={{ fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.75, maxWidth: 460, margin: '0 auto 24px' }}>
          {schedMode === 'call'
            ? `Your ${pkg.name} package brief and consultation slot are both confirmed. We'll send a personalised invoice within 48 hours of the call.`
            : `Your ${pkg.name} package brief has been received. We'll send a personalised invoice within 48 hours.`}
        </p>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 100, padding: '10px 22px', marginBottom: 32 }}>
          <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Reference</span>
          <strong style={{ color: 'var(--gold-deep)' }}>{ref}</strong>
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => nav('home')}><span>Back to store</span></button>
          <button className="btn btn-secondary" onClick={onBack}>View all packages</button>
        </div>
      </div>
    </div>
  );

  return (
    <div style={{ background: 'var(--cream)', minHeight: '80vh' }}>
      {/* Back nav */}
      <div style={{ background: 'var(--cream-deep)', borderBottom: '1px solid var(--line)', padding: '14px var(--gutter)' }}>
        <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', background: 'none', border: 'none', cursor: 'pointer' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M12 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
          All packages
        </button>
      </div>

      <div className="container wide" style={{ padding: 'clamp(36px,5vw,60px) var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 32, alignItems: 'start' }}>

          {/* Package summary (sticky) */}
          <div style={{ position: 'sticky', top: 100, background: 'var(--ivory)', border: `1.5px solid ${pkg.featured ? 'var(--gold)' : 'var(--line)'}`, borderRadius: 'var(--r-xl)', padding: '26px 22px', ...(pkg.featured ? { background: `linear-gradient(160deg,${pkg.color} 0%,var(--ivory) 100%)` } : {}) }}>
            <div style={{ width: 42, height: 42, borderRadius: 'var(--r-sm)', background: pkg.color, display: 'grid', placeItems: 'center', color: pkg.accent, marginBottom: 14 }}>{PKG_ICONS[pkg.icon]}</div>
            <h3 style={{ fontSize: 26, marginBottom: 4 }}>{pkg.name}</h3>
            <p style={{ fontSize: 13, color: 'var(--ink-soft)', marginBottom: 14 }}>{pkg.tagline}</p>
            {pkg.price
              ? <><div style={{ fontFamily: 'var(--serif)', fontSize: 38, lineHeight: 1 }}>{money(pkg.price)}</div><div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 3 }}>Deposit: {money(pkg.deposit)}</div></>
              : <div style={{ fontFamily: 'var(--serif)', fontSize: 26, fontStyle: 'italic' }}>Custom quote</div>}
            <div style={{ height: 1, background: 'var(--line)', margin: '18px 0' }} />
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
              {pkg.deliverables.map(({ yes, text }) => (
                <li key={text} style={{ display: 'flex', gap: 8, fontSize: 13, color: yes ? 'var(--ink)' : 'var(--ink-faint)', alignItems: 'flex-start' }}>
                  <span style={{ color: yes ? 'var(--gold-deep)' : 'var(--line)', flexShrink: 0, marginTop: 2 }}>
                    {yes
                      ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 13 4 4 10-11" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      : <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6 6 18M6 6l12 12"/></svg>}
                  </span>
                  <span style={{ opacity: yes ? 1 : .5, textDecoration: yes ? 'none' : 'line-through' }}>{text}</span>
                </li>
              ))}
            </ul>
            <div style={{ fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-faint)', marginTop: 14 }}>⏱ {pkg.turnaround}</div>
          </div>

          {/* Right: form */}
          <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(24px,3.5vw,42px)' }}>
            {step === 0 && (
              <>
                <p className="eyebrow">Customise your package</p>
                <h2 style={{ fontSize: 'clamp(26px,3.5vw,38px)', margin: '10px 0 18px' }}>Tell us your <em style={{ fontStyle: 'italic' }}>theme</em></h2>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                    <label style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', fontWeight: 500 }}>Theme & colours <span style={{ color: 'var(--blush)' }}>*</span></label>
                    <textarea className="input" rows="3" value={theme} onChange={e => setTheme(e.target.value)} placeholder="e.g. Bluey, soft pastel pinks and blues. I love the balloon episode aesthetic…" />
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                    <label style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', fontWeight: 500 }}>Event date</label>
                    <input type="date" className="input" value={date} onChange={e => setDate(e.target.value)} min={new Date().toISOString().split('T')[0]} />
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                    <label style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', fontWeight: 500 }}>Additional notes</label>
                    <textarea className="input" rows="3" value={notes} onChange={e => setNotes(e.target.value)} placeholder="Any extras, special requests, or quantities different from the package defaults…" />
                  </div>
                </div>
                <div style={{ paddingTop: 24, marginTop: 24, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'flex-end' }}>
                  <button className="btn btn-primary" onClick={() => { if (!theme.trim()) { alert('Please add your theme details.'); return; } setStep(1); }}>
                    <span>Continue</span>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                </div>
              </>
            )}

            {step === 1 && (
              <>
                <p className="eyebrow">Next steps</p>
                <h2 style={{ fontSize: 'clamp(26px,3.5vw,38px)', margin: '10px 0 18px' }}>How shall we <em style={{ fontStyle: 'italic' }}>proceed?</em></h2>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 24 }}>
                  {[['async','Async review','We\'ll review and send a personalised invoice within 48 hours.','mail'],
                    ['call','Book a call','Prefer to speak first? Pick a slot.','calendar']].map(([m, t, d, icon]) => (
                    <button key={m} onClick={() => { setSchedMode(m); if (m === 'async') { setBookingDone(false); } }}
                      style={{ textAlign: 'left', padding: '18px 20px', borderRadius: 'var(--r-lg)', border: '1.5px solid', cursor: 'pointer', transition: 'all .25s',
                        borderColor: schedMode === m ? 'var(--gold)' : 'var(--line)',
                        background: schedMode === m ? 'var(--gold-soft)' : 'var(--cream)' }}>
                      <div style={{ width: 34, height: 34, borderRadius: 'var(--r-sm)', background: schedMode === m ? 'var(--gold)' : 'var(--cream-deep)', display: 'grid', placeItems: 'center', color: schedMode === m ? '#fff' : 'var(--ink-soft)', marginBottom: 10, transition: 'all .25s' }}>
                        {icon === 'mail' && <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>}
                        {icon === 'calendar' && <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>}
                      </div>
                      <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 4 }}>{t}</div>
                      <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{d}</div>
                    </button>
                  ))}
                </div>

                {schedMode === 'async' && (
                  <div style={{ background: 'var(--sage-soft)', borderLeft: '3px solid var(--sage)', borderRadius: 'var(--r-md)', padding: '16px 20px', marginBottom: 20 }}>
                    <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.65 }}>We'll send your personalised invoice within <strong>48 hours</strong>. A secure payment link will be included.</p>
                  </div>
                )}

                {schedMode === 'call' && (
                  <div style={{ background: 'var(--cream-deep)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', marginBottom: 20, overflow: 'hidden' }}>
                    <BookingWidget onConfirm={() => setBookingDone(true)} compact={true} />
                  </div>
                )}

                <div style={{ display: 'flex', gap: 10, justifyContent: 'space-between', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <button className="btn btn-secondary" onClick={() => setStep(0)} style={{ padding: '15px 22px', fontSize: 12 }}>← Back</button>
                  <button className="btn btn-primary"
                    disabled={!schedMode || (schedMode === 'call' && !bookingDone)}
                    style={{ opacity: (!schedMode || (schedMode === 'call' && !bookingDone)) ? .45 : 1 }}
                    onClick={() => setStep(2)}>
                    <span>Confirm {pkg.name}</span>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 13 4 4 10-11" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PackagesPage });