/* ============================================================
   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={<>Two sister brands, <em style={{ fontStyle: 'italic' }}>one shared purpose</em></>} sub="Creating beautiful pieces that keep memories alive forever. Through handcrafted party décor and thoughtfully designed baby journals, we help you hold onto every precious moment." />

      <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.founder} label="Belle & Bloom Designs — Our Story" 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' }}>Belle &amp; Bloom Designs</h2>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>We are Belle and Bloom Designs — home to two sister brands united by one purpose: crafting beautiful, meaningful pieces that keep your most precious memories alive.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Through <strong>The Belle and Bloom Company</strong>, we handcraft bespoke party favours, props and décor that transform every celebration into a lasting experience. With <strong>Belle Journals</strong>, we help parents savour life's most tender milestones through thoughtfully designed baby journals that grow alongside your little one, holding every memory close.</p>
            <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.75, marginBottom: 16 }}>Everything we make is filled with care, love and purpose — whether you're a professional event planner, a parent planning your child's big day, or simply someone who wants to hold onto a precious moment a little longer.</p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 24, color: 'var(--ink)', marginTop: 24 }}>“With us, your ideas don’t just come to life — they bloom into something unforgettable.”</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 }}>Our Blooming Promise</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', textAlign: 'center', marginBottom: 12 }}>More than makers — <em style={{ fontStyle: 'italic' }}>memory builders</em></h2>
          <p style={{ textAlign: 'center', fontSize: 16, color: 'var(--ink-soft)', maxWidth: 580, margin: '0 auto 48px', lineHeight: 1.7 }}>Because blooming never ends, we’ll keep crafting beautiful, personalised pieces that turn your most special moments into memories that last a lifetime.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 }}>
            {[[I.heart, 'Made with Heart', 'Every piece is handcrafted with love, care and intention. Never mass-produced — always personal.'], [I.gift, 'Uniquely Yours', 'Custom designs that reflect your story, your style and your celebration. No two pieces are ever the same.'], [I.globe, 'Always On Time', 'We know how much timing matters, and we treat your deadlines as our own — whether in Lagos or across the world.'], [I.check, 'Joy in Every Detail', 'From the first sketch to the final reveal and packaging, we want you to smile at every single step.']].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)' }}>Ready to make it Unforgettable?</h2>
        <p className="muted" style={{ marginTop: 12, fontSize: 16.5 }}>we’d love to help you create something unforgettable.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}>Shop</button>
          <button className="btn btn-outline btn-lg" onClick={() => nav('services')}>Our services</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 — any available designer','Party Favour Bundle','Full Party Bundle (Favours + Props)','Balloon Garland & Décor','Invitation Suite','Custom / Bespoke Commission'];
  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(138,24,192,.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="Bespoke Services" title={<>Custom Events &amp; <em style={{ fontStyle: 'italic' }}>Styling</em> Services</>} sub="Our catalogue is simply your starting point — your possibilities are limitless. Every piece can be tailored in design, colour and finish to perfectly reflect your vision." 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 }}>
          {[
          ['Children\u2019s Party Styling', 'ph-blush', 'We design, deliver and install complete themed party setups in Lagos — backdrop, balloon installation, table styling, props and signage. You arrive to a finished party.', ['Mood-board & concept design', 'Prop sourcing & custom fabrication', 'Full install, styling & strike']],
          ['Custom Design & Commissions', 'ph-sage', "Have a theme in mind that you don't see in the shop? We take fully custom commissions — any character, any theme, any size. Props, boxes, invitations and full bundles.", ['Free discovery call', 'Fully custom design & production', 'Rush 48-hr turnaround available']],
          ['Interior Design', 'ph-gold', 'From concept to completion, we transform living spaces into beautiful, intentional environments. Whether you\'re refreshing a room or styling an entire home, we bring warmth, elegance and a personal touch to every space.', ['In-home consultation & mood board', 'Furniture sourcing & space planning', 'Styling, installation & final reveal']]].
          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.nursery : i === 1 ? IMG.services.interior : IMG.social[2]} 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', 'Consultation', 'Tell us your theme, guest count & date.'], ['02', 'Concept', 'We design a mood-board & quote within 24 hrs.'], ['03', 'Curate', 'We hand-craft every prop, box & invite.'], ['04', 'Install', 'We deliver, install & you just celebrate.']].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 session</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,48px)' }}>Enquire about a <em style={{ fontStyle: 'italic' }}>project</em></h2>
          <p className="muted" style={{ marginTop: 10 }}>Pick a bundle, 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(138,24,192,.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 consultation is booked for <strong>{fmtDate(bookDate)}</strong> at <strong>{bookTime}</strong>. Expect a WhatsApp confirmation 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(42,17,51,.07)' }}>

            {/* Widget header with step tabs */}
            <div style={{ background: 'linear-gradient(135deg,var(--ink),#4A1E5E)', 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 session</p>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 18, color: '#fff' }}>Book a design consultation</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 }}>Service picker <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 a bundle (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(138,24,192,.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(138,24,192,.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','Design consultation (30 min)'],['Bundle interest',bookBundle||'No preference'],['Date',fmtDate(bookDate)],['Time',bookTime+' WAT (Lagos)'],['Format','WhatsApp 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)' }}>Consultation fee</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 consultation fee is deducted from your final order total.</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(18,6,26,.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(42,17,51,.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 consultation 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 custom commission, or a wholesale enquiry? We’d love to hear from you. We welcome your inspiration images — each creation will be elevated with our signature artistry." />
      <section className="container wide" style={{ padding: 'clamp(48px,7vw,90px) var(--gutter)' }}>
        <div className="contact-grid">
          <div>
            {[[I.pin, 'Find us', 'Lekki Phase 1, Lagos, Nigeria\nBy appointment'], [I.truck, 'Order support', 'hello@thebloomcompany.com\nMon–Sat · 9am–6pm WAT'], [I.globe, 'Diaspora orders', 'We ship to the UK, US, Canada & beyond']].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="#" aria-label="Instagram" className="btn btn-outline btn-sm"><I.ig width={17} height={17} /> Instagram</a>
              <a href="#" aria-label="TikTok" className="btn btn-outline btn-sm"><I.tiktok width={15} height={15} /> TikTok</a>
              <a href="#" aria-label="Pinterest" className="btn btn-outline btn-sm"><I.pin width={17} height={17} /> Pinterest</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 & nationwide', 'Orders dispatch within 3–5 working days. Complimentary delivery within Lagos on orders over ₦150,000; a flat ₦6,500 applies below that. Nationwide courier is calculated at checkout.'], ['International', 'We ship to the UK, US, Canada and beyond via tracked courier. Diaspora kits are flat-packed for safe travel. Duties and taxes may apply on arrival and are the recipient\u2019s responsibility.'], ['Tracking', 'Every order includes tracking. Follow your order live from your account — Order Received through to Delivered.']] },
  revisions: { title: 'Revisions Policy', body: [['Custom design proofs', 'Personalised and custom orders include two complimentary rounds of digital proofs before production begins.'], ['Additional revisions', 'Further revisions are billed at a modest design rate, quoted upfront. We won\u2019t proceed without your approval.'], ['Approval', 'Production only begins once you\u2019ve approved your final proof in writing — no surprises.']] },
  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 our newsletter. We never sell your data.'], ['Your rights', 'You may request access to, or deletion of, your data at any time by emailing hello@thebloomcompany.com.']] },
  care: { title: 'Craft & Product Care', body: [['Edible treats', 'Best enjoyed within 14 days. Store sealed at room temperature, away from heat and direct sunlight.'], ['Linens & textiles', 'Cool hand-wash or gentle machine cycle; warm iron. Store folded away from damp.'], ['Props & decor', 'Wipe acrylic and signage with a soft, dry cloth. Keep balloon garlands out of direct sun to preserve colour.']] }
};

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 });