// weddings.jsx — Real Weddings index + Case Study template

function WeddingsIndex({ lang, onOpen, initialFilter }) {
  const ar = lang === 'ar';
  const [venue, setVenue] = useState(initialFilter?.venue || 'all');
  const [style, setStyle] = useState('All styles');
  const [season, setSeason] = useState('All seasons');

  useEffect(() => {
    if (initialFilter?.venue) setVenue(initialFilter.venue);
  }, [initialFilter]);

  const filtered = useMemo(() => {
    return WEDDINGS.filter(w => {
      if (venue !== 'all' && w.venueKey !== venue) return false;
      if (style !== 'All styles' && !w.style.includes(style)) return false;
      if (season !== 'All seasons' && !w.season.includes(season)) return false;
      return true;
    });
  }, [venue, style, season]);

  return (
    <main className="page-enter">
      {/* Header */}
      <section style={{ padding: '120px 0 60px', background:'var(--paper)' }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 80, alignItems:'end' }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>{ar ? 'حفلات حقيقية' : 'Real weddings · since 2012'}</div>
              <h1 className="h-display" style={{ fontSize:'clamp(56px, 7vw, 120px)', margin:'18px 0 0' }}>
                <em>Every</em><br/>
                wedding <S>tells</S><br/>a story.
              </h1>
            </div>
            <p className="lede" style={{ maxWidth: 460 }}>
              {ar
                ? 'استكشفي بورتفوليونا من الأعراس الحقيقية في دبي والإمارات. كل حفلة موثّقة بموافقة الزوجين واعتماد المصوّر.'
                : 'Browse our portfolio of real weddings across Dubai, RAK, and the UAE. Every wedding here is published with couple consent and full photographer credit.'}
            </p>
          </div>

          {/* Filter bar */}
          <div style={{ marginTop: 64, padding: '24px 28px', background:'var(--cream)', borderRadius: 6, display:'flex', gap: 32, flexWrap:'wrap', alignItems:'center', justifyContent:'space-between' }}>
            <div style={{ display:'flex', gap: 28, flexWrap:'wrap', alignItems:'center' }}>
              <FilterMenu label={ar?'القاعة':'Venue'} value={venue} onChange={setVenue}
                options={VENUES.map(v => [v.key, v.label])}/>
              <span style={{ width: 1, height: 22, background:'var(--line)' }}></span>
              <FilterMenu label={ar?'الأسلوب':'Style'} value={style} onChange={setStyle}
                options={STYLES.map(s => [s, s])}/>
              <span style={{ width: 1, height: 22, background:'var(--line)' }}></span>
              <FilterMenu label={ar?'الموسم':'Season'} value={season} onChange={setSeason}
                options={SEASONS.map(s => [s, s])}/>
            </div>
            <div style={{ fontSize: 12, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--ink-soft)' }}>
              {filtered.length} {ar ? 'حفلة' : (filtered.length === 1 ? 'wedding' : 'weddings')}
              {(venue !== 'all' || style !== 'All styles' || season !== 'All seasons') && (
                <button onClick={()=>{setVenue('all');setStyle('All styles');setSeason('All seasons');}}
                  style={{ marginLeft: 18, background:'transparent', border: 0, color:'var(--accent-deep)', borderBottom:'1px solid var(--accent)', padding:'2px 0', cursor:'pointer', fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase', fontFamily:'inherit' }}>
                  {ar?'مسح':'Clear'}
                </button>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ padding: '40px 0 120px' }}>
        <div className="wrap">
          {filtered.length === 0 ? (
            <div style={{ padding: '80px 0', textAlign:'center', color:'var(--ink-soft)' }}>
              <p className="lede" style={{ fontStyle:'italic' }}>
                No weddings match that combination — try broadening a filter.
              </p>
            </div>
          ) : (
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 36, rowGap: 64 }}>
              {filtered.map((w, i) => (
                <div key={w.id} style={{
                  // editorial offset for visual rhythm
                  marginTop: i % 6 === 1 || i % 6 === 4 ? 56 : 0
                }}>
                  <WeddingCard w={w} onOpen={onOpen}/>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

function FilterMenu({ label, value, options, onChange }) {
  return (
    <label style={{ display:'flex', alignItems:'center', gap: 12 }}>
      <span style={{ fontSize: 11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)' }}>{label}</span>
      <select value={value} onChange={(e)=>onChange(e.target.value)}
        style={{
          background:'transparent', border:0, fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--ink)',
          outline:'none', cursor:'pointer', paddingRight: 22,
          appearance:'none', WebkitAppearance:'none',
          backgroundImage:'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%235A524A\' stroke-width=\'1.4\'><path d=\'M6 9l6 6 6-6\'/></svg>")',
          backgroundRepeat:'no-repeat', backgroundPosition:'right center', backgroundSize:'12px',
        }}>
        {options.map(([k, label]) => <option key={k} value={k}>{label}</option>)}
      </select>
    </label>
  );
}

// ----------------- CASE STUDY ----------------------------------
function CaseStudy({ id, lang, onBack, onOpen }) {
  const ar = lang === 'ar';
  const w = WEDDINGS.find(x => x.id === id) || WEDDINGS[0];
  const next = WEDDINGS[(WEDDINGS.indexOf(w) + 1) % WEDDINGS.length];

  return (
    <main className="page-enter">
      {/* Hero */}
      <section style={{ position:'relative', height: '88vh', minHeight: 640, overflow:'hidden' }}>
        <img src={w.cover} alt="" style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
        <div style={{ position:'absolute', inset: 0, background:'linear-gradient(180deg, rgba(43,38,34,.18) 0%, rgba(43,38,34,0) 30%, rgba(43,38,34,0) 55%, rgba(43,38,34,.65) 100%)' }}/>
        <div className="wrap" style={{ position:'absolute', inset: 0, display:'flex', flexDirection:'column', justifyContent:'space-between', padding:'40px 32px 60px' }}>
          <div>
            <button onClick={onBack} style={{
              background:'rgba(251,248,244,.18)',
              WebkitBackdropFilter:'blur(12px)', backdropFilter:'blur(12px)',
              border:'1px solid rgba(251,248,244,.32)', color:'var(--paper)',
              padding:'9px 16px', borderRadius: 999, fontSize: 11, letterSpacing:'0.2em', textTransform:'uppercase',
              cursor:'pointer', display:'inline-flex', alignItems:'center', gap: 8,
            }}>
              <Icon.Arrow style={{ transform:'rotate(180deg)', width: 14, height: 14 }}/> {ar?'كل الحفلات':'All weddings'}
            </button>
          </div>
          <div style={{ color:'var(--paper)', maxWidth: 1000 }}>
            <div className="eyebrow" style={{ color:'rgba(251,248,244,.85)' }}>
              <span className="dot" style={{ background:'var(--paper)' }}></span>
              {ar ? 'قصة عرس' : 'A wedding story'} · {w.season}
            </div>
            <h1 className="h-display" style={{ fontSize:'clamp(48px, 7vw, 112px)', color:'var(--paper)', margin:'18px 0 0', fontWeight: 300, lineHeight: 0.96 }}>
              <em>{w.title.replace('A ', '')}</em>
            </h1>
            <div style={{ marginTop: 40, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 22, borderTop:'1px solid rgba(251,248,244,.3)', paddingTop: 22 }}>
              {[
                ['Venue', w.venue],
                ['Season', w.season],
                ['Style', w.style],
                ['Guests', w.guests],
              ].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 10, letterSpacing:'0.24em', textTransform:'uppercase', color:'rgba(251,248,244,.7)' }}>{k}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--paper)', marginTop: 8, fontWeight: 300 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* The story */}
      <section className="section">
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 100, alignItems:'start' }}>
            <div style={{ position:'sticky', top: 100 }}>
              <div className="eyebrow"><span className="dot"></span>01 · The Story</div>
              <h2 className="h-display" style={{ fontSize:'clamp(36px, 4vw, 56px)', margin:'18px 0 0', fontWeight: 300 }}>
                <em>How</em> we<br/>made it <S>theirs.</S>
              </h2>
            </div>
            <div>
              <p className="lede" style={{ margin: 0 }}>
                "{w.concept}"
              </p>
              <p style={{ marginTop: 32, fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)' }}>
                The couple came to us with a Pinterest board, a venue contract, and a knot in their stomachs about the budget. We spent the first chat listening, the second one cutting things they didn't actually care about, and the third one drawing the wedding back together — same dream, smaller spend, more of the bits that mattered.
              </p>
              <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)' }}>
                Florals were designed by Joelle and delivered through The Lovely Flower Shop. Stationery was hand-set by Mona. The photographer was someone the couple already loved.
              </p>

              {/* Palette */}
              <div style={{ marginTop: 48 }}>
                <div className="eyebrow">Palette</div>
                <div style={{ marginTop: 16, display:'flex', gap: 0, borderRadius: 6, overflow:'hidden', height: 80 }}>
                  {w.palette.map((c, i) => (
                    <div key={i} style={{ flex: 1, background: c, position:'relative' }}>
                      <span style={{ position:'absolute', left: 12, bottom: 8, fontSize: 10, letterSpacing:'0.16em', textTransform:'uppercase', color: i < 2 ? 'var(--ink)' : 'rgba(255,255,255,.85)' }}>{c}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* What we did */}
              <div style={{ marginTop: 48 }}>
                <div className="eyebrow">What we did</div>
                <ul style={{ listStyle:'none', padding: 0, margin:'16px 0 0', display:'flex', flexWrap:'wrap', gap: 10 }}>
                  {w.services.map(s => (
                    <li key={s} style={{ fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink)', padding:'8px 14px', border:'1px solid var(--line)', borderRadius: 999 }}>
                      <Icon.Check style={{ width: 12, height: 12, marginRight: 6, verticalAlign:'middle', color:'var(--accent-deep)' }}/>
                      {s}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery — editorial layout */}
      <section style={{ padding:'40px 0 110px' }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ textAlign:'center', marginBottom: 12 }}>02 · The Gallery</div>
          <h3 className="h-display" style={{ textAlign:'center', fontSize:'clamp(32px, 4vw, 56px)', margin:'0 0 56px', fontWeight: 300 }}>
            <em>Photographs</em> from the day
          </h3>

          {/* Editorial grid */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap: 18 }}>
            {w.gallery.slice(0, 6).map((src, i) => {
              const layouts = [
                { gc:'span 7', ar: 4/5 },
                { gc:'span 5', ar: 4/5 },
                { gc:'span 4', ar: 1 },
                { gc:'span 4', ar: 1 },
                { gc:'span 4', ar: 1 },
                { gc:'span 12', ar: 21/9 },
              ];
              const l = layouts[i] || { gc:'span 6', ar: 4/5 };
              return (
                <div key={i} className="frame" style={{ gridColumn: l.gc, aspectRatio: l.ar }}>
                  <img src={src} alt="" loading="lazy"/>
                </div>
              );
            })}
          </div>

          {/* Photographer credit row */}
          <div style={{ marginTop: 48, padding:'20px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 16 }}>
            <span style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--ink-soft)' }}>
              Photography — <span style={{ color:'var(--ink)' }}>{w.photographer}</span>
            </span>
            <span style={{ fontSize: 11, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--ink-muted)' }}>
              <Icon.Heart style={{ width: 12, height: 12, color:'var(--accent-deep)', marginRight: 6, verticalAlign:'middle' }}/>
              Published with the couple's consent
            </span>
          </div>
        </div>
      </section>

      {/* Pull quote */}
      <section className="section-sm" style={{ background:'var(--cream)' }}>
        <div className="wrap-tight" style={{ textAlign:'center' }}>
          <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300, fontSize:'clamp(24px, 2.4vw, 36px)', lineHeight: 1.35, color:'var(--ink)', margin: 0, textWrap:'balance' }}>
            "Joelle didn't sell us a wedding. She built ours, one honest conversation at a time. The day looked like us — only somehow prettier."
          </p>
          <div style={{ marginTop: 28, fontSize: 12, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)' }}>
            — A note from the couple
          </div>
        </div>
      </section>

      {/* Next wedding */}
      <section className="section">
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.3fr', gap: 60, alignItems:'center' }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Next story</div>
              <h3 className="h-display" style={{ fontSize:'clamp(36px, 4vw, 64px)', margin:'18px 0 32px', fontWeight: 300, lineHeight: 1 }}>
                <em>{next.title}</em>
              </h3>
              <div style={{ fontSize: 12, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-soft)', marginBottom: 32 }}>
                {next.venue} · {next.season}
              </div>
              <button className="btn btn--ghost" onClick={()=>onOpen(next.id)}>
                Read this story <Icon.Arrow/>
              </button>
            </div>
            <a href="#" onClick={(e)=>{e.preventDefault(); onOpen(next.id);}}>
              <div className="frame frame--wide">
                <img src={next.cover} alt=""/>
              </div>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { WeddingsIndex, CaseStudy });