// Shared UI components
const { useState, useEffect, useRef } = React;

const cx = (...xs) => xs.filter(Boolean).join(' ');

// --- Navigation ---
function Navbar({ t, route, navigate, onEnquire, lang, setLang, dark }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { k: 'weddings', label: t.nav.weddings },
    { k: 'services', label: t.nav.services },
    { k: 'about', label: t.nav.about },
    { k: 'contact', label: t.nav.contact },
  ];
  const onDark = dark && !scrolled;
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all 380ms cubic-bezier(.22,.61,.36,1)',
      background: scrolled ? 'rgba(246,241,234,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid transparent',
      color: onDark ? '#F6F1EA' : 'var(--ink)',
    }}>
      <div style={{
        maxWidth: 1480, margin: '0 auto', padding: scrolled ? '16px 40px' : '28px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32,
        transition: 'padding 380ms',
      }}>
        <a onClick={() => navigate('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <Logomark color={onDark ? '#F6F1EA' : 'var(--ink)'} />
          <div style={{ lineHeight: 1.05 }}>
            <div className="serif" style={{ fontSize: 19, letterSpacing: '0.01em', fontWeight: 500 }}>The Wedding Haven</div>
            <div style={{ fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.65, marginTop: 2 }}>Dubai · Toronto · Worldwide</div>
          </div>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36, fontSize: 13.5, fontWeight: 400 }} className="nav-desktop">
          {links.map(l => (
            <a key={l.k} onClick={() => navigate(l.k)} style={{
              cursor: 'pointer', position: 'relative', paddingBottom: 4,
              borderBottom: route === l.k ? `1px solid ${onDark ? '#F6F1EA' : 'var(--ink)'}` : '1px solid transparent',
              opacity: route === l.k ? 1 : 0.78,
            }}>{l.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <button onClick={() => setLang(lang === 'en' ? 'ar' : 'en')} style={{
            background: 'transparent', border: 'none', color: 'inherit', padding: 0,
            fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.75,
          }}>{t.other}</button>
          <span style={{ width: 1, height: 16, background: onDark ? 'rgba(246,241,234,0.3)' : 'var(--line)' }} />
          <button onClick={onEnquire} style={{
            background: onDark ? '#F6F1EA' : 'var(--ink)', color: onDark ? 'var(--ink)' : 'var(--paper)',
            border: 'none', padding: '11px 22px', fontSize: 12.5, letterSpacing: '0.16em', textTransform: 'uppercase',
            borderRadius: 999, cursor: 'pointer', transition: 'transform 200ms',
          }} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-1px)'}
             onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
            {t.nav.enquire}
          </button>
        </div>
      </div>
    </header>
  );
}

function Logomark({ color = 'currentColor', size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
      <circle cx="30" cy="30" r="29" stroke={color} strokeOpacity="0.35" strokeWidth="0.8" />
      <path d="M30 14 C 22 22, 22 38, 30 46 C 38 38, 38 22, 30 14 Z" stroke={color} strokeWidth="0.9" fill="none" />
      <path d="M14 30 C 22 22, 38 22, 46 30 C 38 38, 22 38, 14 30 Z" stroke={color} strokeWidth="0.9" fill="none" />
      <circle cx="30" cy="30" r="1.8" fill={color} />
    </svg>
  );
}

// --- Buttons ---
function ButtonPrimary({ children, onClick, dark, large, style }) {
  return (
    <button onClick={onClick} style={{
      background: dark ? '#F6F1EA' : 'var(--ink)',
      color: dark ? 'var(--ink)' : 'var(--paper)',
      border: 'none', borderRadius: 999,
      padding: large ? '16px 32px' : '13px 24px',
      fontSize: large ? 13.5 : 12.5, letterSpacing: '0.18em', textTransform: 'uppercase',
      cursor: 'pointer', transition: 'transform 200ms, box-shadow 200ms',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
      ...style,
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 8px 24px -10px rgba(0,0,0,0.25)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(0,0,0,0.04)'; }}>
      {children}
    </button>
  );
}
function ButtonGhost({ children, onClick, dark, large, style }) {
  return (
    <button onClick={onClick} style={{
      background: 'transparent',
      color: dark ? '#F6F1EA' : 'var(--ink)',
      border: `1px solid ${dark ? 'rgba(246,241,234,0.5)' : 'var(--line)'}`,
      borderRadius: 999,
      padding: large ? '15px 31px' : '12px 23px',
      fontSize: large ? 13.5 : 12.5, letterSpacing: '0.18em', textTransform: 'uppercase',
      cursor: 'pointer', transition: 'all 200ms',
      ...style,
    }}
    onMouseEnter={e => { e.currentTarget.style.borderColor = dark ? '#F6F1EA' : 'var(--ink)'; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = dark ? 'rgba(246,241,234,0.5)' : 'var(--line)'; }}>
      {children}
    </button>
  );
}

// --- Section primitives ---
function Section({ children, dark, tone, style, id }) {
  const bg = dark ? 'var(--noir)' : tone === 'cream' ? 'var(--cream)' : 'var(--paper)';
  const fg = dark ? '#F6F1EA' : 'var(--ink)';
  return (
    <section id={id} style={{ background: bg, color: fg, position: 'relative', ...style }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '120px 40px' }}>
        {children}
      </div>
    </section>
  );
}

function Eyebrow({ children, color }) {
  return (
    <div className="mono-eyebrow" style={{ color: color || 'var(--champagne-deep)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <span className="rule" style={{ background: color || 'var(--champagne)' }} />
      <span>{children}</span>
    </div>
  );
}

function H2({ children, style }) {
  return (
    <h2 className="serif" style={{
      fontSize: 'clamp(36px, 4.4vw, 62px)', fontWeight: 400, lineHeight: 1.04,
      letterSpacing: '-0.012em', margin: '20px 0 0', whiteSpace: 'pre-line', ...style,
    }}>{children}</h2>
  );
}

// --- Image placeholder helper ---
function Img({ src, alt, ratio, style, credit, className }) {
  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      aspectRatio: ratio || '4 / 5',
      background: 'var(--cream)',
      ...style,
    }} className={className}>
      <img src={`media/${src}`} alt={alt || ''} loading="lazy" style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        transition: 'transform 1200ms cubic-bezier(.22,.61,.36,1)',
      }} />
      {credit ? (
        <div style={{
          position: 'absolute', bottom: 12, left: 12, fontSize: 10,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.92)', textShadow: '0 1px 2px rgba(0,0,0,0.4)',
        }}>{credit}</div>
      ) : null}
    </div>
  );
}

// --- Footer ---
function Footer({ t, navigate, onEnquire, lang, setLang }) {
  return (
    <footer style={{ background: 'var(--noir)', color: '#F6F1EA' }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '80px 40px 36px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 60, paddingBottom: 60, borderBottom: '1px solid rgba(246,241,234,0.12)' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Logomark color="#F6F1EA" size={36} />
              <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>The Wedding Haven</div>
            </div>
            <p style={{ marginTop: 22, fontSize: 14, lineHeight: 1.7, opacity: 0.72, maxWidth: 340 }}>{t.footer.tagline}</p>
            <button onClick={onEnquire} style={{
              marginTop: 24, background: 'transparent', border: '1px solid rgba(246,241,234,0.4)',
              color: '#F6F1EA', padding: '11px 22px', borderRadius: 999, fontSize: 12,
              letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer',
            }}>{t.nav.enquire}</button>
          </div>
          <FooterCol title={t.footer.cols.site} items={[
            { label: t.nav.weddings, k: 'weddings' },
            { label: t.nav.services, k: 'services' },
            { label: t.nav.about, k: 'about' },
            { label: t.nav.contact, k: 'contact' },
          ]} navigate={navigate} />
          <FooterCol title={t.footer.cols.services} items={t.services.items.slice(0, 5).map(i => ({ label: i.t, k: 'services' }))} navigate={navigate} />
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 18 }}>{t.footer.cols.contact}</div>
            <div style={{ fontSize: 14, lineHeight: 1.9, opacity: 0.85 }}>
              <div>{t.contact.info.phone}</div>
              <div>{t.contact.info.email}</div>
              <div style={{ opacity: 0.6, fontSize: 12, marginTop: 6 }}>{t.contact.info.hours}</div>
            </div>
            <button onClick={() => setLang(lang === 'en' ? 'ar' : 'en')} style={{
              marginTop: 22, background: 'transparent', border: 'none', padding: 0,
              color: '#F6F1EA', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
              opacity: 0.65, cursor: 'pointer',
            }}>{t.locale} · {t.other}</button>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 28, fontSize: 11.5, opacity: 0.55 }}>
          <div>{t.footer.colophon}</div>
          <div>{t.footer.legal}</div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items, navigate }) {
  return (
    <div>
      <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11, fontSize: 14 }}>
        {items.map((it, i) => (
          <li key={i}><a onClick={() => navigate(it.k)} style={{ cursor: 'pointer', opacity: 0.85 }}>{it.label}</a></li>
        ))}
      </ul>
    </div>
  );
}

// --- Wedding Card ---
function WeddingCard({ w, lang, t, onOpen }) {
  const isPending = w.status === 'pending';
  if (isPending) {
    return (
      <article style={{ cursor: 'default' }}>
        <div style={{
          aspectRatio: '4 / 5', background: 'var(--cream)',
          border: '1px solid var(--line)', position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          textAlign: 'center', padding: 32,
        }}>
          {/* Subtle decorative pattern */}
          <svg width="80" height="80" viewBox="0 0 80 80" style={{ position: 'absolute', opacity: 0.18 }}>
            <circle cx="40" cy="40" r="32" fill="none" stroke="var(--champagne)" strokeWidth="0.6" />
            <circle cx="40" cy="40" r="22" fill="none" stroke="var(--champagne)" strokeWidth="0.6" />
            <circle cx="40" cy="40" r="12" fill="none" stroke="var(--champagne)" strokeWidth="0.6" />
          </svg>
          <div style={{ position: 'relative' }}>
            <div className="mono-eyebrow" style={{ color: 'var(--champagne-deep)', display: 'block', marginBottom: 14 }}>{t.weddings.pending}</div>
            <div className="serif" style={{ fontSize: 24, lineHeight: 1.25, color: 'var(--ink)' }}>
              {lang === 'ar' ? w.regionAr : w.regionEn}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 16, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          {lang === 'ar' ? w.seasonAr : w.seasonEn}
        </div>
      </article>
    );
  }
  return (
    <article onClick={() => onOpen(w.id)} style={{ cursor: 'pointer' }} className="card-hover">
      <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--cream)', position: 'relative' }}>
        <img src={`media/${w.cover}`} alt="" style={{
          width: '100%', height: '100%', objectFit: 'cover',
          transition: 'transform 1200ms cubic-bezier(.22,.61,.36,1)',
        }} className="card-img" />
        <div style={{
          position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.35))',
          opacity: 0.7,
        }} />
        <div style={{ position: 'absolute', top: 16, left: 16, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#fff', opacity: 0.85 }}>
          {w.style}
        </div>
      </div>
      <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
        <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 400, margin: 0 }}>
          {lang === 'ar' ? w.locationAr : w.locationEn}
        </h3>
        <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)', flexShrink: 0 }}>
          {lang === 'ar' ? w.seasonAr : w.seasonEn}
        </span>
      </div>
      <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.65, color: 'var(--muted)', maxWidth: 440 }}>
        {lang === 'ar' ? w.blurbAr : w.blurbEn}
      </p>
      <div style={{ marginTop: 14, fontSize: 11.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--champagne-deep)' }}>
        {t.weddings.view} <span style={{ display: 'inline-block', marginLeft: 6 }}>→</span>
      </div>
    </article>
  );
}

// --- Enquiry form ---
function EnquiryForm({ t, lang, compact }) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', phone: '', date: '', guests: '', where: '', scope: '', message: '', consent: true });
  const submit = (e) => { e.preventDefault(); setSent(true); };
  if (sent) {
    return (
      <div style={{ padding: '60px 40px', textAlign: 'center', background: 'var(--cream)', border: '1px solid var(--line)' }}>
        <Logomark color="var(--champagne-deep)" size={48} />
        <div className="serif" style={{ fontSize: 30, marginTop: 22, lineHeight: 1.3 }}>{t.contact.form.sent}</div>
      </div>
    );
  }
  const Field = ({ id, label, children, span }) => (
    <div style={{ gridColumn: span || 'span 1' }}>
      <label htmlFor={id} style={{ display: 'block', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 10 }}>{label}</label>
      {children}
    </div>
  );
  const inputStyle = {
    width: '100%', background: 'transparent', border: 'none',
    borderBottom: '1px solid var(--line)', padding: '10px 0 12px',
    fontSize: 16, fontFamily: 'inherit', color: 'var(--ink)',
    outline: 'none', transition: 'border-color 200ms',
  };
  return (
    <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '34px 28px' }}>
      <Field id="name" label={t.contact.form.name} span="span 2">
        <input id="name" required style={inputStyle} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
      </Field>
      <Field id="email" label={t.contact.form.email}>
        <input id="email" type="email" required style={inputStyle} value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
      </Field>
      <Field id="phone" label={t.contact.form.phone}>
        <input id="phone" style={inputStyle} value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
      </Field>
      <Field id="date" label={t.contact.form.date}>
        <input id="date" type="date" style={inputStyle} value={form.date} onChange={e => setForm({ ...form, date: e.target.value })} />
      </Field>
      <Field id="guests" label={t.contact.form.guests}>
        <input id="guests" type="number" min="2" style={inputStyle} value={form.guests} onChange={e => setForm({ ...form, guests: e.target.value })} />
      </Field>
      <Field id="where" label={t.contact.form.where} span="span 2">
        <select id="where" style={inputStyle} value={form.where} onChange={e => setForm({ ...form, where: e.target.value })}>
          <option value="">—</option>
          {t.contact.form.whereOpts.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </Field>
      <Field id="scope" label={t.contact.form.scope} span="span 2">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 4 }}>
          {t.contact.form.scopeOpts.map(o => (
            <button key={o} type="button" onClick={() => setForm({ ...form, scope: o })}
              style={{
                padding: '9px 16px', borderRadius: 999, fontSize: 13,
                background: form.scope === o ? 'var(--ink)' : 'transparent',
                color: form.scope === o ? 'var(--paper)' : 'var(--ink)',
                border: `1px solid ${form.scope === o ? 'var(--ink)' : 'var(--line)'}`,
                cursor: 'pointer', transition: 'all 200ms',
              }}>{o}</button>
          ))}
        </div>
      </Field>
      <Field id="message" label={t.contact.form.message} span="span 2">
        <textarea id="message" rows={3} style={{ ...inputStyle, resize: 'vertical', minHeight: 60 }} value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
      </Field>
      <div style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', gap: 12, fontSize: 13, color: 'var(--muted)' }}>
        <input id="consent" type="checkbox" checked={form.consent} onChange={e => setForm({ ...form, consent: e.target.checked })} style={{ accentColor: 'var(--champagne-deep)' }} />
        <label htmlFor="consent" style={{ lineHeight: 1.45 }}>{t.contact.form.consent}</label>
      </div>
      <div style={{ gridColumn: 'span 2', marginTop: 8 }}>
        <ButtonPrimary large>{t.contact.form.submit}</ButtonPrimary>
      </div>
    </form>
  );
}

Object.assign(window, { cx, Navbar, Logomark, ButtonPrimary, ButtonGhost, Section, Eyebrow, H2, Img, Footer, WeddingCard, EnquiryForm });