// Page components for The Wedding Haven

// ============ HOME ============
function HomePage({ t, lang, navigate, onEnquire }) {
  const heroes = ['stock-decor-arch-beach.webp', 'stock-decor-floral-arch.webp', 'stock-decor-tablescape-candles.webp'];
  const [heroIdx, setHeroIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setHeroIdx(i => (i + 1) % heroes.length), 7500);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: 'relative', height: '100vh', minHeight: 720, overflow: 'hidden', color: '#F6F1EA' }}>
        {heroes.map((src, i) => (
          <div key={src} style={{
            position: 'absolute', inset: 0, opacity: i === heroIdx ? 1 : 0,
            transition: 'opacity 2200ms ease-in-out',
          }}>
            <img src={`media/${src}`} alt="" style={{
              width: '100%', height: '100%', objectFit: 'cover',
              transform: i === heroIdx ? 'scale(1.05)' : 'scale(1)',
              transition: 'transform 9000ms ease-out',
            }} />
          </div>
        ))}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to bottom, rgba(20,15,12,0.45) 0%, rgba(20,15,12,0.15) 30%, rgba(20,15,12,0.25) 60%, rgba(20,15,12,0.7) 100%)',
        }} />
        <div style={{
          position: 'relative', height: '100%', maxWidth: 1480, margin: '0 auto',
          padding: '0 40px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          paddingBottom: 100,
        }}>
          <div style={{ maxWidth: 880 }}>
            <Eyebrow color="#E5C898">{t.hero.eyebrow}</Eyebrow>
            <h1 className="serif" style={{
              fontSize: 'clamp(54px, 7.5vw, 116px)', fontWeight: 300, lineHeight: 0.98,
              letterSpacing: '-0.018em', margin: '28px 0 0',
            }}>
              {t.hero.title[0]}<br />
              <em style={{ fontStyle: 'italic', fontWeight: 300 }}>{t.hero.title[1]}</em>
            </h1>
            <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.6, maxWidth: 560, opacity: 0.92 }}>{t.hero.sub}</p>
            <div style={{ marginTop: 38, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <ButtonPrimary dark large onClick={onEnquire}>{t.hero.ctaA}</ButtonPrimary>
              <ButtonGhost dark large onClick={() => navigate('weddings')}>{t.hero.ctaB}</ButtonGhost>
            </div>
          </div>
        </div>
        {/* Slide indicators */}
        <div style={{
          position: 'absolute', bottom: 40, right: 40, display: 'flex', gap: 8, alignItems: 'center',
        }}>
          {heroes.map((_, i) => (
            <button key={i} onClick={() => setHeroIdx(i)} style={{
              width: i === heroIdx ? 28 : 8, height: 2,
              background: i === heroIdx ? '#F6F1EA' : 'rgba(246,241,234,0.4)',
              border: 'none', padding: 0, cursor: 'pointer', transition: 'all 400ms',
            }} aria-label={`Slide ${i+1}`} />
          ))}
        </div>
        {/* Scroll indicator */}
        <div style={{
          position: 'absolute', bottom: 40, left: 40,
          fontSize: 10.5, letterSpacing: '0.32em', textTransform: 'uppercase', opacity: 0.75,
          writingMode: 'vertical-rl', transform: 'rotate(180deg)',
        }}>{t.hero.scroll} ↑</div>
      </section>

      {/* FOUNDER NOTE */}
      <Section tone="paper">
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>{t.intro.eyebrow}</Eyebrow>
          <p className="serif" style={{
            fontSize: 'clamp(28px, 3vw, 42px)', lineHeight: 1.35, fontWeight: 400,
            margin: '32px 0 0', letterSpacing: '-0.008em', color: 'var(--ink)',
          }}>"{t.intro.body}"</p>
          <div style={{ marginTop: 32, fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--muted)' }}>
            {t.intro.sign}
          </div>
        </div>
      </Section>

      {/* SELECTED WEDDINGS */}
      <Section tone="cream">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 60 }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>{t.weddings.eyebrow}</Eyebrow>
            <H2>{t.weddings.title}</H2>
            <p style={{ marginTop: 22, fontSize: 16, color: 'var(--muted)', lineHeight: 1.65, maxWidth: 540 }}>{t.weddings.sub}</p>
          </div>
          <ButtonGhost onClick={() => navigate('weddings')}>{t.weddings.seeAll} →</ButtonGhost>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
          {WEDDINGS.slice(0, 3).map(w => (
            <WeddingCard key={w.id} w={w} lang={lang} t={t} onOpen={(id) => navigate('detail', { id })} />
          ))}
        </div>
      </Section>

      {/* WHY US */}
      <Section dark>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Eyebrow color="#E5C898">{t.why.eyebrow}</Eyebrow>
            <H2 style={{ marginTop: 20 }}>Built for couples planning across borders.</H2>
            <p style={{ marginTop: 24, fontSize: 15.5, lineHeight: 1.7, opacity: 0.7, maxWidth: 380 }}>
              Four reasons couples in Dubai, Riyadh, London and Toronto have trusted us with their day since 2015.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '52px 48px' }}>
            {t.why.items.map((it, i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(246,241,234,0.18)', paddingTop: 28 }}>
                <div className="serif" style={{ fontSize: 32, color: 'var(--champagne)', fontWeight: 300, fontStyle: 'italic' }}>{it.k}</div>
                <div className="serif" style={{ fontSize: 24, marginTop: 14, lineHeight: 1.25, fontWeight: 400 }}>{it.t}</div>
                <p style={{ fontSize: 14.5, lineHeight: 1.7, marginTop: 12, opacity: 0.7 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* SERVICES */}
      <Section tone="paper">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
          <Eyebrow>{t.services.eyebrow}</Eyebrow>
          <H2>{t.services.title}</H2>
          <p style={{ marginTop: 22, fontSize: 16, color: 'var(--muted)', lineHeight: 1.65 }}>{t.services.sub}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {t.services.items.map((s, i) => (
            <article key={i} className="service-card" style={{ cursor: 'pointer' }} onClick={() => navigate('services')}>
              <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--cream)' }}>
                <img src={`media/${s.img}`} alt="" style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  transition: 'transform 1200ms cubic-bezier(.22,.61,.36,1)',
                }} className="service-img" />
              </div>
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="serif" style={{ color: 'var(--champagne)', fontSize: 22, fontStyle: 'italic', fontWeight: 300 }}>0{i+1}</span>
                <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.25, fontWeight: 400, margin: 0 }}>{s.t}</h3>
              </div>
              <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.65, color: 'var(--muted)' }}>{s.d}</p>
            </article>
          ))}
        </div>
      </Section>

      {/* EDITORIAL SPLIT */}
      <Section tone="cream">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <Img src="real-wedding-sarah-paul.webp" ratio="5 / 6" />
            <div style={{
              position: 'absolute', bottom: -28, right: lang === 'ar' ? 'auto' : -28, left: lang === 'ar' ? -28 : 'auto',
              background: 'var(--paper)', padding: '22px 26px', maxWidth: 280,
              borderTop: '2px solid var(--champagne)',
            }}>
              <div className="mono-eyebrow" style={{ display: 'block' }}>The book</div>
              <div className="serif" style={{ fontSize: 19, marginTop: 8, lineHeight: 1.35 }}>{t.about.book.title}</div>
            </div>
          </div>
          <div style={{ paddingLeft: lang === 'ar' ? 0 : 20, paddingRight: lang === 'ar' ? 20 : 0 }}>
            <Eyebrow>{t.about.eyebrow}</Eyebrow>
            <H2>{t.about.title}</H2>
            <p style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.75, color: 'var(--muted)' }}>{t.about.body[0]}</p>
            <p style={{ marginTop: 16, fontSize: 16.5, lineHeight: 1.75, color: 'var(--muted)' }}>{t.about.body[1]}</p>
            <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {t.about.creds.map(c => (
                <span key={c} style={{
                  padding: '8px 14px', border: '1px solid var(--line)', borderRadius: 999,
                  fontSize: 11.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)',
                }}>{c}</span>
              ))}
            </div>
            <div style={{ marginTop: 28 }}>
              <ButtonGhost onClick={() => navigate('about')}>{t.nav.about} →</ButtonGhost>
            </div>
          </div>
        </div>
      </Section>

      {/* ENQUIRY BAND */}
      <Section dark style={{ textAlign: 'center' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <Eyebrow color="#E5C898">{t.band.whisper}</Eyebrow>
          <H2 style={{ marginTop: 24 }}>{t.band.title}</H2>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, opacity: 0.75 }}>{t.band.sub}</p>
          <div style={{ marginTop: 38, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <ButtonPrimary dark large onClick={onEnquire}>{t.band.cta}</ButtonPrimary>
            <ButtonGhost dark large onClick={() => navigate('weddings')}>{t.weddings.seeAll}</ButtonGhost>
          </div>
        </div>
      </Section>
    </div>
  );
}

// ============ REAL WEDDINGS ============
function WeddingsPage({ t, lang, navigate }) {
  const [filter, setFilter] = useState('all');
  const filtered = WEDDINGS.filter(w => filter === 'all' || w.region === filter);
  return (
    <div className="page-enter">
      <PageHero t={t} eyebrow={t.weddings.eyebrow} title={t.weddings.title} sub={t.weddings.sub} />
      <Section tone="paper">
        {/* Filters */}
        <div style={{
          display: 'flex', gap: 8, marginBottom: 50, borderBottom: '1px solid var(--line)', paddingBottom: 18,
          alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[
              { k: 'all', label: t.weddings.all },
              { k: 'uae', label: t.weddings.uae },
              { k: 'intl', label: t.weddings.intl },
            ].map(f => (
              <button key={f.k} onClick={() => setFilter(f.k)} style={{
                padding: '8px 16px', borderRadius: 999, fontSize: 12.5,
                background: filter === f.k ? 'var(--ink)' : 'transparent',
                color: filter === f.k ? 'var(--paper)' : 'var(--ink)',
                border: `1px solid ${filter === f.k ? 'var(--ink)' : 'var(--line)'}`,
                cursor: 'pointer', letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>{f.label}</button>
            ))}
          </div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
            {filtered.length} {filtered.length === 1 ? 'wedding' : 'weddings'}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '60px 36px' }}>
          {filtered.map(w => (
            <WeddingCard key={w.id} w={w} lang={lang} t={t} onOpen={(id) => navigate('detail', { id })} />
          ))}
        </div>
        <div style={{ marginTop: 80, padding: 32, background: 'var(--cream)', borderLeft: '3px solid var(--champagne)', maxWidth: 720 }}>
          <div className="mono-eyebrow" style={{ display: 'block' }}>A note on consent</div>
          <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.65, color: 'var(--muted)' }}>
            We only publish a wedding once the couple has given written consent and the photographer has confirmed usage rights and credit. Some of the most beautiful weddings we have planned will never appear here — and we are at peace with that.
          </p>
        </div>
      </Section>
    </div>
  );
}

function PageHero({ t, eyebrow, title, sub, image }) {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60, background: 'var(--paper)' }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ maxWidth: 880 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <H2 style={{ fontSize: 'clamp(44px, 6vw, 86px)', marginTop: 24 }}>{title}</H2>
          {sub ? <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.65, color: 'var(--muted)', maxWidth: 620 }}>{sub}</p> : null}
        </div>
      </div>
    </section>
  );
}

// ============ WEDDING DETAIL ============
function WeddingDetailPage({ t, lang, navigate, id, onEnquire }) {
  const w = WEDDINGS.find(x => x.id === id) || WEDDINGS[0];
  if (w.status === 'pending') {
    return <div style={{ padding: 200, textAlign: 'center' }}>Pending</div>;
  }
  return (
    <div className="page-enter">
      {/* Cover */}
      <section style={{ position: 'relative', height: '88vh', minHeight: 640, overflow: 'hidden', color: '#F6F1EA' }}>
        <img src={`media/${w.cover}`} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(20,15,12,0.4) 0%, transparent 35%, rgba(20,15,12,0.75))' }} />
        <div style={{
          position: 'absolute', bottom: 80, left: 0, right: 0, maxWidth: 1480, margin: '0 auto', padding: '0 40px',
        }}>
          <button onClick={() => navigate('weddings')} style={{
            background: 'transparent', border: 'none', color: '#F6F1EA',
            fontSize: 11.5, letterSpacing: '0.22em', textTransform: 'uppercase', padding: 0,
            cursor: 'pointer', opacity: 0.85, marginBottom: 28,
          }}>← {t.detail.back}</button>
          <Eyebrow color="#E5C898">{w.style} · {lang === 'ar' ? w.seasonAr : w.seasonEn}</Eyebrow>
          <h1 className="serif" style={{
            fontSize: 'clamp(48px, 6.5vw, 96px)', fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em',
            margin: '24px 0 0', maxWidth: 1100,
          }}>
            <em style={{ fontStyle: 'italic' }}>{lang === 'ar' ? w.locationAr : w.locationEn}</em>
          </h1>
        </div>
      </section>

      {/* Story */}
      <Section tone="paper">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, maxWidth: 1100, margin: '0 auto' }}>
          <div>
            <div className="mono-eyebrow" style={{ display: 'block' }}>{t.detail.ofTwelve}</div>
            <div style={{ marginTop: 20, fontSize: 13.5, lineHeight: 1.9, color: 'var(--muted)' }}>
              <div><strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{lang === 'ar' ? 'الموقع' : 'Location'}</strong><br />{lang === 'ar' ? w.locationAr : w.locationEn}</div>
              <div style={{ marginTop: 18 }}><strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{lang === 'ar' ? 'الموسم' : 'Season'}</strong><br />{lang === 'ar' ? w.seasonAr : w.seasonEn}</div>
              <div style={{ marginTop: 18 }}><strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{lang === 'ar' ? 'الطابع' : 'Style'}</strong><br />{w.style}</div>
              <div style={{ marginTop: 18 }}><strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{t.detail.credit}</strong><br /><span style={{ fontStyle: 'italic' }}>{w.photographer}</span></div>
            </div>
          </div>
          <div>
            {(lang === 'ar' ? w.storyAr : w.storyEn).map((p, i) => (
              <p key={i} className="serif" style={{
                fontSize: i === 0 ? 26 : 20, lineHeight: 1.55, fontWeight: 400,
                margin: i === 0 ? '0' : '24px 0 0', color: 'var(--ink)',
                letterSpacing: '-0.003em',
              }}>{p}</p>
            ))}
          </div>
        </div>
      </Section>

      {/* Gallery */}
      <Section tone="cream" style={{ paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }}>
          <div style={{ gridColumn: 'span 8' }}><Img src={w.gallery[0]} ratio="3 / 2" /></div>
          <div style={{ gridColumn: 'span 4' }}><Img src={w.gallery[1] || w.gallery[0]} ratio="3 / 4" /></div>
          <div style={{ gridColumn: 'span 4' }}><Img src={w.gallery[2] || w.gallery[0]} ratio="4 / 5" /></div>
          <div style={{ gridColumn: 'span 4' }}><Img src={w.gallery[3] || w.gallery[0]} ratio="4 / 5" /></div>
          <div style={{ gridColumn: 'span 4' }}><Img src={w.gallery[4] || w.gallery[0]} ratio="4 / 5" /></div>
          {w.gallery[5] ? <div style={{ gridColumn: 'span 12' }}><Img src={w.gallery[5]} ratio="16 / 7" /></div> : null}
        </div>
        <div style={{ marginTop: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', textAlign: 'center' }}>
          {t.detail.credit} — <span style={{ fontStyle: 'italic' }}>{w.photographer}</span>
        </div>
      </Section>

      {/* CTA */}
      <Section dark style={{ textAlign: 'center' }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <H2>{t.detail.planLike}</H2>
          <p style={{ marginTop: 22, fontSize: 17, opacity: 0.7 }}>{t.band.sub}</p>
          <div style={{ marginTop: 32 }}>
            <ButtonPrimary dark large onClick={onEnquire}>{t.band.cta}</ButtonPrimary>
          </div>
        </div>
      </Section>
    </div>
  );
}

// ============ SERVICES ============
function ServicesPage({ t, lang, onEnquire }) {
  return (
    <div className="page-enter">
      <PageHero t={t} eyebrow={t.services.eyebrow} title={t.services.title} sub={t.services.sub} />
      <Section tone="paper" style={{ paddingTop: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
          {t.services.items.map((s, i) => (
            <article key={i} style={{
              display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1.1fr 1fr' : '1fr 1.1fr',
              gap: 80, alignItems: 'center',
            }}>
              <div style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <Img src={s.img} ratio="5 / 4" />
              </div>
              <div>
                <div className="serif" style={{
                  fontSize: 80, lineHeight: 1, color: 'var(--blush)', fontWeight: 300, fontStyle: 'italic',
                }}>0{i+1}</div>
                <h3 className="serif" style={{ fontSize: 'clamp(34px, 3.5vw, 46px)', lineHeight: 1.1, fontWeight: 400, margin: '12px 0 0', letterSpacing: '-0.01em' }}>{s.t}</h3>
                <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', maxWidth: 480 }}>{s.d}</p>
                <ul style={{ marginTop: 24, paddingLeft: 0, listStyle: 'none', fontSize: 14.5, color: 'var(--ink)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {['Venue & destination scouting', 'Vendor curation & contracts', 'Design & creative direction', 'Production & coordination'].slice(0, 3 + (i % 2)).map(item => (
                    <li key={item} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                      <span style={{ width: 18, height: 1, background: 'var(--champagne)' }} />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </Section>

      <Section tone="cream">
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>{lang === 'ar' ? 'الباقات والاستثمار' : 'Packages & investment'}</Eyebrow>
          <H2 style={{ marginTop: 18 }}>{lang === 'ar' ? 'كلّ حفل زفافٍ مختلف — ولذلك العرض كذلك.' : 'Every wedding is different. So is every quote.'}</H2>
          <p style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.7, color: 'var(--muted)' }}>
            {lang === 'ar'
              ? 'لا نُدرج أسعاراً ثابتة لأنّنا لا نعمل بقوالب جاهزة. بعد جلسة الاستشارة الأولى نُعدّ عرضاً مخصصاً يعكس مكان زفافكما، عدد ضيوفكما، ونطاق ما تحتاجانه منا — لا أكثر، لا أقلّ.'
              : 'We don\'t publish fixed packages, because we don\'t plan from templates. After your first consultation we prepare a bespoke proposal that reflects your venue, your guest count, and the scope you need from us — nothing more, nothing less.'}
          </p>
          <div style={{ marginTop: 36 }}>
            <ButtonPrimary large onClick={onEnquire}>{t.services.enquireCta}</ButtonPrimary>
          </div>
        </div>
      </Section>
    </div>
  );
}

// ============ ABOUT ============
function AboutPage({ t, lang, onEnquire, navigate }) {
  return (
    <div className="page-enter">
      <PageHero t={t} eyebrow={t.about.eyebrow} title={t.about.title} />
      <Section tone="paper" style={{ paddingTop: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{
              aspectRatio: '4 / 5', background: 'var(--cream)',
              border: '1px solid var(--line)', position: 'relative',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {/* Founder portrait placeholder */}
              <div style={{ textAlign: 'center', padding: 40 }}>
                <Logomark color="var(--champagne)" size={64} />
                <div className="mono-eyebrow" style={{ display: 'block', marginTop: 18 }}>Founder portrait</div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, fontStyle: 'italic' }}>Awaiting hi-res from client</div>
              </div>
            </div>
            <div style={{ marginTop: 18, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)' }}>
              May Abu Jaber-Halasa · Founder
            </div>
          </div>
          <div>
            {t.about.body.map((p, i) => (
              <p key={i} style={{
                fontSize: i === 0 ? 19 : 16.5, lineHeight: 1.7,
                color: i === 0 ? 'var(--ink)' : 'var(--muted)',
                margin: i === 0 ? '0' : '20px 0 0',
              }}>{p}</p>
            ))}
            <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              {[
                { t: 'WPIC', s: 'Wedding Planners Institute of Canada' },
                { t: 'TICO', s: 'Travel Industry Council of Ontario' },
              ].map(c => (
                <div key={c.t} style={{ padding: 22, border: '1px solid var(--line)', borderRadius: 4 }}>
                  <div className="serif" style={{ fontSize: 28, fontStyle: 'italic', color: 'var(--champagne-deep)', fontWeight: 300 }}>{c.t}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{c.s}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <div className="mono-eyebrow" style={{ display: 'block' }}>{lang === 'ar' ? 'نخطّط بـ' : 'We plan in'}</div>
              <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {t.about.langs.map(l => (
                  <span key={l} style={{
                    padding: '7px 14px', borderRadius: 999,
                    fontSize: 13, background: 'var(--cream)', color: 'var(--ink)',
                  }}>{l}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Book section */}
      <Section tone="cream">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
          <div style={{
            aspectRatio: '3 / 4', background: 'linear-gradient(135deg, #2A2622 0%, #4A3F35 100%)',
            position: 'relative', overflow: 'hidden', boxShadow: '0 30px 60px -30px rgba(0,0,0,0.4)',
            color: '#F6F1EA', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            padding: '36px 32px',
          }}>
            <div style={{ width: 32, height: 32, border: '1px solid var(--champagne)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 6, height: 6, background: 'var(--champagne)', borderRadius: '50%' }} />
            </div>
            <div>
              <div className="mono-eyebrow" style={{ color: 'var(--champagne)' }}>The Wedding Haven</div>
              <div className="serif" style={{ fontSize: 30, lineHeight: 1.15, marginTop: 22, fontStyle: 'italic', fontWeight: 300 }}>
                A Guide to<br />Destination<br />Weddings
              </div>
              <div style={{ marginTop: 22, fontSize: 12, opacity: 0.7, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                May Abu Jaber-Halasa
              </div>
            </div>
            <div style={{ fontSize: 10, opacity: 0.5, letterSpacing: '0.16em', textTransform: 'uppercase' }}>ISBN 978-0-46417231-4</div>
          </div>
          <div>
            <Eyebrow>{lang === 'ar' ? 'الكتاب' : 'The book'}</Eyebrow>
            <H2 style={{ marginTop: 18 }}>{t.about.book.title}</H2>
            <p style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.7, color: 'var(--muted)', maxWidth: 520 }}>
              {lang === 'ar'
                ? 'كتبَتْها ماي عام 2018 بعد عقدٍ من تخطيط حفلات الزفاف عبر الحدود. اعتبره الدليل الذي نعمل به نحن — لكن مفتوحٌ لكم لتقرأوه قبل المحادثة الأولى.'
                : 'May wrote it in 2018, after a decade of planning weddings across borders. Think of it as the playbook we plan from — but yours to read before our first conversation.'}
            </p>
            <div style={{ marginTop: 28 }}>
              <ButtonGhost>{t.about.book.cta} →</ButtonGhost>
            </div>
          </div>
        </div>
      </Section>

      <Section dark style={{ textAlign: 'center' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <H2>{t.band.title}</H2>
          <div style={{ marginTop: 32 }}>
            <ButtonPrimary dark large onClick={onEnquire}>{t.band.cta}</ButtonPrimary>
          </div>
        </div>
      </Section>
    </div>
  );
}

// ============ CONTACT ============
function ContactPage({ t, lang }) {
  return (
    <div className="page-enter">
      <PageHero t={t} eyebrow={t.contact.eyebrow} title={t.contact.title} sub={t.contact.sub} />
      <Section tone="paper" style={{ paddingTop: 60 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 100, alignItems: 'start' }}>
          <EnquiryForm t={t} lang={lang} />
          <aside style={{
            padding: 36, background: 'var(--cream)', border: '1px solid var(--line)',
          }}>
            <Eyebrow>{t.contact.info.eyebrow}</Eyebrow>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 26 }}>
              <InfoBlock label={t.contact.info.phoneLabel} value={t.contact.info.phone} href={`tel:+971557471555`} />
              <InfoBlock label={t.contact.info.emailLabel} value={t.contact.info.email} note={t.contact.info.emailNote} />
              <InfoBlock label={t.contact.info.hoursLabel} value={t.contact.info.hours} note={t.contact.info.replies} />
            </div>
            <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
              <div className="mono-eyebrow" style={{ display: 'block' }}>{lang === 'ar' ? 'نخدم' : 'We serve'}</div>
              <p style={{ marginTop: 12, fontSize: 14.5, lineHeight: 1.65, color: 'var(--muted)' }}>
                {lang === 'ar'
                  ? 'دولة الإمارات العربية المتحدة وما حولها — ووجهات حول العالم تشمل قبرص، إيطاليا، اليونان، الأردن، المكسيك والكاريبي.'
                  : 'The UAE and the wider Gulf — and destinations including Cyprus, Italy, Greece, Jordan, Mexico and the Caribbean.'}
              </p>
            </div>
          </aside>
        </div>
      </Section>
    </div>
  );
}
function InfoBlock({ label, value, note, href }) {
  return (
    <div>
      <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)' }}>{label}</div>
      {href
        ? <a href={href} className="serif" style={{ display: 'block', fontSize: 22, marginTop: 6, color: 'var(--ink)', borderBottom: '1px solid transparent', transition: 'border-color 200ms' }}
            onMouseEnter={e => e.currentTarget.style.borderBottomColor = 'var(--champagne)'} onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}>{value}</a>
        : <div className="serif" style={{ fontSize: 22, marginTop: 6 }}>{value}</div>
      }
      {note ? <div style={{ marginTop: 4, fontSize: 12.5, color: 'var(--muted)', fontStyle: 'italic' }}>{note}</div> : null}
    </div>
  );
}

Object.assign(window, { HomePage, WeddingsPage, WeddingDetailPage, ServicesPage, AboutPage, ContactPage, PageHero });
