/* global React */
const { useState: useS_h, useEffect: useE_h, useRef: useR_h } = React;

function Home() {
  const { products, navigate, looks, site } = useStore();
  const parallaxRef = useR_h(null);
  const [activeLook, setActiveLook] = useS_h(null);

  useE_h(() => {
    const fn = () => {
      if (!parallaxRef.current) return;
      const y = window.scrollY;
      parallaxRef.current.style.transform = `translateY(${y * 0.18}px)`;
    };
    addEventListener("scroll", fn, { passive: true });
    return () => removeEventListener("scroll", fn);
  }, []);

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero concrete">
        <div ref={parallaxRef} style={{position:"absolute",inset:"-10% 0",zIndex:1,pointerEvents:"none",opacity:.7,
          background:"radial-gradient(ellipse at 50% 30%, rgba(255,215,0,.05), transparent 60%)"}}></div>

        <Logo variant="horizontal" tone="light" className="hero-logo"/>

        <div className="hero-tag">{site.slogan}</div>

        <div className="scroll-hint">
          <span>Scroll</span>
          <div className="line"></div>
        </div>
      </section>

      {/* MARQUEE band introducing collection */}
      <section style={{position:"relative",padding:"40px 0 0",overflow:"hidden",background:"var(--graphite)"}}>
        <div style={{position:"relative",height:54,overflow:"hidden",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
          <div className="marquee" style={{position:"static",fontSize:38,opacity:.05}}>
            <div className="marquee-track">
              <span>COLLECTION БАЗА · COLLECTION БАЗА · COLLECTION БАЗА · COLLECTION БАЗА · </span>
              <span>COLLECTION БАЗА · COLLECTION БАЗА · COLLECTION БАЗА · COLLECTION БАЗА · </span>
            </div>
          </div>
        </div>

        <Reveal className="" delay={50}>
          <div style={{maxWidth:"var(--maxw)",margin:"60px auto 50px",padding:"0 40px",display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:40,flexWrap:"wrap"}}>
            <div>
              <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:18}}>{site.collectionEyebrow}</div>
              <h2 className="h-display" style={{fontSize:"clamp(56px,8vw,128px)"}}>
                Коллекция<br/>{site.collectionName}
              </h2>
            </div>
            <div style={{maxWidth:380,fontFamily:"var(--f-display)",fontWeight:300,fontSize:16,lineHeight:1.6,color:"var(--gray)"}}>
              Шесть предметов, которые становятся гардеробом. Бетонная архитектура кроя, тяжёлый трикотаж, никаких компромиссов.
            </div>
          </div>
        </Reveal>
      </section>

      {/* Horizontal product showcase */}
      <section style={{padding:"40px 0 100px",background:"var(--graphite)"}}>
        <div className="h-scroll">
          {products.slice(0, 4).map((p, i) => (
            <Reveal key={p.id} delay={i * 80}>
              <a className="product-card" href={`#product/${p.id}`}
                 onClick={(e)=>{e.preventDefault();navigate(`product/${p.id}`);}}>
                <div className="product-media">
                  {p.tag === "NEW" && <span className="product-tag gold">New</span>}
                  <img className="main" src={p.img[0]} alt={p.name} loading="lazy"/>
                  <img className="alt" src={p.img[1]} alt="" loading="lazy"/>
                </div>
                <div className="product-meta">
                  <div>
                    <div className="name">{p.name}</div>
                    <div className="mono" style={{fontSize:11,color:"var(--gray-2)",marginTop:8,letterSpacing:".18em",textTransform:"uppercase"}}>{p.nameEn} · БАЗА</div>
                  </div>
                  <div className="price">{p.price.toLocaleString("ru-RU")} ₽</div>
                </div>
              </a>
            </Reveal>
          ))}
          <div style={{flex:"0 0 40px"}}></div>
        </div>
      </section>

      {/* BRAND STATEMENT / SLOGAN */}
      <section className="slogan-section concrete">
        <div className="marquee" style={{top:"20%"}}>
          <div className="marquee-track">
            <span>STRENGTH · INDEPENDENCE · ARCHITECTURE · SILHOUETTE · </span>
            <span>STRENGTH · INDEPENDENCE · ARCHITECTURE · SILHOUETTE · </span>
          </div>
        </div>
        <Reveal>
          <div style={{maxWidth:"var(--maxw)",margin:"0 auto",position:"relative",zIndex:2}}>
            <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:30,letterSpacing:".32em"}}>МАНИФЕСТ · 01</div>
            <p className="slogan">
              {site.manifestoHead}<br/>
              <em>{site.manifestoBody}</em>
            </p>
            <div style={{marginTop:60,display:"flex",gap:24,alignItems:"center",fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".24em",textTransform:"uppercase",color:"var(--gray-2)"}}>
              <span style={{width:40,height:1,background:"var(--gold)"}}></span>
              <span>Diana Sandler, основатель</span>
            </div>
          </div>
        </Reveal>
      </section>

      {/* Look strip — editorial photography (clickable → shop the look) */}
      <section className="look-grid">
        {looks.filter(l => [9, 2, 8].includes(l.id)).map((look, i) => (
          <Reveal key={look.id} as="figure" delay={i*120}>
            <button className="look-tile look-tile-flat" onClick={()=>setActiveLook(look)}>
              <img src={look.src} alt={look.title} loading="lazy"/>
              <div className="look-tile-overlay">
                <span className="look-tile-shop">Shop the look →</span>
              </div>
              <div className="look-tile-caption">
                <span>Look {String(look.id).padStart(2,"0")}</span>
                <span>{look.title}</span>
              </div>
            </button>
          </Reveal>
        ))}
      </section>

      {activeLook && window.LookModal && <window.LookModal look={activeLook} onClose={()=>setActiveLook(null)}/>}

      {/* Manifesto cards */}
      <section className="manifesto">
        {[
          { n:"01", h:"Сделано в России", p:"Малые партии в собственном ателье. Каждый шов под контролем дизайнера. Без аутсорса, без массмаркета." },
          { n:"02", h:"Скульптурный крой", p:"Лекала разработаны на живых телах. Силуэт ставит тебя в позу — и оставляет в ней." },
          { n:"03", h:"Без сезонов", p:"БАЗА — это не дроп. Это система. Каждая следующая коллекция надстраивается, ничто не устаревает." },
        ].map((m,i)=>(
          <Reveal key={i} delay={i*120} className="manifesto-card">
            <span className="num">— {m.n} /03</span>
            <h3>{m.h}</h3>
            <p>{m.p}</p>
          </Reveal>
        ))}
      </section>

      {/* NEW COLLECTION TEASER */}
      <section className="new-coll" data-cursor="hover" onClick={()=>navigate("catalog")}>
        <div className="new-coll-media">
          <img src="assets/look-01.jpg" alt="Новая коллекция" loading="lazy"/>
        </div>
        <Reveal className="new-coll-copy">
          <span className="eyebrow">{site.newCollEyebrow}</span>
          <h2>{site.newCollHead.split("\n").map((line,i)=>(<React.Fragment key={i}>{i>0 && <br/>}{line}</React.Fragment>))}</h2>
          <p>{site.newCollBody}</p>
          <div style={{marginTop:20,display:"flex",gap:20,flexWrap:"wrap"}}>
            <button className="btn btn-gold" onClick={(e)=>{e.stopPropagation();navigate("catalog");}}>
              В каталог <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={(e)=>e.stopPropagation()}>
              Оставить почту
            </button>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

window.Home = Home;