// home.jsx — My Lovely Wedding home

function Home({ lang, onNav, openWedding }) {
  const ar = lang === 'ar';
  const featured = WEDDINGS.filter(w => w.featured).slice(0, 4);

  return (
    <main className="page-enter">
      <Hero ar={ar} onNav={onNav}/>
      <PressMarquee/>
      <ServicesStrip ar={ar} onNav={onNav}/>
      <FeaturedStories ar={ar} weddings={featured} onOpen={openWedding} onNav={onNav}/>
      <VenuesBand ar={ar} onNav={onNav}/>
      <StylingTease ar={ar} onNav={onNav}/>
      <Testimonial ar={ar}/>
      <JournalTeaser ar={ar} onNav={onNav}/>
      <EnquireBand ar={ar} onNav={onNav}/>
    </main>
  );
}

function Hero({ ar, onNav }) {
  return (
    <section style={{ position:'relative', minHeight: '92vh', display:'flex', flexDirection:'column', justifyContent:'flex-end', overflow:'hidden' }}>
      {/* full-bleed image */}
      <div style={{ position:'absolute', inset: 0 }}>
        <img src="media/hero-3.webp" alt="" style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 40%' }}/>
        {/* Layered scrim: subtle top fade + strong bottom scrim under the headline area */}
        <div style={{ position:'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(43,38,34,.32) 0%, rgba(43,38,34,.08) 22%, rgba(43,38,34,0) 42%, rgba(43,38,34,.45) 72%, rgba(43,38,34,.82) 100%)' }}/>
        {/* Left-side reinforcement for headline copy */}
        <div style={{ position:'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(43,38,34,.42) 0%, rgba(43,38,34,.15) 35%, rgba(43,38,34,0) 60%)' }}/>
      </div>

      {/* Headline */}
      <div className="wrap" style={{ position:'relative', paddingBottom: 80, color:'var(--paper)' }}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap: 48, flexWrap:'wrap' }}>
          <div style={{ maxWidth: 820 }}>
            <div className="eyebrow" style={{ color:'rgba(251,248,244,.95)', marginBottom: 22, textShadow:'0 1px 2px rgba(0,0,0,.3)' }}>
              <span className="dot" style={{ background: 'var(--paper)' }}></span>
              {ar ? 'تنسيق وتخطيط الأعراس · دبي · منذ ٢٠١٢' : 'Wedding styling & planning · Dubai · since 2012'}
            </div>
            <h1 className="h-display h-tight" style={{
              fontSize: 'clamp(56px, 8.8vw, 142px)',
              color:'var(--paper)',
              fontWeight: 300,
              letterSpacing: '-0.02em',
              margin: 0,
              textShadow: '0 2px 24px rgba(0,0,0,.35)',
            }}>
              <span style={{ display:'block' }}>Styling, planning</span>
              <span style={{ display:'block', fontStyle:'italic' }}>and lots of pretty</span>
              <span style={{ display:'block' }}>
                <S color="var(--paper)" size="1.2em">inspiration</S>
                <span style={{ fontSize: '0.42em' }}>.</span>
              </span>
            </h1>
          </div>

          <div style={{ flex:'1 1 280px', maxWidth: 360 }}>
            <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 400, fontSize: 'clamp(18px, 1.4vw, 22px)', lineHeight: 1.45, color:'rgba(251,248,244,.98)', marginBottom: 28, textShadow:'0 1px 12px rgba(0,0,0,.4)' }}>
              {ar
                ? 'الصديقة التي طالما تمنيتها في يومكِ — أُنسّق وأُخطّط لأعراس حقيقية في دبي والإمارات منذ عام ٢٠١٢.'
                : '"I try to become the wedding friend you always wanted." Styling and planning real weddings across the UAE since 2012 — by Joelle.'}
            </p>
            <div style={{ display:'flex', gap: 12, flexWrap:'wrap' }}>
              <button className="btn btn--ivory" onClick={()=>onNav('contact')}>
                {ar ? 'احجزي مكالمة' : 'Book a chat'} <Icon.Arrow/>
              </button>
              <button className="btn btn--ghost" style={{ borderColor:'rgba(251,248,244,.7)', color:'var(--paper)', background:'rgba(43,38,34,.18)', backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)' }}
                      onClick={()=>onNav('weddings')}>
                {ar ? 'حفلات حقيقية' : 'Real Weddings'}
              </button>
            </div>
          </div>
        </div>

        {/* bottom meta strip */}
        <div style={{ marginTop: 80, display:'flex', alignItems:'center', justifyContent:'space-between', borderTop:'1px solid rgba(251,248,244,.32)', paddingTop: 22, gap: 28, flexWrap:'wrap', color:'rgba(251,248,244,.92)', fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', textShadow:'0 1px 2px rgba(0,0,0,.3)' }}>
          <span>{ar ? '١٢ عامًا من الأعراس الحقيقية' : '12+ years of real weddings'}</span>
          <span>{ar ? 'دبي · رأس الخيمة · الإمارات' : 'Dubai · RAK · UAE-wide'}</span>
          <span>{ar ? 'تنسيق · تخطيط · أزهار · قرطاسية' : 'Styling · Planning · Florals · Stationery'}</span>
          <span style={{ display:'inline-flex', alignItems:'center', gap: 10 }}>
            <Icon.ArrowDown/> {ar ? 'تابعي القراءة' : 'Scroll'}
          </span>
        </div>
      </div>
    </section>
  );
}

function PressMarquee() {
  const items = [...PRESS, ...PRESS];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((p, i) => (
          <span key={i} style={{ display:'inline-flex', alignItems:'center', gap: 72 }}>
            <span>{p}</span>
            <span className="ornament" style={{ fontSize: 24 }}>·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function ServicesStrip({ ar, onNav }) {
  const items = [
    { k: 'styling',  t: ar?'تنسيق الأعراس':'Wedding Styling',  sub: ar?'بصمتك الخاصة، حتى أصغر التفاصيل':'Bespoke design, down to the last detail' },
    { k: 'planning', t: ar?'التخطيط الكامل':'Full Planning',    sub: ar?'من البحث عن البائعين إلى ليلة العرس':'Sourcing → coordination → on-the-day' },
    { k: 'flowers',  t: ar?'الأزهار والقرطاسية':'Flowers & Stationery', sub: ar?'بالشراكة مع The Lovely Flower Shop':'With our sister brand TLFS · by Mona' },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap: 60, alignItems:'end' }}>
          <div className="eyebrow"><span className="dot"></span>{ar ? '٠١ / الخدمات' : '01 / What we do'}</div>
          <h2 className="h-display" style={{ fontSize:'clamp(40px, 5vw, 72px)', margin: 0 }}>
            Three ways we can <S>help</S>
            <em> you say I do.</em>
          </h2>
        </div>

        <div style={{ marginTop: 64, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, borderTop:'1px solid var(--line)' }}>
          {items.map((s, i) => (
            <button key={s.k} onClick={()=>onNav(s.k)}
              style={{
                textAlign:'left', background:'transparent', border: 0,
                borderRight: i < 2 ? '1px solid var(--line)' : 'none',
                padding: '40px 32px 36px',
                cursor:'pointer',
                transition:'background .25s ease',
                position:'relative',
              }}
              onMouseEnter={(e)=>{e.currentTarget.style.background='var(--cream)';}}
              onMouseLeave={(e)=>{e.currentTarget.style.background='transparent';}}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <span style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 14, color:'var(--accent-deep)' }}>0{i+1}</span>
                <Icon.Arrow style={{ width: 18, height: 18, color: 'var(--ink-soft)' }}/>
              </div>
              <h3 className="h-display" style={{ fontSize: 36, margin:'24px 0 12px', fontWeight: 300 }}>{s.t}</h3>
              <p style={{ color:'var(--ink-soft)', margin: 0, fontSize: 15, lineHeight: 1.6 }}>{s.sub}</p>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedStories({ ar, weddings, onOpen, onNav }) {
  return (
    <section className="section" style={{ background:'var(--cream)' }}>
      <div className="wrap">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 64, gap: 32, flexWrap:'wrap' }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow"><span className="dot"></span>{ar ? '٠٢ / حفلات حقيقية' : '02 / Real Weddings'}</div>
            <h2 className="h-display" style={{ fontSize:'clamp(44px, 5.4vw, 84px)', margin: '18px 0 0' }}>
              <em>The</em> stories<br/>
              we <S>love</S> to tell.
            </h2>
          </div>
          <p className="lede" style={{ flex:'1 1 320px', maxWidth: 420, margin: 0 }}>
            {ar
              ? 'كل عرس قصة — من القاعة إلى الباقة، إلى الإضاءة في تلك اللحظة الأخيرة قبل الرقصة الأولى.'
              : 'Every wedding is a story — venue, palette, florals, and the way the light falls in the last quiet minute before the first dance.'}
          </p>
        </div>

        {/* Editorial 4-up: 1 large + 3 small */}
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 28 }}>
          {/* Big one spans two rows */}
          <div style={{ gridRow:'span 2' }}>
            <WeddingCard w={weddings[0]} onOpen={onOpen} large/>
          </div>
          <WeddingCard w={weddings[1]} onOpen={onOpen}/>
          <WeddingCard w={weddings[2]} onOpen={onOpen}/>
          <div style={{ gridColumn:'2 / span 2' }}>
            <WeddingCard w={weddings[3]} onOpen={onOpen}/>
          </div>
        </div>

        <div style={{ marginTop: 56, display:'flex', justifyContent:'center' }}>
          <button className="btn btn--ghost" onClick={()=>onNav('weddings')}>
            {ar ? 'كل الأعراس · حسب القاعة' : 'All weddings · filter by venue'} <Icon.Arrow/>
          </button>
        </div>
      </div>
    </section>
  );
}

function VenuesBand({ ar, onNav }) {
  const venues = [
    { k:'waldorf-rak',     name:'Waldorf Astoria',         sub:'Ras Al Khaimah',    img:'media/venue-waldorf-24.webp', count: 8 },
    { k:'one-and-only',    name:'One&Only',                sub:'The Palm Dubai',    img:'media/venue-oneandonly.webp', count: 6 },
    { k:'al-qasr',         name:'Magnolia, Al Qasr',       sub:'Madinat Jumeirah',  img:'media/venue-magnolia.webp',   count: 5 },
    { k:'arabian-ranches', name:'Arabian Ranches',         sub:'Golf Club, Dubai',  img:'media/venue-arabian.webp',    count: 4 },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 56, gap: 32, flexWrap:'wrap' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>{ar ? '٠٣ / القاعات' : '03 / By Venue'}</div>
            <h2 className="h-display" style={{ fontSize:'clamp(40px, 5vw, 72px)', margin:'18px 0 0' }}>
              The venues we know <em>by heart.</em>
            </h2>
          </div>
          <button className="btn--text" onClick={()=>onNav('weddings')} style={{ background:'transparent', border:0, borderBottom:'1px solid var(--accent)', paddingBottom: 4, fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink)' }}>
            {ar ? 'استكشفي حسب القاعة' : 'Explore by venue'}
          </button>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 22 }}>
          {venues.map(v => (
            <a key={v.k} href={`#/weddings?venue=${v.k}`} onClick={(e)=>{e.preventDefault(); onNav('weddings', { venue: v.k });}}>
              <div className="frame frame--portrait">
                <img src={v.img} alt={v.name} loading="lazy"/>
              </div>
              <div style={{ marginTop: 18, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div>
                  <h3 className="h-display" style={{ fontStyle:'italic', fontWeight: 300, fontSize: 22, margin: 0 }}>{v.name}</h3>
                  <div style={{ fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-soft)', marginTop: 4 }}>{v.sub}</div>
                </div>
                <span style={{ fontSize: 11, color:'var(--ink-muted)' }}>{v.count} {ar ? 'حفلات' : 'weddings'}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function StylingTease({ ar, onNav }) {
  return (
    <section className="section" style={{ background:'var(--ink)', color:'var(--paper)', overflow:'hidden' }}>
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap: 80, alignItems:'center' }}>
          <div>
            <div className="eyebrow" style={{ color:'rgba(251,248,244,.6)' }}><span className="dot"></span>{ar ? '٠٤ / التنسيق' : '04 / Styling'}</div>
            <h2 className="h-display" style={{ fontSize:'clamp(46px, 5.6vw, 88px)', color:'var(--paper)', margin:'18px 0 32px', fontWeight: 300 }}>
              <em>Bespoke</em><br/>
              wedding <S color="var(--accent)">design.</S>
            </h2>
            <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300, fontSize: 'clamp(20px, 1.6vw, 26px)', lineHeight: 1.45, color:'rgba(251,248,244,.85)', maxWidth: 560 }}>
              {ar
                ? '"الكراسي، والكتان، والأزهار قد تكون عناصر أساسية — لكن ذاك الكتان الأزرق الناعم مع لمسة من زهرة الفاوانيا تحت أضواء الجنّيات… هذا هو التنسيق."'
                : '"The chairs, the linens, the florals — basic elements to start. But that soft blue linen against the pop of a peony, your guests zinging with glamour under strings of fairy lights — that\'s styling."'}
            </p>

            <ul style={{ listStyle:'none', padding: 0, margin: '40px 0 0', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0, borderTop:'1px solid rgba(251,248,244,.18)' }}>
              {['Personal Styling Proposal','Standard Rentals','Semi-custom Stationery','All The Flowers'].map((x, i) => (
                <li key={x} style={{
                  padding:'18px 0', display:'flex', alignItems:'center', gap: 14,
                  borderBottom:'1px solid rgba(251,248,244,.18)',
                  borderRight: i % 2 === 0 ? '1px solid rgba(251,248,244,.18)' : 'none',
                  paddingRight: i % 2 === 0 ? 20 : 0,
                  paddingLeft: i % 2 === 1 ? 20 : 0,
                  fontSize: 14,
                  color:'rgba(251,248,244,.92)',
                }}>
                  <span style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 13, color: 'var(--accent)' }}>0{i+1}</span>
                  {x}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 40, display:'flex', gap: 12 }}>
              <button className="btn btn--gold" onClick={()=>onNav('styling')}>
                {ar ? 'تعرّفي على التنسيق' : 'See the styling page'} <Icon.Arrow/>
              </button>
              <button className="btn btn--ghost" style={{ borderColor:'rgba(251,248,244,.5)', color:'var(--paper)' }} onClick={()=>onNav('contact')}>
                {ar ? 'استفسري' : 'Enquire'}
              </button>
            </div>
          </div>

          {/* Image stack */}
          <div style={{ position:'relative', height: 620 }}>
            <div className="frame frame--tall" style={{ position:'absolute', width:'76%', right: 0, top: 0 }}>
              <img src="media/styling-tiffany.webp" alt=""/>
            </div>
            <div className="frame frame--square" style={{ position:'absolute', width:'52%', left: 0, bottom: 0, boxShadow:'0 30px 60px rgba(0,0,0,.4)' }}>
              <img src="media/floral-cream.webp" alt=""/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonial({ ar }) {
  return (
    <section className="section-sm" style={{ background:'var(--paper-deep)' }}>
      <div className="wrap-tight" style={{ textAlign:'center' }}>
        <span className="ornament" style={{ fontSize: 56 }}>“</span>
        <p style={{
          fontFamily:'var(--font-display)', fontWeight: 300, fontStyle:'italic',
          fontSize:'clamp(26px, 2.6vw, 38px)', lineHeight: 1.35,
          color:'var(--ink)', margin: '0 auto', maxWidth: 880,
          textWrap:'balance',
        }}>
          {ar
            ? 'جويل هي الصديقة التي طالما تمنيتها في يومك. نقلت عُرسنا من دبي إلى رأس الخيمة في خمسة أيام — بهدوء، وبشغف، وبميزانية واقعية.'
            : 'Joelle is the wedding friend you always wanted. She moved our wedding from Dubai to Ras Al Khaimah in five days — calm, hands-on, and somehow under budget.'}
        </p>
        <div style={{ marginTop: 32, display:'inline-flex', alignItems:'center', gap: 16, color:'var(--ink-soft)', fontSize: 12, letterSpacing:'0.22em', textTransform:'uppercase' }}>
          <span style={{ width: 40, height: 1, background:'var(--accent)' }}></span>
          {ar ? 'عروس ٢٠٢١ · والدورف أستوريا، رأس الخيمة' : 'A 2021 bride · Waldorf Astoria, RAK'}
          <span style={{ width: 40, height: 1, background:'var(--accent)' }}></span>
        </div>
        <div style={{ marginTop: 8, fontSize: 11, color:'var(--ink-muted)', letterSpacing:'0.12em', textTransform:'uppercase' }}>
          {ar ? '— نُشرت بموافقة العميلة' : '— published with consent'}
        </div>
      </div>
    </section>
  );
}

function JournalTeaser({ ar, onNav }) {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 48, gap: 32 }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>{ar ? '٠٥ / المدونة' : '05 / The Journal'}</div>
            <h2 className="h-display" style={{ fontSize:'clamp(36px, 4vw, 56px)', margin:'18px 0 0' }}>
              {ar ? 'مدونة العرائس منذ ٢٠١٢.' : 'Our wedding blog, since 2012.'}
            </h2>
          </div>
          <button className="btn--text" onClick={()=>onNav('journal')}
            style={{ background:'transparent', border:0, borderBottom:'1px solid var(--accent)', paddingBottom: 4, fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink)' }}>
            {ar ? 'كل المقالات' : 'All articles'}
          </button>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 22 }}>
          {JOURNAL.slice(0, 4).map((j, i) => (
            <a key={i} href="#" style={{ color:'inherit' }}>
              <div className="frame frame--portrait">
                <img src={j.img} alt="" loading="lazy"/>
              </div>
              <div style={{ marginTop: 16 }}>
                <div className="eyebrow" style={{ color:'var(--accent-deep)' }}>{j.tag}</div>
                <h3 className="h-display" style={{ fontSize: 22, fontStyle:'italic', fontWeight: 300, margin: '10px 0 8px', lineHeight: 1.2 }}>{j.title}</h3>
                <div style={{ fontSize: 12, color:'var(--ink-muted)' }}>{j.read}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function EnquireBand({ ar, onNav }) {
  return (
    <section style={{ position:'relative', minHeight: '70vh', display:'flex', alignItems:'center', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset: 0 }}>
        <img src="media/wed-our-439.webp" alt="" style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 40%' }}/>
        <div style={{ position:'absolute', inset: 0, background:'linear-gradient(90deg, rgba(43,38,34,.78) 0%, rgba(43,38,34,.35) 60%, rgba(43,38,34,.15) 100%)' }}/>
      </div>
      <div className="wrap" style={{ position:'relative', color:'var(--paper)', padding: '120px 32px' }}>
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ color:'rgba(251,248,244,.8)' }}>
            <span className="dot" style={{ background:'var(--paper)' }}></span>{ar ? 'فلنتحدّث' : 'Let\'s have a good wedding chat'}
          </div>
          <h2 className="h-display" style={{ fontSize:'clamp(46px, 6vw, 92px)', color:'var(--paper)', margin:'18px 0 28px', fontWeight: 300 }}>
            <em>Tell me</em> about your <S color="var(--paper)">day.</S>
          </h2>
          <p style={{ fontSize: 18, fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300, color:'rgba(251,248,244,.92)', maxWidth: 560, lineHeight: 1.5 }}>
            {ar
              ? 'كل عرس بسيط أو كبير، رومانسي أو شقي — أحبّه. أخبريني بقصّتك، والتاريخ، والقاعة، ودعينا نخطّط.'
              : 'Every wedding — small, big, romantic, mischievous — I love them all. Tell me your story, your date, your venue, and let\'s start planning.'}
          </p>
          <div style={{ marginTop: 36, display:'flex', gap: 12, flexWrap:'wrap' }}>
            <button className="btn btn--ivory" onClick={()=>onNav('contact')}>
              {ar ? 'املئي الاستمارة' : 'Send an enquiry'} <Icon.Arrow/>
            </button>
            <a className="btn btn--ghost" style={{ borderColor:'rgba(251,248,244,.6)', color:'var(--paper)' }} href="https://wa.me/971551304916" target="_blank" rel="noopener">
              <Icon.Whatsapp/> {ar ? 'دردشي معي على واتساب' : 'WhatsApp Joelle'}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, JournalTeaser });