// ========== EMBED WIDGET PAGE ==========
const EmbedWidgetPage = ({ nav, toast }) => {
  const [size, setSize] = React.useState('button');
  const [copied, setCopied] = React.useState(false);
  const snippet = size === 'button'
    ? `<script src="https://glowcarib.com/embed.js" async></script>\n<glowcarib-widget provider="jasmine-m" mode="button"></glowcarib-widget>`
    : `<script src="https://glowcarib.com/embed.js" async></script>\n<glowcarib-widget provider="jasmine-m" mode="inline" theme="light"></glowcarib-widget>`;

  const copy = () => {
    navigator.clipboard?.writeText(snippet);
    setCopied(true);
    toast('Snippet copied!');
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className="fade-in">
      <div className="container-narrow">
        <div className="page-head">
          <div>
            <div className="eyebrow">Provider tools</div>
            <h1>Embed <span className="i">widget</span></h1>
            <p style={{color:'var(--ink-2)', fontSize: 15, marginTop: 8, maxWidth: 540}}>
              Drop this on your Linktree, Wix, Squarespace, or Instagram bio page. Clients book directly. CaribGlow handles payment, reminders, and your calendar.
            </p>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 28, paddingBottom: 60}}>
          <div>
            <div className="checkout-card">
              <div className="eyebrow" style={{marginBottom: 12}}>1 · Choose a size</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginBottom: 24}}>
                {[
                  {k:'button', l:'Book button', s:'Compact. Opens a modal.'},
                  {k:'inline', l:'Inline calendar', s:'Full calendar in-page.'},
                ].map(o => (
                  <div key={o.k} onClick={() => setSize(o.k)}
                    style={{padding: 14, border: `2px solid ${size === o.k ? 'var(--ink)' : 'var(--line)'}`, borderRadius: 12, cursor:'pointer', background: size === o.k ? 'var(--sand)' : '#fff'}}>
                    <div style={{fontWeight: 600, fontSize: 14}}>{o.l}</div>
                    <div style={{fontSize: 12, color:'var(--muted)', marginTop: 3}}>{o.s}</div>
                  </div>
                ))}
              </div>

              <div className="eyebrow" style={{marginBottom: 12}}>2 · Copy this snippet</div>
              <div style={{background:'#1a1626', color:'#e0dcf0', borderRadius: 12, padding: 16, fontFamily:'JetBrains Mono, monospace', fontSize: 12.5, lineHeight: 1.7, position:'relative', overflow:'auto'}}>
                <button onClick={copy} style={{position:'absolute', top: 10, right: 10, background: copied ? 'var(--ok)' : 'rgba(255,255,255,0.1)', color:'#fff', border:'none', padding:'6px 12px', borderRadius: 6, fontSize: 11.5, fontWeight: 600, fontFamily:'Inter, sans-serif', cursor:'pointer'}}>
                  {copied ? '✓ Copied' : 'Copy'}
                </button>
                <pre style={{margin: 0, whiteSpace:'pre-wrap'}}>{snippet}</pre>
              </div>
              <div style={{fontSize: 12, color:'var(--muted)', marginTop: 10}}>
                Works on any HTML page. No framework required.
              </div>

              <h3 style={{fontFamily:'Fraunces, serif', fontSize: 22, fontWeight: 500, margin:'28px 0 10px'}}>3 · Paste & go</h3>
              <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
                {['Linktree','Instagram bio','Squarespace','Wix','Shopify','Custom HTML'].map(p => (
                  <div key={p} style={{padding:'6px 12px', borderRadius: 999, background:'var(--sand)', border:'1px solid var(--line)', fontSize: 12.5}}>{p}</div>
                ))}
              </div>
            </div>
          </div>

          <div style={{position:'sticky', top: 100, alignSelf:'start'}}>
            <div className="preview-frame">
              <div className="lab">Live preview</div>
              <div style={{background:'#f8f9fb', borderRadius: 12, padding: 32, minHeight: 380}}>
                <div style={{fontSize: 11, color:'#9ca3af', marginBottom: 8}}>Partner website</div>
                <div style={{fontFamily:'serif', fontSize: 26, fontWeight: 500, marginBottom: 6, color:'#222'}}>Welcome to my page</div>
                <div style={{fontSize: 13, color:'#6b7280', marginBottom: 24, lineHeight: 1.6}}>
                  Follow me for hair tips, new looks, and booking availability.
                </div>

                {size === 'button' ? (
                  <div style={{display:'inline-flex', alignItems:'center', gap: 8, background:'var(--ink)', color:'#fff', padding:'12px 22px', borderRadius: 999, fontWeight: 600, fontSize: 14, boxShadow: 'var(--shadow-md)'}}>
                    ✦ Book with Jasmine
                  </div>
                ) : (
                  <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius: 12, padding: 16}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10}}>
                      <div style={{fontWeight: 600, fontSize: 13}}>Pick a time</div>
                      <div style={{fontSize: 11, color:'var(--muted)'}}>Powered by CaribGlow</div>
                    </div>
                    <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 4, marginBottom: 10}}>
                      {['M','T','W','T','F','S','S'].map((d, i) => <div key={i} style={{textAlign:'center', fontSize: 9, color:'var(--muted)'}}>{d}</div>)}
                      {Array(14).fill(0).map((_, i) => (
                        <div key={i} style={{aspectRatio: 1, display:'grid', placeItems:'center', fontSize: 11, borderRadius: 6, background: i === 3 ? 'var(--ink)' : 'transparent', color: i === 3 ? '#fff' : 'var(--ink)', fontWeight: i === 3 ? 600 : 400}}>{i + 20}</div>
                      ))}
                    </div>
                    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 4, marginTop: 10}}>
                      {['10:30','1:00','2:30','4:00','5:30','7:00'].map((t, i) => (
                        <div key={t} style={{padding:'6px 0', textAlign:'center', fontSize: 11, borderRadius: 6, border:'1px solid var(--line)', background: i === 2 ? 'var(--ink)' : '#fff', color: i === 2 ? '#fff' : 'var(--ink)'}}>{t}</div>
                      ))}
                    </div>
                  </div>
                )}

                <div style={{marginTop: 32, fontSize: 12, color:'#9ca3af'}}>— More about me —</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== PROVIDER QR CODE PAGE ==========
const QRPage = ({ nav, toast }) => {
  const p = PROVIDERS[0];
  // Fake QR code via CSS grid — deterministic from username
  const cells = React.useMemo(() => {
    const seed = p.username.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
    const arr = [];
    const N = 21;
    for (let i = 0; i < N*N; i++) {
      const x = i % N, y = Math.floor(i / N);
      // Corner finder patterns
      const corner = (x < 7 && y < 7) || (x >= N-7 && y < 7) || (x < 7 && y >= N-7);
      if (corner) {
        const lx = x < 7 ? x : x - (N-7);
        const ly = y < 7 ? y : y - (N-7);
        const inner = lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4;
        const border = lx === 0 || lx === 6 || ly === 0 || ly === 6;
        arr.push(border || inner ? 1 : 0);
      } else {
        arr.push((((x * 13 + y * 7 + seed) ^ (x * y)) % 3) === 0 ? 1 : 0);
      }
    }
    return arr;
  }, []);

  return (
    <div className="fade-in">
      <div className="container-narrow">
        <div className="page-head">
          <div>
            <div className="eyebrow">Provider tools</div>
            <h1>Your <span className="i">QR code</span></h1>
            <p style={{color:'var(--ink-2)', fontSize: 15, marginTop: 8, maxWidth: 520}}>
              Print, stick it on your mirror, hand it to clients. Any scan lands on your CaribGlow booking page.
            </p>
          </div>
          <div style={{display:'flex', gap: 8}}>
            <button className="btn btn-outline"><Icon name="msg" size={13}/> Email to me</button>
            <button className="btn btn-brand" onClick={() => toast('PNG downloaded')}>Download PNG</button>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24, paddingBottom: 60}}>
          {/* Card A: Clean QR */}
          <div>
            <div style={{fontSize: 12, color:'var(--muted)', fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 10}}>Card · print-ready (4×6")</div>
            <div style={{background: 'var(--grad-hero)', borderRadius: 22, padding: 6, boxShadow:'var(--shadow-lg)'}}>
              <div style={{background:'#fff', borderRadius: 18, padding: 32, textAlign:'center', aspectRatio: '4 / 6'}}>
                <div style={{fontSize: 12, fontWeight: 700, letterSpacing:'0.12em', color:'var(--muted)', textTransform:'uppercase', marginBottom: 16}}>Scan to book</div>
                <div style={{fontFamily:'Fraunces, serif', fontSize: 34, fontWeight: 500, letterSpacing:'-0.02em', lineHeight: 1}}>
                  {p.name}
                </div>
                <div style={{fontSize: 13, color:'var(--muted)', marginTop: 6}}>{p.tagline}</div>

                <div style={{
                  margin: '22px auto',
                  width: 220, height: 220,
                  background:'#fff',
                  display:'grid',
                  gridTemplateColumns:'repeat(21, 1fr)',
                  gridTemplateRows:'repeat(21, 1fr)',
                  gap: 0,
                  padding: 8,
                  borderRadius: 12,
                  border: '1px solid var(--line)',
                }}>
                  {cells.map((v, i) => (
                    <div key={i} style={{background: v ? '#151225' : '#fff'}}/>
                  ))}
                </div>

                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 12, color:'var(--ink-2)'}}>
                  glowcarib.com/{p.username}
                </div>
                <div style={{marginTop: 18, display:'flex', alignItems:'center', justifyContent:'center', gap: 6, fontSize: 11, color:'var(--muted)'}}>
                  Powered by <strong style={{color:'var(--ink)'}}>CaribGlow</strong>
                </div>
              </div>
            </div>
          </div>

          {/* Card B: Instagram story format */}
          <div>
            <div style={{fontSize: 12, color:'var(--muted)', fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 10}}>Story · Instagram 9:16</div>
            <div style={{background: 'var(--ink)', borderRadius: 22, aspectRatio: '9 / 16', position:'relative', overflow:'hidden', color:'#fff', padding: 24}}>
              <div style={{position:'absolute', inset:-40, background:'var(--grad-hero)', filter:'blur(60px)', opacity: 0.6}}/>
              <div style={{position:'relative', height:'100%', display:'flex', flexDirection:'column'}}>
                <div style={{fontSize: 10.5, fontWeight: 700, letterSpacing:'0.15em', opacity: 0.8}}>✦ NOW BOOKING</div>
                <div style={{fontFamily:'Fraunces, serif', fontSize: 38, fontWeight: 500, letterSpacing:'-0.02em', lineHeight: 1, marginTop: 8}}>
                  Book your<br/><em>silk press</em>
                </div>
                <div style={{marginTop: 'auto', marginBottom: 10, background:'#fff', borderRadius: 16, padding: 16, color:'var(--ink)'}}>
                  <div style={{
                    margin: '0 auto',
                    aspectRatio: 1,
                    width: '100%',
                    background:'#fff',
                    display:'grid',
                    gridTemplateColumns:'repeat(21, 1fr)',
                    gap: 0,
                  }}>
                    {cells.map((v, i) => <div key={i} style={{background: v ? '#151225' : '#fff'}}/>)}
                  </div>
                  <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 11, textAlign:'center', marginTop: 10}}>
                    glowcarib.com/{p.username}
                  </div>
                </div>
                <div style={{fontSize: 12, opacity: 0.85, textAlign:'center'}}>Scan · Tap link in bio</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16, paddingBottom: 60}}>
          {[
            {n:'Print on sticker', s:'4×6" glossy works best', i:'🧷'},
            {n:'Add to flyers', s:'Corner placement, 1.5" min', i:'📄'},
            {n:'Share to IG story', s:'Tap "swipe up" integration', i:'✦'},
          ].map(t => (
            <div key={t.n} style={{background:'#fff', borderRadius: 16, padding: 20, border:'1px solid var(--line)'}}>
              <div style={{fontSize: 22}}>{t.i}</div>
              <div style={{fontWeight: 600, marginTop: 8, fontSize: 14}}>{t.n}</div>
              <div style={{fontSize: 12.5, color:'var(--muted)', marginTop: 3}}>{t.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ========== REFERRAL LANDING /ref/[code] ==========
const ReferralPage = ({ nav }) => {
  return (
    <div className="fade-in" style={{background:'var(--sand)'}}>
      <section style={{padding:'40px 0 80px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', top:-100, left:'50%', transform:'translateX(-50%)', width: 800, height: 800, background:'var(--grad-hero)', borderRadius:'50%', opacity: 0.12, filter:'blur(80px)'}}/>
        <div className="container-narrow" style={{position:'relative', textAlign:'center'}}>
          <div style={{display:'inline-flex', gap: 8, alignItems:'center', background:'#fff', padding:'7px 14px', borderRadius: 999, border:'1px solid var(--line)', fontSize: 12, fontWeight: 600, color:'var(--primary-deep)', marginBottom: 22}}>
            <span style={{background:'var(--coral)', color:'#fff', padding:'2px 8px', borderRadius: 999, fontSize: 10, fontWeight: 700}}>FRIEND INVITE</span>
            Invited by Jasmine M.
          </div>
          <h1 style={{fontFamily:'Fraunces, serif', fontSize: 72, fontWeight: 500, letterSpacing:'-0.03em', lineHeight: 0.95, margin: 0}}>
            $20 off your first<br/><em style={{fontStyle:'italic', color:'var(--primary-deep)'}}>CaribGlow</em> booking.
          </h1>
          <p style={{fontSize: 18, color:'var(--ink-2)', maxWidth: 560, margin:'18px auto 0', lineHeight: 1.5}}>
            Book any service over $50 with code <strong style={{background:'var(--sand-2)', padding:'2px 8px', borderRadius: 6, fontFamily:'JetBrains Mono, monospace', fontSize: 15}}>JASMINE20</strong> — discount applies automatically.
          </p>

          <div style={{display:'flex', gap: 10, justifyContent:'center', marginTop: 30}}>
            <button className="btn btn-brand btn-lg" onClick={() => nav('explore')}>
              Claim my $20 <Icon name="arrowRight" size={14}/>
            </button>
            <button className="btn btn-outline btn-lg" onClick={() => nav('landing')}>How it works</button>
          </div>

          <div style={{display:'flex', justifyContent:'center', gap: 26, marginTop: 30, fontSize: 13, color:'var(--muted)'}}>
            <div><Icon name="check" size={12}/> No card needed yet</div>
            <div><Icon name="check" size={12}/> Valid 30 days</div>
            <div><Icon name="check" size={12}/> First-time only</div>
          </div>
        </div>
      </section>

      <section style={{background:'#fff', padding: '60px 0', borderTop:'1px solid var(--line)'}}>
        <div className="container-narrow">
          <div style={{textAlign:'center', marginBottom: 36}}>
            <div className="eyebrow">About your referrer</div>
            <h2 style={{fontFamily:'Fraunces, serif', fontSize: 40, fontWeight: 500, letterSpacing:'-0.02em', margin:'6px 0 0'}}>
              Meet <span style={{fontStyle:'italic', color:'var(--primary-deep)'}}>Jasmine</span>.
            </h2>
          </div>
          <div style={{display:'flex', gap: 28, alignItems:'center', background:'var(--sand)', padding: 24, borderRadius: 20, border:'1px solid var(--line)'}}>
            <div style={{width: 120, height: 120, borderRadius:'50%', overflow:'hidden', flexShrink: 0}}>
              <Ph tone="coral" style={{fontSize: 11}}>Jasmine M.</Ph>
            </div>
            <div style={{flex: 1}}>
              <div style={{fontFamily:'Fraunces, serif', fontSize: 26, fontWeight: 500}}>Jasmine M. · Hair Stylist</div>
              <div style={{fontSize: 13.5, color:'var(--muted)', marginTop: 4}}>Silk press specialist · New Kingston, JM</div>
              <div style={{marginTop: 10, fontSize: 14, color:'var(--ink-2)', lineHeight: 1.55}}>
                "I've been using CaribGlow for a year and it changed my business. Try it, get $20 off your first session on me."
              </div>
            </div>
            <button className="btn btn-ink" onClick={() => nav('public-booking')}>Book with Jasmine</button>
          </div>
        </div>
      </section>

      <section style={{padding:'60px 0'}}>
        <div className="container-narrow">
          <div style={{textAlign:'center'}}>
            <div className="eyebrow">How it works</div>
            <h2 style={{fontFamily:'Fraunces, serif', fontSize: 36, fontWeight: 500, letterSpacing:'-0.02em', margin:'6px 0 28px'}}>Three steps to your glow.</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14}}>
            {[
              {n:'01', t:'Pick anyone', d:'Browse 2,000+ Caribbean beauty pros. Your $20 works with any of them.'},
              {n:'02', t:'Book a service', d:'Any service $50+. Code JASMINE20 applies at checkout.'},
              {n:'03', t:'Glow up', d:'We reward Jasmine $10 when you complete your first booking. Everyone wins.'},
            ].map(s => (
              <div key={s.n} style={{background:'#fff', padding: 24, borderRadius: 18, border:'1px solid var(--line)'}}>
                <div style={{fontFamily:'Fraunces, serif', fontSize: 42, fontWeight: 500, color:'var(--primary-deep)'}}>{s.n}</div>
                <div style={{fontWeight: 600, fontSize: 16, margin:'6px 0 4px'}}>{s.t}</div>
                <div style={{fontSize: 13.5, color:'var(--muted)', lineHeight: 1.5}}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { EmbedWidgetPage, QRPage, ReferralPage });