// ========== GIFT CARDS ==========
const GiftCardsPage = ({ nav, toast, fireConfetti }) => {
  const [step, setStep] = React.useState(0);
  const [amount, setAmount] = React.useState(100);
  const [design, setDesign] = React.useState('hibiscus');
  const [form, setForm] = React.useState({
    to: 'Keisha Adams', toEmail: 'keisha@gmail.com',
    from: 'Chloé', message: "Happy birthday! Treat yourself. You deserve it. ✦",
    sendDate: 'today'
  });

  const designs = {
    hibiscus: { bg: 'linear-gradient(135deg, #ff6b8a 0%, #c25bd6 60%, #8b5cf6 100%)', emoji: '✦' },
    ocean: { bg: 'linear-gradient(135deg, #14B8A6 0%, #3b82f6 60%, #8b5cf6 100%)', emoji: '◉' },
    sunset: { bg: 'linear-gradient(135deg, #F5B800 0%, #ff9a6b 50%, #ff6b8a 100%)', emoji: '❋' },
    ink: { bg: 'linear-gradient(135deg, #151225 0%, #3a3450 100%)', emoji: '✦' },
  };

  const Card = ({ d = design, a = amount, f = form, big }) => (
    <div style={{
      background: designs[d].bg,
      borderRadius: big ? 22 : 16,
      color:'#fff', padding: big ? 28 : 18,
      aspectRatio: '1.6 / 1',
      position:'relative', overflow:'hidden',
      boxShadow: big ? 'var(--shadow-xl)' : 'var(--shadow-md)',
    }}>
      <div style={{position:'absolute', inset:-20, background:'radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3), transparent 50%)'}}/>
      <div style={{position:'relative', height:'100%', display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
          <div>
            <div style={{fontSize: big ? 10.5 : 9, fontWeight: 700, letterSpacing:'0.2em', opacity: 0.85}}>CARIBGLOW GIFT</div>
            <div style={{fontFamily:'Fraunces, serif', fontSize: big ? 30 : 20, fontWeight: 500, letterSpacing:'-0.02em', marginTop: 4}}>
              For <em>{f.to.split(' ')[0] || 'you'}</em>
            </div>
          </div>
          <div style={{fontSize: big ? 42 : 28, opacity: 0.95}}>{designs[d].emoji}</div>
        </div>
        <div>
          <div style={{fontFamily:'Fraunces, serif', fontSize: big ? 56 : 38, fontWeight: 500, letterSpacing:'-0.02em', lineHeight: 1}}>${a}</div>
          <div style={{fontSize: big ? 11 : 9.5, opacity: 0.7, marginTop: 6, fontFamily:'JetBrains Mono, monospace'}}>
            CODE · GIFT-{amount}-{Math.floor(Math.random()*9000+1000)}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="fade-in">
      <div className="container-narrow">
        <div className="page-head">
          <div>
            <div className="eyebrow">The perfect gift</div>
            <h1>Send a <span className="i">glow up</span>.</h1>
            <p style={{color:'var(--ink-2)', fontSize: 15, marginTop: 8, maxWidth: 520}}>
              Works for any service or marketplace product. Delivered by email. Never expires.
            </p>
          </div>
          <div className="checkout-steps" style={{maxWidth: 380, margin: 0}}>
            {['Design','Amount','Message','Pay'].map((s, i) => (
              <div key={s} className={`checkout-step ${i === step ? 'active' : i < step ? 'done' : ''}`}>
                <div className="n">{i < step ? '✓' : i + 1}</div>{s}
              </div>
            ))}
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 32, paddingBottom: 60}}>
          <div className="checkout-card">
            {step === 0 && <>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, margin:'0 0 8px'}}>Pick a design</h2>
              <p style={{color:'var(--muted)', marginBottom: 18}}>Four card styles. More coming soon.</p>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
                {Object.keys(designs).map(d => (
                  <div key={d} onClick={() => setDesign(d)}
                    style={{borderRadius: 18, padding: 3, border: `3px solid ${design === d ? 'var(--ink)' : 'transparent'}`, cursor:'pointer'}}>
                    <Card d={d}/>
                    <div style={{textAlign:'center', fontSize: 12, fontWeight: 500, padding: 6, textTransform:'capitalize'}}>{d}</div>
                  </div>
                ))}
              </div>
              <button className="btn btn-brand btn-lg" style={{width:'100%', marginTop: 20}} onClick={() => setStep(1)}>Next: amount</button>
            </>}

            {step === 1 && <>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, margin:'0 0 8px'}}>How much?</h2>
              <p style={{color:'var(--muted)', marginBottom: 18}}>Pick a preset or enter a custom amount.</p>
              <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 8, marginBottom: 14}}>
                {[50, 100, 150, 250].map(v => (
                  <button key={v} onClick={() => setAmount(v)}
                    className={amount === v ? 'btn btn-primary' : 'btn btn-outline'}
                    style={{padding:'14px 0', fontFamily:'Fraunces, serif', fontSize: 18, fontWeight: 500}}>${v}</button>
                ))}
              </div>
              <div className="field"><label>Custom amount</label>
                <input type="number" value={amount} onChange={e => setAmount(+e.target.value)} min={25} max={1000}/>
              </div>
              <div style={{fontSize: 12, color:'var(--muted)'}}>$25 minimum · $1,000 maximum</div>
              <div style={{display:'flex', gap: 8, marginTop: 20}}>
                <button className="btn btn-outline" onClick={() => setStep(0)}>Back</button>
                <button className="btn btn-brand" style={{flex: 1}} onClick={() => setStep(2)}>Next: message</button>
              </div>
            </>}

            {step === 2 && <>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, margin:'0 0 8px'}}>Add a personal note</h2>
              <p style={{color:'var(--muted)', marginBottom: 18}}>Shows up on the card and in the email.</p>
              <div className="editor-row-2">
                <div className="field"><label>Recipient name</label><input value={form.to} onChange={e => setForm({...form, to: e.target.value})}/></div>
                <div className="field"><label>Recipient email</label><input value={form.toEmail} onChange={e => setForm({...form, toEmail: e.target.value})} type="email"/></div>
              </div>
              <div className="field"><label>From</label><input value={form.from} onChange={e => setForm({...form, from: e.target.value})}/></div>
              <div className="field"><label>Message (optional)</label>
                <textarea rows={4} value={form.message} onChange={e => setForm({...form, message: e.target.value})}
                  style={{width:'100%', padding:'10px 12px', borderRadius: 10, border:'1px solid var(--line)', background:'#fff', resize:'vertical', fontFamily:'inherit'}}/>
              </div>
              <div className="eyebrow" style={{marginBottom: 10}}>When should we send it?</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8}}>
                {[{k:'today', l:'Right now'},{k:'schedule', l:'Schedule for later'}].map(o => (
                  <div key={o.k} onClick={() => setForm({...form, sendDate: o.k})}
                    className={`address-option ${form.sendDate === o.k ? 'active' : ''}`}>
                    <div className="radio"/>
                    <div style={{fontSize: 13.5, fontWeight: 500}}>{o.l}</div>
                  </div>
                ))}
              </div>
              <div style={{display:'flex', gap: 8, marginTop: 20}}>
                <button className="btn btn-outline" onClick={() => setStep(1)}>Back</button>
                <button className="btn btn-brand" style={{flex: 1}} onClick={() => setStep(3)}>Next: checkout</button>
              </div>
            </>}

            {step === 3 && <>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, margin:'0 0 8px'}}>Review & pay</h2>
              <p style={{color:'var(--muted)', marginBottom: 18}}>One-time charge. {form.to.split(' ')[0]} gets the code instantly.</p>

              <div style={{background:'var(--sand)', padding: 16, borderRadius: 12, marginBottom: 14, fontSize: 13}}>
                <div style={{display:'flex', justifyContent:'space-between', padding:'3px 0'}}>
                  <span style={{color:'var(--muted)'}}>To</span><span>{form.to} ({form.toEmail})</span>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', padding:'3px 0'}}>
                  <span style={{color:'var(--muted)'}}>From</span><span>{form.from}</span>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', padding:'3px 0'}}>
                  <span style={{color:'var(--muted)'}}>Design</span><span style={{textTransform:'capitalize'}}>{design}</span>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', padding:'3px 0'}}>
                  <span style={{color:'var(--muted)'}}>Delivery</span><span>{form.sendDate === 'today' ? 'Instant' : 'Scheduled'}</span>
                </div>
              </div>
              <div className="field"><label>Card number</label><input defaultValue="4242 4242 4242 4242"/></div>
              <div className="editor-row-2">
                <div className="field"><label>Expiry</label><input defaultValue="04/29"/></div>
                <div className="field"><label>CVC</label><input defaultValue="123"/></div>
              </div>

              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 0', borderTop:'1px solid var(--line)', marginTop: 10}}>
                <span style={{fontWeight: 600}}>Total</span>
                <span style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500}}>${amount}.00</span>
              </div>
              <div style={{display:'flex', gap: 8}}>
                <button className="btn btn-outline" onClick={() => setStep(2)}>Back</button>
                <button className="btn btn-brand" style={{flex: 1}} onClick={() => { fireConfetti(); toast(`Gift sent to ${form.to.split(' ')[0]}!`); setTimeout(() => nav('landing'), 1200); }}>
                  Send gift · ${amount}
                </button>
              </div>
            </>}
          </div>

          <div style={{position:'sticky', top: 100, alignSelf:'start'}}>
            <div className="preview-frame">
              <div className="lab">Preview</div>
              <Card big/>
              <div style={{marginTop: 16, background:'var(--sand)', padding: 14, borderRadius: 12, border:'1px solid var(--line)'}}>
                <div style={{fontSize: 11, color:'var(--muted)', fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 6}}>Message</div>
                <div style={{fontSize: 13.5, fontStyle:'italic', color:'var(--ink-2)', lineHeight: 1.5}}>
                  "{form.message}"
                </div>
                <div style={{fontSize: 12.5, color:'var(--muted)', marginTop: 8}}>— {form.from}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== CITY SEO LANDING ==========
const CityLandingPage = ({ nav, openProvider }) => {
  const city = 'Kingston';
  const service = 'Hair Stylists';
  const pros = PROVIDERS.filter(p => p.category === 'hair' || p.category === 'braids' || p.category === 'barbering').slice(0, 6);

  return (
    <div className="fade-in">
      <div style={{background:'var(--sand)', padding:'28px 0 60px'}}>
        <div className="container-narrow">
          <div style={{fontSize: 12, color:'var(--muted)', marginBottom: 10}}>
            <span onClick={() => nav('landing')} style={{cursor:'pointer'}}>CaribGlow</span> › <span>Jamaica</span> › <span>Kingston</span> › <strong style={{color:'var(--ink)'}}>Hair Stylists</strong>
          </div>
          <h1 style={{fontFamily:'Fraunces, serif', fontSize: 56, fontWeight: 500, letterSpacing:'-0.03em', lineHeight: 1, margin: 0}}>
            The 12 best <em style={{fontStyle:'italic', color:'var(--primary-deep)'}}>hair stylists</em><br/>in Kingston, Jamaica. 2026 edition.
          </h1>
          <p style={{fontSize: 17, color:'var(--ink-2)', marginTop: 14, maxWidth: 620, lineHeight: 1.5}}>
            Verified pros specializing in silk press, braids, locs, and natural hair. Average rating 4.8★ · Book in under 2 minutes.
          </p>
          <div style={{display:'flex', gap: 10, marginTop: 22}}>
            <button className="btn btn-brand btn-lg" onClick={() => nav('explore')}>Browse all 42 stylists</button>
            <button className="btn btn-outline btn-lg">Filter by service →</button>
          </div>

          <div style={{display:'flex', gap: 24, marginTop: 26, fontSize: 13, color:'var(--muted)'}}>
            <div><strong style={{color:'var(--ink)'}}>42</strong> verified pros</div>
            <div><strong style={{color:'var(--ink)'}}>2,874</strong> reviews</div>
            <div>Avg <strong style={{color:'var(--ink)'}}>$85</strong> per service</div>
            <div>Avg booking time <strong style={{color:'var(--ink)'}}>48 hrs</strong></div>
          </div>
        </div>
      </div>

      <div className="container-narrow" style={{padding:'40px 0'}}>
        <h2 style={{fontFamily:'Fraunces, serif', fontSize: 32, fontWeight: 500, letterSpacing:'-0.02em', margin:'0 0 22px'}}>
          Top rated in <em>Kingston</em>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 16}}>
          {pros.map((p, i) => (
            <div key={p.id} onClick={() => openProvider(p.id)}
              style={{background:'#fff', borderRadius: 18, overflow:'hidden', border:'1px solid var(--line)', cursor:'pointer', transition:'transform .15s'}}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
              onMouseLeave={e => e.currentTarget.style.transform = ''}>
              <div style={{display:'flex', gap: 16, padding: 16}}>
                <div style={{width: 96, height: 96, borderRadius: 12, overflow:'hidden', flexShrink: 0, position:'relative'}}>
                  <Ph tone={p.tone} style={{fontSize: 9}}>{p.name}</Ph>
                  <div style={{position:'absolute', top: 6, left: 6, background:'var(--ink)', color:'#fff', fontSize: 9.5, fontWeight: 700, padding:'2px 6px', borderRadius: 999}}>#{i+1}</div>
                </div>
                <div style={{flex: 1}}>
                  <div style={{display:'flex', alignItems:'center', gap: 6}}>
                    <div style={{fontWeight: 600, fontSize: 15}}>{p.name}</div>
                    {p.verified && <Icon name="verified" size={13}/>}
                  </div>
                  <div style={{fontSize: 12.5, color:'var(--muted)', marginTop: 2}}>{p.tagline}</div>
                  <div style={{display:'flex', gap: 12, fontSize: 12, marginTop: 8, color:'var(--ink-2)'}}>
                    <span><Icon name="star" size={11}/> {p.rating} ({p.reviews})</span>
                    <span>·</span>
                    <span>From ${p.priceMin}</span>
                  </div>
                  <div style={{marginTop: 10, display:'flex', gap: 6, flexWrap:'wrap'}}>
                    {p.services.slice(0,3).map(s => (
                      <span key={s} style={{fontSize: 11, padding:'3px 8px', background:'var(--sand)', borderRadius: 999, border:'1px solid var(--line)'}}>{s}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <h2 style={{fontFamily:'Fraunces, serif', fontSize: 32, fontWeight: 500, letterSpacing:'-0.02em', margin:'48px 0 22px'}}>
          Frequently asked
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
          {[
            {q:`How much does a hair stylist cost in Kingston?`, a:`Silk press runs $75–$180 depending on length; braids $90–$280; cuts $25–$60. The platform average is $85.`},
            {q:`Are CaribGlow stylists licensed?`, a:`Verified stylists have uploaded a valid cosmetology license or 5+ years of portfolio evidence. Look for the ✓ badge.`},
            {q:`How do I book?`, a:`Open any profile, pick a service and time, pay a deposit. You'll get a confirmation and calendar invite in seconds.`},
            {q:`Can I cancel?`, a:`Yes. Free cancellation up to 24h before your appointment. After that, the deposit is non-refundable.`},
          ].map(f => (
            <div key={f.q} style={{background:'#fff', padding: 18, borderRadius: 14, border:'1px solid var(--line)'}}>
              <div style={{fontWeight: 600, fontSize: 14}}>{f.q}</div>
              <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 6, lineHeight: 1.5}}>{f.a}</div>
            </div>
          ))}
        </div>

        <h2 style={{fontFamily:'Fraunces, serif', fontSize: 32, fontWeight: 500, letterSpacing:'-0.02em', margin:'48px 0 14px'}}>
          Nearby cities
        </h2>
        <div style={{display:'flex', flexWrap:'wrap', gap: 8}}>
          {['Montego Bay','Spanish Town','Ocho Rios','Negril','Portmore','May Pen'].map(c => (
            <div key={c} style={{padding:'8px 16px', background:'#fff', borderRadius: 999, border:'1px solid var(--line)', fontSize: 13, fontWeight: 500}}>
              Hair stylists in {c} →
            </div>
          ))}
        </div>

        <h2 style={{fontFamily:'Fraunces, serif', fontSize: 32, fontWeight: 500, letterSpacing:'-0.02em', margin:'48px 0 14px'}}>
          Other services in Kingston
        </h2>
        <div style={{display:'flex', flexWrap:'wrap', gap: 8}}>
          {['Nail techs','Makeup artists','Lash techs','Skincare','Barbers','Braiders'].map(s => (
            <div key={s} style={{padding:'8px 16px', background:'#fff', borderRadius: 999, border:'1px solid var(--line)', fontSize: 13, fontWeight: 500}}>
              {s} in Kingston →
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { GiftCardsPage, CityLandingPage });