// D_full_home.jsx — Direction D · Home
// Axial, white-dominant, bordeaux accents. Gallery-editorial, heraldic rhythm.

const D_HERO_EVENTS = ["đám cưới","lễ hỏi","buổi dạ tiệc","lễ tốt nghiệp","buổi phỏng vấn","đêm gala","buổi tiệc công ty","lễ kỷ niệm"];

function DHome({ go }) {
  const [occ, setOcc] = React.useState(null);
  const [heroViz, setHeroViz] = React.useState(false);
  const heroRef = React.useRef(null);
  const [wordIdx, setWordIdx] = React.useState(0);
  const [wordOut, setWordOut] = React.useState(false);
  const prefersReduced = React.useMemo(() => window.matchMedia('(prefers-reduced-motion: reduce)').matches, []);

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setHeroViz(true); obs.disconnect(); }
    }, { threshold: 0.1 });
    if (heroRef.current) obs.observe(heroRef.current);
    return () => obs.disconnect();
  }, []);

  React.useEffect(() => {
    if (prefersReduced) return;
    const id = setInterval(() => {
      setWordOut(true);
      setTimeout(() => {
        setWordIdx(i => (i + 1) % D_HERO_EVENTS.length);
        setWordOut(false);
      }, 500);
    }, 3500);
    return () => clearInterval(id);
  }, [prefersReduced]);

  return (
    <div style={{ background: D.paper }}>

      {/* ═══ HERO — editorial manifesto ══════════════════ */}
      <section style={{ position:'relative', padding:'120px 60px 100px', textAlign:'center', overflow:'hidden', background:D.paperAlt }}>

        <div ref={heroRef} style={{
          opacity: heroViz ? 1 : 0,
          transform: heroViz ? 'translateY(0)' : 'translateY(18px)',
          transition: 'opacity .9s ease, transform .9s ease',
        }}>
          <div style={{ maxWidth:820, margin:'0 auto 44px', height:1,
            background:`linear-gradient(to right, transparent, ${D.bord} 20%, ${D.bord} 80%, transparent)`, opacity:.35 }}/>

          <DEyebrow style={{ marginBottom:28 }}>F·2·F · Cách chúng tôi làm</DEyebrow>

          <h1 style={{ fontFamily:D.serif, fontWeight:400, fontSize:'clamp(28px,3.6vw,46px)',
            lineHeight:1.35, letterSpacing:'-.015em', color:D.ink,
            maxWidth:960, margin:'0 auto' }}>
            Bạn có một{' '}
            <em style={{
              fontStyle:'italic', color:D.bord, display:'inline-block',
              opacity: wordOut ? 0 : 1,
              transform: wordOut ? 'translateY(-8px)' : 'translateY(0px)',
              transition: prefersReduced ? 'none' : 'opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1)',
            }}>
              {D_HERO_EVENTS[wordIdx]}
            </em>
            {' '}quan trọng —<br/>
            <span style={{ fontStyle:'italic', color:D.bord }}>và bạn cần một bộ suit vừa vặn.</span>
          </h1>

          <div style={{ fontFamily:D.sans, fontSize:18, color:D.inkSoft, maxWidth:660,
            margin:'32px auto 0', lineHeight:1.62 }}>
            F·2·F lo trọn: đo tận nơi, chọn vải, chỉnh sửa theo dáng — giao đến tay bạn đúng lúc, với chi phí chỉ bằng{' '}
            <span style={{ fontFamily:"'JetBrains Mono','IBM Plex Mono',monospace", fontSize:20, color:D.bord, fontWeight:600, letterSpacing:'-.01em' }}>5%</span>
            {' '}so với sở hữu.
          </div>

          <div style={{ maxWidth:820, margin:'44px auto 0', height:1,
            background:`linear-gradient(to right, transparent, ${D.bord} 20%, ${D.bord} 80%, transparent)`, opacity:.35 }}/>
        </div>

        <div style={{ marginTop:52, display:'flex', gap:16, justifyContent:'center' }}>
          <DBtn kind="bord" size="lg" onClick={()=>document.getElementById('d-grid-occasions')?.scrollIntoView({ behavior:'smooth', block:'start' })}>
            Chọn một sự kiện
          </DBtn>
          <DBtn kind="ink" size="lg" onClick={()=>go('collection')}>Xem cả tủ đồ</DBtn>
        </div>

        <div style={{ marginTop:80 }}>
          <DRule wide/>
        </div>
      </section>

      {/* ═══ OCCASION GRID — editorial catalog ══════════════════ */}
      <section id="d-grid-occasions" style={{ padding:'60px 60px 120px', background:D.paper }}>
        <div style={{ maxWidth:1400, margin:'0 auto' }}>
          {/* section header — axial */}
          <div style={{ textAlign:'center', marginBottom:60 }}>
            <DLabel>— I —</DLabel>
            <h2 style={{ fontFamily:D.serif, fontWeight:300, fontSize:76, margin:'14px 0 0', letterSpacing:'-.03em', lineHeight:1, color:D.ink }}>
              Bắt đầu <span style={{ fontStyle:'italic', color:D.bord }}>từ sự kiện</span>.
            </h2>
            <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:17, color:D.stone, marginTop:16 }}>
              Sáu loại buổi tối · một trăm năm mươi lăm tối còn trống
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gridAutoRows:'260px', gap:2 }}>
            {OCCASIONS.map((o, i)=>{
              const big = i===0 || i===3;
              return (
                <div key={o.id}
                  onClick={()=>{ setActiveOccD(o.id); go('collection', { occ: o.id }); }}
                  onMouseEnter={()=>setOcc(o.id)}
                  onMouseLeave={()=>setOcc(null)}
                  style={{ gridColumn:'span 1', gridRow: big?'span 2':'span 1',
                    position:'relative', overflow:'hidden', cursor:'pointer', background:o.tone,
                    transition:'all .4s cubic-bezier(0.2,0.8,0.2,1)' }}>
                  <div style={{ position:'absolute', inset:0, backgroundImage:`url('${o.img}')`, backgroundSize:'cover',
                    backgroundPosition:'center', filter:D.imgHero, opacity: occ===o.id ? .95 : .82,
                    transform: occ===o.id ? 'scale(1.04)' : 'scale(1)',
                    transition:'all .7s cubic-bezier(0.2,0.8,0.2,1)' }}/>
                  <div style={{ position:'absolute', inset:0,
                    background:`linear-gradient(to top, ${o.tone}f2 0%, ${o.tone}55 40%, transparent 75%)` }}/>
                  {/* inner heraldic hairline frame — subtle */}
                  <div style={{ position:'absolute', inset:12, border:`1px solid rgba(255,255,255,.2)`, pointerEvents:'none' }}/>
                  <div style={{ position:'absolute', top:22, left:22, right:22, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <span style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:20, color:'rgba(255,255,255,.85)' }}>
                      {toRoman(i+1)}
                    </span>
                    <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.32em', color:'rgba(255,255,255,.85)', fontWeight:600 }}>
                      {o.n} BỘ VEST
                    </span>
                  </div>
                  <div style={{ position:'absolute', bottom:28, left:28, right:28, color:'#fff' }}>
                    <div style={{ fontFamily:D.serif, fontWeight:300, fontSize: big?64:36, lineHeight:1, letterSpacing:'-.02em' }}>{o.t}</div>
                    <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize: big?18:14, color:'rgba(255,255,255,.85)', marginTop:big?12:8 }}>{o.s}</div>
                    <div style={{ marginTop: big?26:16, fontFamily:D.sans, fontSize:9, letterSpacing:'.36em', textTransform:'uppercase', fontWeight:700, color:'#fff',
                      display:'flex', alignItems:'center', gap:10, opacity: occ===o.id ? 1 : .8, transition:'opacity .3s' }}>
                      <span style={{ display:'inline-block', width: occ===o.id ? 26 : 16, height:1, background:'#fff', transition:'width .3s' }}/>
                      Mở chương
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ═══ 87% REVERSED BLOCK — deep bordeaux to black ══════════════════ */}
      <section style={{ background: D.inkDeep, color:'#fff', padding:'140px 60px', position:'relative', overflow:'hidden' }}>
        {/* bordeaux glow */}
        <div style={{ position:'absolute', top:'-40%', left:'-10%', width:'60%', height:'180%',
          background:`radial-gradient(ellipse, ${D.bord}44 0%, transparent 60%)`, filter:'blur(40px)' }}/>
        <div style={{ position:'relative', maxWidth:1240, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:100, alignItems:'center' }}>
          <div>
            <DLabel tone="ivory">Một thống kê · Việt Nam · MMXXIV</DLabel>
            <div style={{ fontFamily:D.serif, fontWeight:200, fontSize:360, lineHeight:.8, letterSpacing:'-.07em', color:'#fff', marginTop:18 }}>
              87<span style={{ fontSize:110, verticalAlign:'super', letterSpacing:'-.02em', color:D.goldSoft }}>%</span>
            </div>
            <DLabel tone="ivory" style={{ marginTop:16 }}>Nguồn: F2F · khảo sát nội bộ · n=412</DLabel>
          </div>
          <div>
            <div style={{ fontFamily:D.serif, fontWeight:300, fontSize:46, lineHeight:1.18, letterSpacing:'-.015em', marginBottom:32 }}>
              đàn ông Việt Nam mặc bộ vest cưới của mình <span style={{ fontStyle:'italic', color:D.goldSoft }}>hai lần</span>, rồi thôi.
            </div>
            <div style={{ fontFamily:D.body, fontSize:18, color:'rgba(255,255,255,.7)', lineHeight:1.75, marginBottom:28 }}>
              Mười lăm triệu đồng, cho một lễ ba giờ và một bữa tối sáu giờ — rồi một túi vải trong tủ, suốt ba mươi năm. F2F sinh ra để gỡ bỏ phép tính này.
            </div>
            <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:26, color:'#fff', paddingLeft:28,
              borderLeft:`2px solid ${D.goldSoft}`, lineHeight:1.45 }}>
              Bạn nên sở hữu ký ức — không phải bộ vest.
            </div>
            <div style={{ marginTop:44, display:'flex', gap:14 }}>
              <DBtn kind="gold" size="md" onClick={()=>go('story')}>Đọc tuyên ngôn đầy đủ</DBtn>
              <DBtn kind="ghost" size="md" onClick={()=>go('collection')}>Xem tủ đồ</DBtn>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ FOUR ACTS — process ══════════════════ */}
      <section style={{ padding:'140px 60px', background:D.paper }}>
        <div style={{ maxWidth:1400, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:68 }}>
            <DLabel>— II —</DLabel>
            <h2 style={{ fontFamily:D.serif, fontWeight:300, fontSize:76, margin:'14px 0 0', letterSpacing:'-.03em', lineHeight:1, color:D.ink }}>
              Bốn hồi. Một <span style={{ fontStyle:'italic', color:D.bord }}>buổi tối</span>.
            </h2>
            <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:17, color:D.stone, marginTop:16 }}>
              Fabric to Fit — quy trình một tập
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)',
            borderTop:`1px solid ${D.bord}`, borderBottom:`1px solid ${D.bord}` }}>
            {[
              ['I','Lựa chọn','Duyệt tủ đồ hoặc kể chúng tôi nghe về buổi tối. Concierge chọn sẵn bốn phương án — bạn chỉ cần chấm.'],
              ['II','Giữ chỗ','Chọn ngày trên lịch trực tiếp. Đặt cọc giữ bộ vest. Nhận lại một tấm vé với mã giữ chỗ.'],
              ['III','Thử vừa','Ghé xưởng 142 Lê Thánh Tôn. Master tailor chỉnh cho vai bạn, eo bạn, buổi tối phía trước.'],
              ['IV','Buổi tối','Mặc. Để lại ấn tượng. Trả bộ vest theo khung giờ đã thoả thuận — chúng tôi giặt, ủi, gập.'],
            ].map(([n,t,b], i)=>(
              <div key={n} style={{ padding:'50px 32px', borderLeft: i>0 ? `1px solid ${D.lineBord}` : 'none', position:'relative' }}>
                <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:60, color:D.bord, fontWeight:300, marginBottom:22, lineHeight:1 }}>{n}.</div>
                <div style={{ fontFamily:D.serif, fontSize:30, lineHeight:1.15, color:D.ink, marginBottom:16, letterSpacing:'-.01em' }}>{t}</div>
                <div style={{ fontFamily:D.body, fontSize:15, lineHeight:1.7, color:D.stone }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ FEATURED — three open slots ══════════════════ */}
      <section style={{ padding:'120px 60px', background:D.paperAlt }}>
        <div style={{ maxWidth:1400, margin:'0 auto' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:52 }}>
            <div>
              <DLabel>— III —</DLabel>
              <h2 style={{ fontFamily:D.serif, fontWeight:300, fontSize:56, letterSpacing:'-.025em', margin:'12px 0 0', color:D.ink }}>
                Ba bộ vest <span style={{ fontStyle:'italic', color:D.bord }}>còn trống</span>.
              </h2>
              <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:16, color:D.stone, marginTop:8 }}>
                Trong tuần này — được master tailor chọn.
              </div>
            </div>
            <DBtn kind="link" onClick={()=>go('collection')}>Xem tất cả {GARMENTS.length} →</DBtn>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:28 }}>
            {GARMENTS.slice(0,3).map((g, i)=>(
              <div key={g.id} onClick={()=>go('pdp',{ id:g.id })} style={{ cursor:'pointer', background:D.paper, border:`1px solid ${D.line}`,
                transition:'all .4s cubic-bezier(0.2,0.8,0.2,1)' }}
                onMouseEnter={e=>{ e.currentTarget.style.borderColor = D.bord; e.currentTarget.style.transform='translateY(-4px)'; }}
                onMouseLeave={e=>{ e.currentTarget.style.borderColor = D.line; e.currentTarget.style.transform='translateY(0)'; }}>
                <div style={{ aspectRatio:'4/5', backgroundImage:`url('${g.img}')`, backgroundSize:'cover', backgroundPosition:'center', filter:D.imgCard }}/>
                <div style={{ padding:'26px 24px' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                    <div style={{ fontFamily:D.serif, fontSize:32, color:D.ink, lineHeight:1, letterSpacing:'-.01em' }}>{g.name}</div>
                    <span style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:18, color:D.bord }}>{toRoman(i+1)}</span>
                  </div>
                  <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:16, color:D.stone, marginTop:4 }}>{g.sub}</div>
                  <div style={{ height:1, background:D.line, margin:'20px 0' }}/>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                    <div>
                      <div style={{ fontFamily:D.serif, fontSize:22 }}>{formatVND(g.price)}</div>
                      <div style={{ fontFamily:D.body, fontSize:12, color:D.stone, marginTop:2 }}>/ {g.days} ngày</div>
                    </div>
                    <div style={{ textAlign:'right' }}>
                      <DLabel>Gần nhất</DLabel>
                      <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:17, color:D.bord, marginTop:2 }}>{g.next}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ INVITATION — visit showroom ══════════════════ */}
      <section style={{ background:D.paper, padding:'120px 60px' }}>
        <div style={{ maxWidth:1120, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center',
          border:`1px solid ${D.bord}`, padding:'64px 64px', position:'relative' }}>
          {/* inner hairline frame */}
          <div style={{ position:'absolute', inset:10, border:`1px solid ${D.lineBord}`, pointerEvents:'none' }}/>
          <div style={{ position:'relative' }}>
            <DLabel style={{ marginBottom:16 }}>— Một lời mời —</DLabel>
            <div style={{ fontFamily:D.serif, fontWeight:300, fontSize:68, lineHeight:1, letterSpacing:'-.03em', color:D.ink }}>
              Ghé <span style={{ fontStyle:'italic', color:D.bord }}>phòng vest</span>.
            </div>
            <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:17, color:D.stone, marginTop:22, lineHeight:1.65 }}>
              142 Lê Thánh Tôn, Q1. Một ấm trà. Sáu bộ vest được tailor chọn riêng cho bạn. Không ràng buộc — chỉ là chuyện trò.
            </div>
            <div style={{ marginTop:32 }}>
              <DBtn kind="bord" size="lg" onClick={()=>go('showroom')}>Đặt lịch ghé thăm</DBtn>
            </div>
          </div>
          <div style={{ aspectRatio:'4/3', backgroundImage:"url('assets/photos/detail_01.jpg')", backgroundSize:'cover', backgroundPosition:'center', filter:D.imgEd, position:'relative' }}>
            <DSeal size={64} style={{ position:'absolute', bottom:-24, right:-24 }} tone="bord"/>
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { DHome });