// shell.jsx — Nav, footer, fab, common chrome for My Lovely Wedding

const { useState, useEffect, useRef, useMemo } = React;

// Tiny icon set — line glyphs only, no SVG illustration
const Icon = {
  Arrow: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  ArrowDown: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M12 5v14M6 13l6 6 6-6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Plus: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M12 5v14M5 12h14" strokeLinecap="round"/>
    </svg>
  ),
  Whatsapp: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p} stroke="currentColor" fill="none">
      <path d="M20 12a8 8 0 0 1-12.06 6.89L4 20l1.16-3.81A8 8 0 1 1 20 12Z" strokeLinejoin="round"/>
      <path d="M9 9.5c.2 1.5 1.4 3.6 3 4.8 1.4 1 2.8.9 3.4.4l.5-.6-1.6-1-.6.5c-.6 0-1.7-.7-2.5-1.7-.7-.9-.9-1.7-.9-2l.6-.5L10 7.4 9.4 8c-.3.3-.5.9-.4 1.5Z"/>
    </svg>
  ),
  Mail: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="1"/>
      <path d="m3 7 9 6 9-6" strokeLinejoin="round"/>
    </svg>
  ),
  Phone: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" strokeLinejoin="round"/>
    </svg>
  ),
  Close: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="m6 6 12 12M18 6 6 18" strokeLinecap="round"/>
    </svg>
  ),
  Menu: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M4 7h16M4 12h16M4 17h16" strokeLinecap="round"/>
    </svg>
  ),
  Heart: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.4-7 10-7 10Z" strokeLinejoin="round"/>
    </svg>
  ),
  Check: (p) => (
    <svg className="glyph" viewBox="0 0 24 24" {...p}>
      <path d="m5 12 5 5L20 7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

// Wordmark — rendering the brand in Bodoni Moda + Pinyon Script (the brand uses Bodoni Moda + "Jules" script).
// This is an original typographic treatment, NOT a copy of the raster logo.
function Wordmark({ small, light }) {
  const color = light ? 'var(--paper)' : 'var(--ink)';
  const accent = light ? 'rgba(251,248,244,.85)' : 'var(--accent-deep)';
  return (
    <a href="#/" className="wordmark" aria-label="My Lovely Wedding — home"
       style={{ display:'inline-flex', flexDirection:'column', alignItems:'center', gap: small ? 0 : 2, color, lineHeight: 1, textDecoration:'none' }}>
      <span style={{
        fontFamily:'var(--font-display)', fontWeight: 300,
        fontSize: small ? 14 : 18, letterSpacing:'0.42em',
        textTransform:'uppercase'
      }}>MY</span>
      <span className="script" style={{
        fontFamily:'var(--font-script)', color: accent,
        fontSize: small ? 38 : 52, marginTop: small ? -8 : -10, marginBottom: small ? -10 : -14,
        lineHeight: 0.7, letterSpacing:'-0.01em'
      }}>lovely</span>
      <span style={{
        fontFamily:'var(--font-display)', fontWeight: 300,
        fontSize: small ? 13 : 16, letterSpacing:'0.42em',
        textTransform:'uppercase'
      }}>Wedding</span>
    </a>
  );
}

// Nav -----------------------------------------------------------
function Nav({ route, lang, onNav, onLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = lang === 'ar' ? [
    ['weddings', 'حفلات حقيقية'],
    ['styling', 'التنسيق'],
    ['planning', 'التخطيط'],
    ['flowers', 'الأزهار والقرطاسية'],
    ['about', 'عن جويل'],
    ['journal', 'المدونة'],
  ] : [
    ['weddings', 'Real Weddings'],
    ['styling', 'Styling'],
    ['planning', 'Planning'],
    ['flowers', 'Flowers & Stationery'],
    ['about', 'About'],
    ['journal', 'Journal'],
  ];

  const labels = lang === 'ar'
    ? { enquire: 'استفسر', en: 'EN', ar: 'AR' }
    : { enquire: 'Enquire', en: 'EN', ar: 'AR' };

  return (
    <header style={{
      position:'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,248,244,.94)' : 'rgba(251,248,244,.0)',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
      transition: 'all .3s ease',
    }}>
      <div className="wrap" style={{
        display:'grid', gridTemplateColumns:'1fr auto 1fr',
        alignItems:'center', padding: '18px 32px',
      }}>
        {/* Left: links */}
        <nav style={{ display:'flex', alignItems:'center', gap: 28, fontSize: 12, letterSpacing:'0.16em', textTransform:'uppercase' }}>
          {links.slice(0, 3).map(([key, label]) => (
            <a key={key} href={`#/${key}`} onClick={(e)=>{e.preventDefault(); onNav(key);}}
              style={{
                color: route === key ? 'var(--ink)' : 'var(--ink-soft)',
                paddingBottom: 4,
                borderBottom: route === key ? '1px solid var(--accent)' : '1px solid transparent',
                transition: 'all .2s ease',
              }}>{label}</a>
          ))}
        </nav>

        {/* Center: wordmark */}
        <Wordmark small={scrolled}/>

        {/* Right: more links + utilities */}
        <nav style={{ display:'flex', alignItems:'center', gap: 24, justifyContent:'flex-end', fontSize: 12, letterSpacing:'0.16em', textTransform:'uppercase' }}>
          {links.slice(3).map(([key, label]) => (
            <a key={key} href={`#/${key}`} onClick={(e)=>{e.preventDefault(); onNav(key);}}
              style={{
                color: route === key ? 'var(--ink)' : 'var(--ink-soft)',
                paddingBottom: 4,
                borderBottom: route === key ? '1px solid var(--accent)' : '1px solid transparent',
                transition: 'all .2s ease',
              }}>{label}</a>
          ))}

          {/* Lang switch */}
          <span style={{ display:'inline-flex', alignItems:'center', gap: 8, fontSize: 11, color: 'var(--ink-muted)' }}>
            <button onClick={()=>onLang('en')} style={{
              background:'transparent', border:'none', padding:0, color: lang==='en' ? 'var(--ink)' : 'var(--ink-muted)',
              fontFamily:'inherit', fontSize: 11, letterSpacing:'0.16em',
            }}>{labels.en}</button>
            <span style={{ color:'var(--line)' }}>/</span>
            <button onClick={()=>onLang('ar')} style={{
              background:'transparent', border:'none', padding:0, color: lang==='ar' ? 'var(--ink)' : 'var(--ink-muted)',
              fontFamily:'inherit', fontSize: 11, letterSpacing:'0.16em',
            }}>{labels.ar}</button>
          </span>

          <button className="btn btn--gold" style={{ padding:'11px 18px', fontSize: 11 }}
                  onClick={()=>onNav('contact')}>
            {labels.enquire}
          </button>
        </nav>
      </div>
    </header>
  );
}

// Footer --------------------------------------------------------
function Footer({ lang, onNav }) {
  const ar = lang === 'ar';
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', paddingTop: 80 }}>
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap: 60, paddingBottom: 60 }}>
          <div>
            <Wordmark light/>
            <p style={{ marginTop: 28, color:'rgba(251,248,244,.7)', fontSize: 14, lineHeight: 1.7, maxWidth: 320 }}>
              {ar ? 'تنسيق وتخطيط الأعراس في دبي منذ ٢٠١٢. الصديقة التي طالما تمنيتِها في يومك.'
                  : 'Dubai wedding styling & planning since 2012 — the wedding friend you always wanted.'}
            </p>
            <div style={{ marginTop: 26, display:'flex', gap: 10, flexWrap:'wrap' }}>
              <a className="btn btn--ivory" style={{ padding:'11px 16px', fontSize: 11 }} href="https://wa.me/971551304916" target="_blank" rel="noopener">
                <Icon.Whatsapp/> WhatsApp
              </a>
              <a className="btn btn--ghost" style={{ borderColor:'rgba(251,248,244,.4)', color:'var(--paper)', padding:'11px 16px', fontSize: 11 }} href="mailto:joelle@mylovelywedding.com">
                <Icon.Mail/> Email Joelle
              </a>
            </div>
          </div>

          <FooterCol title={ar ? 'الخدمات' : 'Services'} items={[
            [ar?'تنسيق الأعراس':'Wedding Styling', 'styling'],
            [ar?'التخطيط الكامل':'Full Planning', 'planning'],
            [ar?'الأزهار والقرطاسية':'Flowers & Stationery', 'flowers'],
            [ar?'استشارة':'Book a chat', 'contact'],
          ]} onNav={onNav}/>

          <FooterCol title={ar ? 'استكشف' : 'Explore'} items={[
            [ar?'حفلات حقيقية':'Real Weddings', 'weddings'],
            [ar?'حسب القاعة':'By Venue', 'weddings'],
            [ar?'المدونة':'Journal', 'journal'],
            [ar?'الصحافة':'Press & Testimonials', 'about'],
          ]} onNav={onNav}/>

          <div>
            <div className="eyebrow" style={{ color:'rgba(251,248,244,.6)' }}>{ar ? 'تواصلي' : 'Get in touch'}</div>
            <ul style={{ listStyle:'none', padding:0, margin:'18px 0 0', display:'flex', flexDirection:'column', gap: 12, fontSize: 14, color:'rgba(251,248,244,.85)' }}>
              <li><a href="https://wa.me/971551304916" target="_blank" rel="noopener">+971 55 130 4916</a></li>
              <li><a href="mailto:joelle@mylovelywedding.com">joelle@mylovelywedding.com</a></li>
              <li style={{ color:'rgba(251,248,244,.6)' }}>{ar ? 'دبي، الإمارات العربية المتحدة' : 'Dubai, United Arab Emirates'}</li>
              <li style={{ color:'rgba(251,248,244,.6)', fontSize: 12 }}>{ar ? 'بمواعيد مسبقة فقط' : 'By appointment only'}</li>
            </ul>
            <div style={{ marginTop: 28, display:'flex', gap: 14, color:'rgba(251,248,244,.7)', fontSize: 12, letterSpacing:'0.2em', textTransform:'uppercase' }}>
              <a href="https://instagram.com/mylovelywedding" target="_blank" rel="noopener">Instagram</a>
              <a href="https://facebook.com/mylovelyweddingindubai" target="_blank" rel="noopener">Facebook</a>
              <a href="https://pinterest.com/JoelleinDubai" target="_blank" rel="noopener">Pinterest</a>
            </div>
          </div>
        </div>

        <div style={{ borderTop:'1px solid rgba(251,248,244,.12)', padding:'24px 0 36px', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize: 11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(251,248,244,.5)' }}>
          <span>© 2012–2026 My Lovely Wedding — {ar ? 'تنسيق وتخطيط الأعراس في دبي' : 'Dubai Wedding Styling & Planning'}</span>
          <span style={{ display:'inline-flex', gap: 18 }}>
            <a href="#">{ar ? 'الخصوصية' : 'Privacy'}</a>
            <a href="#">{ar ? 'الشروط' : 'Terms'}</a>
            <span style={{ color:'rgba(251,248,244,.3)' }}>
              {ar ? 'الأزهار من ' : 'Florals by '}
              <a href="#" style={{ color:'rgba(251,248,244,.7)', borderBottom:'1px solid rgba(218,201,123,.6)', paddingBottom: 2 }}>
                The Lovely Flower Shop
              </a>
            </span>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, onNav }) {
  return (
    <div>
      <div className="eyebrow" style={{ color:'rgba(251,248,244,.6)' }}>{title}</div>
      <ul style={{ listStyle:'none', padding:0, margin:'18px 0 0', display:'flex', flexDirection:'column', gap: 12 }}>
        {items.map(([label, key]) => (
          <li key={label}>
            <a href={`#/${key}`} onClick={(e)=>{e.preventDefault(); onNav(key);}}
               style={{ color:'rgba(251,248,244,.85)', fontSize: 14 }}>{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Floating WhatsApp -----------------------------------------------
function WhatsAppFab({ lang }) {
  return (
    <a className="fab" href="https://wa.me/971551304916?text=Hi%20My%20Lovely%20Wedding%2C%20I%27d%20love%20to%20enquire%20about%20our%20wedding..." target="_blank" rel="noopener">
      <Icon.Whatsapp/>
      <span>{lang==='ar' ? 'دردشة واتساب' : 'Chat on WhatsApp'}</span>
    </a>
  );
}

// Inline script-accent word ("love", "help", "design"…) —
// Centralises sizing + baseline alignment so script words never collide
// with the line above/below. Use inside h-display headings.
function S({ children, color, size }) {
  const style = {};
  if (color) style.color = color;
  if (size)  style.fontSize = size;
  return <span className="scrpt" style={style}>{children}</span>;
}

// Section heading helper -----------------------------------------
function SectionHead({ eyebrow, title, kicker, align='left', children, accent }) {
  return (
    <div style={{ textAlign: align, marginBottom: 56, maxWidth: align==='center' ? 720 : 'none', marginLeft: align==='center' ? 'auto':0, marginRight: align==='center' ? 'auto':0 }}>
      {eyebrow && <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>}
      <h2 className="h-display" style={{ fontSize:'clamp(36px, 4.4vw, 64px)', margin:'18px 0 0' }}>
        {accent && <><S>{accent}</S>{' '}</>}
        {title}
      </h2>
      {kicker && <p className="lede" style={{ margin:'22px auto 0', maxWidth: 640 }}>{kicker}</p>}
      {children}
    </div>
  );
}

// Cinematic wedding card ------------------------------------------
function WeddingCard({ w, onOpen, large }) {
  return (
    <a href={`#/wedding/${w.id}`} onClick={(e)=>{e.preventDefault(); onOpen(w.id);}}
       style={{ display:'block', color:'inherit' }}>
      <div className={"frame " + (large ? 'frame--tall' : 'frame--portrait')}>
        <img src={w.cover} alt={w.title} loading="lazy"/>
        <div className="photo-credit">Photo · {w.photographer}</div>
      </div>
      <div style={{ marginTop: 22, display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 16 }}>
        <div>
          <h3 className="h-display" style={{ fontSize: 24, margin:0, fontStyle:'italic', fontWeight: 300 }}>
            {w.title}
          </h3>
          <div style={{ marginTop: 8, fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-soft)' }}>
            {w.venue} <span style={{ color:'var(--line)', margin:'0 8px' }}>·</span> {w.season}
          </div>
        </div>
        <span style={{ fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-muted)', whiteSpace:'nowrap' }}>{w.style}</span>
      </div>
    </a>
  );
}

Object.assign(window, {
  Icon, Wordmark, Nav, Footer, FooterCol, WhatsAppFab, SectionHead, WeddingCard, S,
});
