/* ============================================================
   ABOUT · CONTACT · SERVICES · POLICIES
   ============================================================ */
function PageHero({ eyebrow, title, sub, variant = 'ph-blush' }) {
  return (
    <section style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--blush-soft))', padding: 'clamp(48px,7vw,96px) var(--gutter)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <p className="eyebrow">{eyebrow}</p>
        <h1 style={{ fontSize: 'clamp(40px,6vw,80px)', margin: '14px 0 16px' }}>{title}</h1>
        {sub && <p style={{ fontSize: 'clamp(16px,2vw,20px)', color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 560 }}>{sub}</p>}
      </div>
    </section>);

}

/* ---------- About ---------- */
function AboutPage() {
  const { nav } = useStore();
  return (
    <>
      <PageHero eyebrow="Our Story" title={<>Three stores, <em style={{ fontStyle: 'italic' }}>one house scent</em></>} sub="Fadar Kamshi — the House of Fragrance. Turaren wuta, original incense, designer oil perfumes and burners, blended in-house and sold across Surulere, Wuye and Kano." />

      <section className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
        <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '.95fr 1.05fr', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
          <Reveal style={{ position: 'relative' }}>
            <Ph src={IMG.about.store} label="Inside the Incense Palace store" variant="ph-gold" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)' }} />
          </Reveal>
          <Reveal delay={2}>
            <p className="eyebrow">Who we are</p>
            <h2 style={{ fontSize: 'clamp(30px,4vw,48px)', margin: '14px 0 20px' }}>Fadar Kamshi</h2>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Fadar Kamshi — the House of Fragrance — trades as Incense Palace. We sell turaren wuta and original incense, alcohol-free designer oil perfumes, electric burners, donut charcoal, air fresheners and wardrobe balls.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>The blends are our own. <strong>Valley Mix</strong> for every day, <strong>Exclusive</strong> for guests, <strong>Clothes Signature</strong> for what you wear, <strong>Palace Mixture</strong> and <strong>VIP Mix</strong> for when you want the room to notice. Milled and mixed in-house rather than bought in and relabelled, which is why the scent behaves the same jar after jar.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>You will find us in Surulere in Lagos, Wuye in Abuja and in Kano — walk in and smell before you buy, or message us and we deliver nationwide.</p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 24, color: 'var(--ink)', marginTop: 24 }}>“The scent should still be in the room long after you have left it.”</p>
          </Reveal>
        </div>
      </section>

      {/* values */}
      <section style={{ background: 'var(--cream-deep)' }}>
        <div className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
          <p className="eyebrow" style={{ textAlign: 'center', marginBottom: 14 }}>How we work</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', textAlign: 'center', marginBottom: 12 }}>Blenders first, <em style={{ fontStyle: 'italic' }}>retailers second</em></h2>
          <p style={{ textAlign: 'center', fontSize: 16, color: 'var(--ink-soft)', maxWidth: 580, margin: '0 auto 48px', lineHeight: 1.7 }}>We mill and mix our own incense, fill our own jars and stand behind every blend on the shelf. If a batch does not smell right, it does not go out.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 }}>
            {[[I.heart, 'Our own blends', 'Milled and mixed in-house — not bought in and relabelled. The same jar smells the same next month.'], [I.gift, 'Smell before you buy', 'Walk into Surulere, Wuye or Kano and test any blend on charcoal before you commit.'], [I.globe, 'Nationwide delivery', 'Order on WhatsApp or here and we dispatch across Nigeria — packed so nothing leaks or spills.'], [I.check, 'Quality-controlled charcoal', 'Donut charcoal in the apple shape, checked for clean burn — no chemical smell fighting your incense.']].map(([Ic, t, s], i) =>
            <Reveal key={i} delay={i + 1} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 30, boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ width: 54, height: 54, borderRadius: 100, background: 'var(--blush-soft)', color: 'var(--blush-deep)', display: 'grid', placeItems: 'center', marginBottom: 18 }}>{Ic({ width: 26, height: 26 })}</span>
                <h3 style={{ fontSize: 25, marginBottom: 10 }}>{t}</h3>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{s}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <section className="container" style={{ padding: 'clamp(56px,8vw,90px) var(--gutter)', textAlign: 'center', maxWidth: 620 }}>
        <h2 style={{ fontSize: 'clamp(30px,4.5vw,48px)' }}>Find your scent</h2>
        <p className="muted" style={{ marginTop: 12, fontSize: 16.5 }}>Not sure where to start? Valley Mix is the one most people begin with.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}>Shop all fragrance</button>
          <button className="btn btn-outline btn-lg" onClick={() => nav('services')}>Wholesale &amp; trade</button>
        </div>
      </section>
    </>);

}

/* ---------- Services ---------- */
function ServicesPage() {
  const { nav, toast } = useStore();
  const [sent, setSent] = useState(false);

  // Booking state
  const [bookStep, setBookStep] = useState(1);
  const [bookBundle, setBookBundle] = useState('');
  const [bookDate, setBookDate] = useState('');
  const [bookTime, setBookTime] = useState('');
  const [bookMonth, setBookMonth] = useState(() => { const d = new Date(); return { y: d.getFullYear(), m: d.getMonth() }; });
  const [showLogin, setShowLogin] = useState(false);
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPass, setLoginPass] = useState('');
  const [bookConfirmed, setBookConfirmed] = useState(false);

  const BUNDLES = ['No preference — general enquiry','Turaren Wuta & Incense (wholesale)','Designer Oil Perfumes (wholesale)','Burners & Charcoal (wholesale)','Event or wedding fragrance','Custom blending & private label'];
  const SLOTS = ['9:00 AM','9:30 AM','10:00 AM','10:30 AM','11:00 AM','11:30 AM','2:00 PM','2:30 PM','3:00 PM','3:30 PM','4:00 PM','4:30 PM','5:00 PM','5:30 PM'];
  const UNAVAILABLE = ['9:30 AM','11:00 AM','3:00 PM'];
  const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  function getDaysInMonth(y, m) { return new Date(y, m + 1, 0).getDate(); }
  function getFirstDay(y, m) { return new Date(y, m, 1).getDay(); }
  function isPast(y, m, d) { const t = new Date(); t.setHours(0,0,0,0); return new Date(y, m, d) < t; }
  function fmtDate(str) { if (!str) return ''; const [y,m,d] = str.split('-'); return new Date(y,m-1,d).toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long',year:'numeric'}); }
  const iFocus = e => { e.target.style.borderColor='var(--gold)'; e.target.style.boxShadow='0 0 0 4px rgba(0,0,0,.10)'; e.target.style.outline='none'; };
  const iBlur  = e => { e.target.style.borderColor='var(--line)'; e.target.style.boxShadow=''; };
  const inSx = { background:'var(--cream)', border:'1.5px solid var(--line)', borderRadius:'var(--r-sm)', padding:'13px 16px', color:'var(--ink)', width:'100%', fontFamily:'var(--sans)', fontSize:14, transition:'border .25s, box-shadow .25s' };
  return (
    <>
      <PageHero eyebrow="Trade &amp; Services" title={<>Wholesale, events &amp; <em style={{ fontStyle: 'italic' }}>custom blending</em></>} sub="Buying by the carton, scenting a venue, or want a blend that is yours alone? Send us your list and we will quote the same day." variant="ph-sage" />

      <section className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 28 }}>
          {[
          ['Wholesale & Trade Supply', 'ph-blush', 'Trade rates on incense, oils, burners and charcoal by the carton — for shops, market traders and online resellers. Send your list and we quote against current stock.', ['Carton and half-carton pricing', 'Consistent blends, restocked monthly', 'Pickup in Surulere, Wuye or Kano']],
          ['Event & Wedding Fragrance', 'ph-sage', "Scenting a hall, a wedding or a naming ceremony. We supply the incense, the burners and the charcoal, and we can set up and run the burners through the event.", ['Burner hire and setup', 'Bulk turaren wuta by the event', 'Guest gifting — roll-ons and small jars']],
          ['Custom Blending & Private Label', 'ph-gold', 'A blend built to your brief and bottled under your own label — for brands, hotels and gifting. We work from a scent direction you describe, then send samples until it is right.', ['Scent brief and sampling rounds', 'Your label on jars and bottles', 'Minimum order agreed upfront']]].
          map(([title, ph, desc, points], i) =>
          <Reveal key={i} delay={i + 1} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
              <Ph src={i === 0 ? IMG.services.styling : i === 1 ? IMG.services.event : IMG.services.custom} label={title} variant={ph} style={{ aspectRatio: '16/10' }} />
              <div style={{ padding: 28 }}>
                <h3 style={{ fontSize: 28, marginBottom: 12 }}>{title}</h3>
                <p style={{ fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 18 }}>{desc}</p>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {points.map((pt) => <li key={pt} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14.5 }}><span style={{ width: 22, height: 22, borderRadius: 100, background: 'var(--sage-soft)', color: 'var(--sage-deep)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><I.check width={13} height={13} /></span>{pt}</li>)}
                </ul>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* process */}
      <section style={{ background: 'var(--cream-deep)' }}>
        <div className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,50px)', textAlign: 'center', marginBottom: 48 }}>How we <em style={{ fontStyle: 'italic' }}>work</em></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 24 }}>
            {[['01', 'Your list', 'Tell us the blends, sizes and quantities.'], ['02', 'Quote', 'We price against current stock, same day.'], ['03', 'Fill', 'We mill, mix and fill your order to spec.'], ['04', 'Dispatch', 'Pickup in store or courier nationwide.']].map(([n, t, s], i) =>
            <Reveal key={n} delay={i + 1}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 48, color: 'var(--gold)', lineHeight: 1 }}>{n}</div>
                <h3 style={{ fontSize: 23, margin: '10px 0 8px' }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{s}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* enquiry / booking */}
      <section className="container" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)', maxWidth: 720 }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <p className="eyebrow" style={{ marginBottom: 10 }}>Book a call</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,48px)' }}>Talk to us about <em style={{ fontStyle: 'italic' }}>volume</em></h2>
          <p className="muted" style={{ marginTop: 10 }}>Pick what you are enquiring about, choose a date and time, and we’ll confirm your slot within a few hours.</p>
        </div>

        {bookConfirmed ? (
          <div style={{ textAlign: 'center', background: 'var(--gold-soft)', borderRadius: 'var(--r-xl)', padding: '48px 32px', border: '1px solid var(--line)' }}>
            <div style={{ width: 64, height: 64, borderRadius: '100%', background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', display: 'grid', placeItems: 'center', color: '#fff', margin: '0 auto 18px', boxShadow: '0 8px 24px rgba(0,0,0,.28)' }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 13 4 4 10-11" strokeLinecap="round"/></svg>
            </div>
            <p className="eyebrow" style={{ marginBottom: 10 }}>Booking confirmed</p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, marginBottom: 10 }}>We’ll be in touch shortly!</p>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.7 }}>Your call is booked for <strong>{fmtDate(bookDate)}</strong> at <strong>{bookTime}</strong>. Expect a confirmation by email within a few hours.</p>
          </div>
        ) : (
          <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: '0 2px 12px rgba(0,0,0,.07)' }}>

            {/* Widget header with step tabs */}
            <div style={{ background: 'linear-gradient(135deg,var(--ink),#3B1258)', padding: '20px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
              <div>
                <p style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', marginBottom: 4 }}>30-minute call</p>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 18, color: '#fff' }}>Book a trade enquiry call</p>
              </div>
              <div style={{ display: 'flex', background: 'rgba(255,255,255,.08)', borderRadius: 100, padding: 3, gap: 2 }}>
                {['Details','Time','Summary'].map((l, i) => (
                  <button key={l} onClick={() => { if (i+1 < bookStep || (i===1 && bookDate)) setBookStep(i+1); }} style={{ padding: '8px 14px', borderRadius: 100, fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 500, border: 'none', cursor: 'pointer', background: bookStep===i+1 ? 'var(--ivory)' : 'transparent', color: bookStep===i+1 ? 'var(--ink)' : 'rgba(255,255,255,.6)', transition: 'all .3s' }}>{l}</button>
                ))}
              </div>
            </div>

            {/* STEP 1 */}
            {bookStep === 1 && (
              <div style={{ padding: 'clamp(20px,4vw,40px)' }}>
                <div style={{ marginBottom: 22 }}>
                  <label style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', fontWeight: 500, display: 'block', marginBottom: 8 }}>What is this about <span style={{ color: 'var(--ink-faint)', fontWeight: 400 }}>(optional)</span></label>
                  <select style={inSx} value={bookBundle} onChange={e => setBookBundle(e.target.value)} onFocus={iFocus} onBlur={iBlur}>
                    <option value="">Select an option (or leave blank)</option>
                    {BUNDLES.map(b => <option key={b}>{b}</option>)}
                  </select>
                </div>
                <label style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', fontWeight: 500, display: 'block', marginBottom: 12 }}>Select a date <span style={{ color: 'var(--blush)' }}>*</span></label>
                <div style={{ background: 'var(--cream)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', overflow: 'hidden' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
                    <button onClick={() => setBookMonth(p => p.m===0?{y:p.y-1,m:11}:{y:p.y,m:p.m-1})} style={{ width:32,height:32,borderRadius:'100%',background:'var(--ivory)',border:'none',cursor:'pointer',display:'grid',placeItems:'center',color:'var(--ink-soft)' }}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg></button>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{MONTH_NAMES[bookMonth.m]} {bookMonth.y}</span>
                    <button onClick={() => setBookMonth(p => p.m===11?{y:p.y+1,m:0}:{y:p.y,m:p.m+1})} style={{ width:32,height:32,borderRadius:'100%',background:'var(--ivory)',border:'none',cursor:'pointer',display:'grid',placeItems:'center',color:'var(--ink-soft)' }}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg></button>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', padding: '10px 12px 4px' }}>
                    {['Su','Mo','Tu','We','Th','Fr','Sa'].map(d => <div key={d} style={{ textAlign:'center',fontSize:11,letterSpacing:'.08em',color:'var(--ink-faint)',fontWeight:500,padding:'4px 0' }}>{d}</div>)}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', padding: '0 12px 14px', gap: 2 }}>
                    {Array.from({ length: getFirstDay(bookMonth.y, bookMonth.m) }, (_,i) => <div key={'e'+i} />)}
                    {Array.from({ length: getDaysInMonth(bookMonth.y, bookMonth.m) }, (_,i) => {
                      const d = i+1, dateStr = `${bookMonth.y}-${String(bookMonth.m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
                      const past = isPast(bookMonth.y,bookMonth.m,d), isSun = new Date(bookMonth.y,bookMonth.m,d).getDay()===0, sel = bookDate===dateStr;
                      return <button key={d} disabled={past||isSun} onClick={() => setBookDate(dateStr)} style={{ height:36,borderRadius:8,border:'none',cursor:past||isSun?'not-allowed':'pointer',fontFamily:'var(--sans)',fontSize:13,fontWeight:sel?600:400,background:sel?'var(--gold)':'transparent',color:sel?'#fff':past||isSun?'var(--line)':'var(--ink)',transition:'all .2s',boxShadow:sel?'0 4px 14px rgba(0,0,0,.25)':'none' }} onMouseEnter={e => { if(!past&&!isSun&&!sel) e.currentTarget.style.background='var(--gold-soft)'; }} onMouseLeave={e => { if(!sel) e.currentTarget.style.background='transparent'; }}>{d}</button>;
                    })}
                  </div>
                </div>
                <div style={{ marginTop: 20, textAlign: 'right' }}>
                  <button className="btn btn-primary" disabled={!bookDate} onClick={() => bookDate && setBookStep(2)} style={{ opacity: bookDate?1:.4 }}>Choose a time <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round"/></svg></button>
                </div>
              </div>
            )}

            {/* STEP 2 */}
            {bookStep === 2 && (
              <div style={{ padding: 'clamp(20px,4vw,40px)' }}>
                <div style={{ display:'flex',alignItems:'center',gap:10,marginBottom:20,padding:'12px 16px',background:'var(--gold-soft)',borderRadius:'var(--r-md)' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                  <span style={{ fontSize:13.5,color:'var(--gold-deep)',fontWeight:500 }}>{fmtDate(bookDate)}</span>
                  <button onClick={() => setBookStep(1)} style={{ marginLeft:'auto',fontSize:11,color:'var(--gold-deep)',background:'none',border:'none',cursor:'pointer',letterSpacing:'.08em',textTransform:'uppercase',textDecoration:'underline' }}>Change</button>
                </div>
                <label style={{ fontFamily:'var(--sans)',fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-soft)',fontWeight:500,display:'block',marginBottom:14 }}>Available times (WAT · Lagos) <span style={{ color:'var(--blush)' }}>*</span></label>
                <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(108px,1fr))',gap:8 }}>
                  {SLOTS.map(s => { const unavail=UNAVAILABLE.includes(s),sel=bookTime===s; return <button key={s} disabled={unavail} onClick={() => setBookTime(s)} style={{ padding:'11px 8px',borderRadius:100,fontSize:13,fontFamily:'var(--sans)',fontWeight:500,border:`1.5px solid ${sel?'var(--gold)':'var(--line)'}`,background:sel?'var(--gold)':'var(--ivory)',color:sel?'#fff':unavail?'var(--ink-faint)':'var(--ink)',cursor:unavail?'not-allowed':'pointer',textDecoration:unavail?'line-through':'none',opacity:unavail?.45:1,transition:'all .2s',boxShadow:sel?'0 4px 14px rgba(0,0,0,.22)':'none' }}>{s}</button>; })}
                </div>
                <p style={{ fontSize:12,color:'var(--ink-faint)',marginTop:12 }}>Crossed-out slots are unavailable. All times are West Africa Time (GMT+1).</p>
                <div style={{ display:'flex',justifyContent:'space-between',marginTop:20 }}>
                  <button className="btn btn-outline" onClick={() => setBookStep(1)}>← Back</button>
                  <button className="btn btn-primary" disabled={!bookTime} onClick={() => bookTime && setBookStep(3)} style={{ opacity:bookTime?1:.4 }}>Review booking <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round"/></svg></button>
                </div>
              </div>
            )}

            {/* STEP 3 */}
            {bookStep === 3 && (
              <div style={{ padding: 'clamp(20px,4vw,40px)' }}>
                <p style={{ fontFamily:'var(--sans)',fontSize:11,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--ink-faint)',fontWeight:500,marginBottom:16 }}>Booking summary</p>
                <div style={{ background:'var(--cream)',border:'1px solid var(--line)',borderRadius:'var(--r-md)',overflow:'hidden',marginBottom:20 }}>
                  {[['Service','Trade enquiry call (30 min)'],['Enquiry about',bookBundle||'No preference'],['Date',fmtDate(bookDate)],['Time',bookTime+' WAT (Lagos)'],['Format','Video or voice call']].map(([l,v],i,arr) => (
                    <div key={l} style={{ display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:16,padding:'13px 18px',borderBottom:i<arr.length-1?'1px solid var(--cream-deep)':'none' }}>
                      <span style={{ fontSize:12,color:'var(--ink-faint)',letterSpacing:'.06em',textTransform:'uppercase',flexShrink:0 }}>{l}</span>
                      <span style={{ fontSize:14,fontWeight:500,textAlign:'right' }}>{v}</span>
                    </div>
                  ))}
                </div>
                <div style={{ background:'linear-gradient(135deg,var(--gold-soft),var(--cream))',border:'1px solid var(--line)',borderRadius:'var(--r-md)',padding:'16px 18px',marginBottom:20 }}>
                  <div style={{ display:'flex',justifyContent:'space-between',fontSize:14,marginBottom:8 }}><span style={{ color:'var(--ink-soft)' }}>Booking deposit</span><span style={{ fontWeight:500 }}>₦5,000</span></div>
                  <div style={{ display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:8 }}><span style={{ color:'var(--ink-faint)' }}>VAT (7.5%)</span><span style={{ color:'var(--ink-faint)' }}>₦375</span></div>
                  <div style={{ height:1,background:'var(--line)',margin:'10px 0' }}></div>
                  <div style={{ display:'flex',justifyContent:'space-between' }}><span style={{ fontFamily:'var(--serif)',fontSize:18 }}>Total due today</span><span style={{ fontFamily:'var(--serif)',fontSize:22,color:'var(--gold-deep)' }}>₦5,375</span></div>
                </div>
                <div style={{ background:'var(--sage-soft)',border:'1px solid var(--sage)',borderRadius:'var(--r-sm)',padding:'12px 16px',display:'flex',gap:10,alignItems:'flex-start',marginBottom:24 }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--sage)" strokeWidth="1.5" style={{ flexShrink:0,marginTop:1 }}><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
                  <p style={{ fontSize:13,color:'var(--ink-soft)',lineHeight:1.6 }}>By confirming, you’ll be directed to payment. The deposit comes off your first wholesale order.</p>
                </div>
                <div style={{ display:'flex',gap:10,flexWrap:'wrap' }}>
                  <button className="btn btn-outline" onClick={() => setBookStep(2)} style={{ flexShrink:0 }}>← Back</button>
                  <button className="btn btn-gold" onClick={() => setShowLogin(true)} style={{ flex:1,justifyContent:'center' }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                    Confirm appointment
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Login modal */}
        {showLogin && (
          <div onClick={e => { if (e.target===e.currentTarget) setShowLogin(false); }} role="dialog" aria-modal="true" style={{ position:'fixed',inset:0,zIndex:9999,background:'rgba(0,0,0,.72)',backdropFilter:'blur(7px)',display:'flex',alignItems:'center',justifyContent:'center',padding:20 }}>
            <div style={{ background:'var(--ivory)',borderRadius:24,maxWidth:420,width:'100%',padding:'clamp(28px,5vw,48px)',boxShadow:'0 32px 80px rgba(0,0,0,.35)',border:'1px solid var(--line)',position:'relative' }}>
              <button onClick={() => setShowLogin(false)} aria-label="Close" style={{ position:'absolute',top:18,right:18,width:34,height:34,borderRadius:'100%',background:'var(--cream-deep)',border:'none',cursor:'pointer',display:'grid',placeItems:'center',color:'var(--ink-soft)' }} onMouseEnter={e=>{ e.currentTarget.style.background='var(--ink)';e.currentTarget.style.color='#fff'; }} onMouseLeave={e=>{ e.currentTarget.style.background='var(--cream-deep)';e.currentTarget.style.color='var(--ink-soft)'; }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6 6 18M6 6l12 12" strokeLinecap="round"/></svg>
              </button>
              <p className="eyebrow" style={{ marginBottom:10 }}>One last step</p>
              <h3 style={{ fontFamily:'var(--serif)',fontSize:28,marginBottom:6,lineHeight:1.05 }}>Sign in to confirm</h3>
              <p style={{ fontSize:14,color:'var(--ink-soft)',marginBottom:24,lineHeight:1.6 }}>Create a free account or sign in to lock in your call slot.</p>
              <div style={{ display:'flex',flexDirection:'column',gap:14 }}>
                <div style={{ display:'flex',flexDirection:'column',gap:7 }}>
                  <label style={{ fontFamily:'var(--sans)',fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-soft)',fontWeight:500 }}>Email address</label>
                  <input type="email" style={inSx} value={loginEmail} onChange={e=>setLoginEmail(e.target.value)} placeholder="you@example.com" onFocus={iFocus} onBlur={iBlur} autoComplete="email" />
                </div>
                <div style={{ display:'flex',flexDirection:'column',gap:7 }}>
                  <label style={{ fontFamily:'var(--sans)',fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-soft)',fontWeight:500 }}>Password</label>
                  <input type="password" style={inSx} value={loginPass} onChange={e=>setLoginPass(e.target.value)} placeholder="••••••••" onFocus={iFocus} onBlur={iBlur} autoComplete="current-password" />
                </div>
              </div>
              <button className="btn btn-gold" onClick={() => { setShowLogin(false); setBookConfirmed(true); }} style={{ width:'100%',justifyContent:'center',marginTop:20 }}>Confirm my appointment</button>
              <div style={{ display:'flex',alignItems:'center',gap:12,margin:'18px 0' }}>
                <div style={{ flex:1,height:1,background:'var(--line)' }}></div><span style={{ fontSize:12,color:'var(--ink-faint)' }}>or</span><div style={{ flex:1,height:1,background:'var(--line)' }}></div>
              </div>
              <button className="btn btn-outline" style={{ width:'100%',justifyContent:'center' }} onClick={() => { setShowLogin(false); setBookConfirmed(true); }}>Continue as guest</button>
              <p style={{ fontSize:12,color:'var(--ink-faint)',textAlign:'center',marginTop:16 }}>No account? <span style={{ color:'var(--gold-deep)',cursor:'pointer',textDecoration:'underline' }}>Create one free</span></p>
            </div>
          </div>
        )}
      </section>
    </>);

}

/* ---------- Contact ---------- */
function ContactPage() {
  const { toast } = useStore();
  const [sent, setSent] = useState(false);
  return (
    <>
      <PageHero eyebrow="Say hello" title={<>Let's <em style={{ fontStyle: 'italic' }}>talk</em></>} sub="Questions about an order, a blend, or buying by the carton? Send us a message — we’d love to hear from you." />
      <section className="container wide" style={{ padding: 'clamp(48px,7vw,90px) var(--gutter)' }}>
        <div className="contact-grid">
          <div>
            {[[I.pin, 'Our stores', 'Surulere, Lagos\nWuye, Abuja\nKano'], [I.chat, 'Order support', 'Send us a message\nMon–Sat'], [I.globe, 'Delivery', 'Nationwide courier from all three stores']].map(([Ic, t, s], i) =>
            <div key={i} style={{ display: 'flex', gap: 16, padding: '20px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
                <span style={{ width: 48, height: 48, flexShrink: 0, borderRadius: 100, background: 'var(--cream-deep)', color: 'var(--gold-deep)', display: 'grid', placeItems: 'center' }}>{Ic({ width: 22, height: 22 })}</span>
                <div><h3 style={{ fontSize: 21, marginBottom: 4 }}>{t}</h3><p style={{ fontSize: 14.5, color: 'var(--ink-soft)', whiteSpace: 'pre-line', lineHeight: 1.5 }}>{s}</p></div>
              </div>
            )}
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href="https://instagram.com/incensepalaceandperfumes" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="btn btn-outline btn-sm"><I.ig width={17} height={17} /> Instagram</a>
            </div>
          </div>
          <div style={{ background: 'var(--ivory)', borderRadius: 'var(--r-xl)', padding: 'clamp(24px,4vw,40px)', boxShadow: 'var(--shadow-sm)' }}>
            {sent ?
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ width: 60, height: 60, borderRadius: 100, background: 'var(--sage)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><I.check width={30} height={30} /></div>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 26, fontStyle: 'italic' }}>Message sent — talk soon!</p>
              </div> :

            <form onSubmit={(e) => {e.preventDefault();setSent(true);toast('Message sent', 'heart');}} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <h3 style={{ fontSize: 26 }}>Send a message</h3>
                <div className="form-row">
                  <div className="field"><label>Name</label><input className="input" required /></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required /></div>
                </div>
                <div className="field"><label>Subject</label><input className="input" /></div>
                <div className="field"><label>Message</label><textarea className="input" rows="5" required></textarea></div>
                <button className="btn btn-gold btn-lg" type="submit">Send message</button>
              </form>
            }
          </div>
        </div>
      </section>
    </>);

}

/* ---------- Policies ---------- */
const POLICIES = {
  shipping: { title: 'Shipping Policy', body: [['Lagos, Abuja, Kano & nationwide', 'Orders dispatch within 1–3 working days from the nearest store. Complimentary delivery on orders over ₦100,000; a flat ₦3,500 applies below that. Nationwide courier is calculated at checkout.'], ['Store pickup', 'Pick up free from Surulere in Lagos, Wuye in Abuja or our Kano store. Send us a message and we will set your order aside.'], ['Packing', 'Jars are sealed and boxed, oils and sprays wrapped separately. Charcoal ships in its own carton so nothing else picks up the smell.']] },
  revisions: { title: 'Returns Policy', body: [['Sealed products', 'Unopened jars, bottles and charcoal cartons can be returned within 7 days of delivery in their original packaging.'], ['Opened fragrance', 'For hygiene reasons we cannot accept opened oils, sprays or roll-ons unless the product is faulty or the wrong item was sent.'], ['Faults and breakages', 'Tell us within 48 hours with a photo and we will replace or refund — including anything that arrives leaking or broken.']] },
  privacy: { title: 'Privacy Policy', body: [['What we collect', 'We collect only what we need to fulfil your order: name, contact details, delivery address and payment confirmation.'], ['How we use it', 'To process orders, arrange delivery and — only with consent — send you restock news. We never sell your data.'], ['Your rights', 'You may request access to, or deletion of, your data at any time by sending us a message.']] },
  care: { title: 'Burning & Care', body: [['Burning incense', 'Use a small amount on lit charcoal or in an electric burner, in a ventilated room. Never leave a lit burner unattended and keep it away from children, curtains and aerosols.'], ['Storing incense', 'Keep the lid closed and store away from direct sunlight and damp. Colour and grind vary slightly batch to batch; the scent does not.'], ['Oils, sprays and wardrobe balls', 'Store oils away from heat. Do not spray air freshener directly onto delicate fabric or polished wood. Leave the foil on wardrobe balls and tuck them between folded clothes.']] }
};

function PolicyPage({ params }) {
  const { nav } = useStore();
  const id = params.id || 'shipping';
  const pol = POLICIES[id] || POLICIES.shipping;
  return (
    <>
      <PageHero eyebrow="Policies" title={pol.title} variant="ph-sage" />
      <section className="container wide" style={{ padding: 'clamp(40px,6vw,72px) var(--gutter) clamp(64px,9vw,110px)' }}>
        <div className="policy-layout">
          <aside>
            <p className="eyebrow" style={{ marginBottom: 14 }}>All policies</p>
            <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {Object.entries(POLICIES).map(([k, v]) =>
              <button key={k} onClick={() => nav('policy', { id: k })} style={{ textAlign: 'left', padding: '11px 14px', borderRadius: 'var(--r-md)', fontSize: 14.5, fontWeight: 500, background: k === id ? 'var(--cream-deep)' : 'transparent', color: k === id ? 'var(--ink)' : 'var(--ink-soft)', transition: 'all .2s' }}>{v.title}</button>
              )}
            </nav>
          </aside>
          <div style={{ maxWidth: 680 }}>
            {pol.body.map(([h, t], i) =>
            <div key={i} style={{ marginBottom: 32 }}>
                <h3 style={{ fontSize: 26, marginBottom: 10 }}>{h}</h3>
                <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.75 }}>{t}</p>
              </div>
            )}
            <div style={{ background: 'var(--cream-deep)', borderRadius: 'var(--r-lg)', padding: 24, marginTop: 8, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ flex: 1, minWidth: 200, fontSize: 15 }}>Still have a question? We're here to help.</span>
              <button className="btn btn-primary btn-sm" onClick={() => nav('contact')}>Contact us</button>
            </div>
          </div>
        </div>
      </section>
    </>);

}

Object.assign(window, { AboutPage, ServicesPage, ContactPage, PolicyPage });