// noir-home.jsx — Bold Noir homepage sections (extracted from inline HTML)

function NoirHome({ setRoute }) {
  const { products } = window.EVERLIT_DATA;

  // cycle hero seal
  const [seal, setSeal] = React.useState(0);
  const seals = ["rose-b","dragon-heart","horus","madonna","bee","skull","xila","flower-heart"];
  React.useEffect(() => {
    const t = setInterval(() => setSeal(s => (s+1) % seals.length), 3600);
    return () => clearInterval(t);
  }, []);

  // process scrub
  const [step, setStep] = React.useState(1);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.5) {
          setStep(parseInt(e.target.dataset.step));
        }
      });
    }, { threshold: 0.55 });
    document.querySelectorAll(".process-step").forEach(s => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  // hero mouse tilt
  React.useEffect(() => {
    const hero = document.querySelector(".hero");
    if (!hero) return;
    const handler = (e) => {
      const r = hero.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      const ring = hero.querySelector(".hero-ring");
      const ringIn = hero.querySelector(".hero-ring-inner");
      const stage = hero.querySelector(".hero-stage");
      if (ring) ring.style.setProperty("--tilt-x", `${x*40}px`);
      if (ring) ring.style.setProperty("--tilt-y", `${y*40}px`);
      if (ringIn) ringIn.style.setProperty("--tilt-x", `${x*-30}px`);
      if (ringIn) ringIn.style.setProperty("--tilt-y", `${y*-30}px`);
    };
    hero.addEventListener("mousemove", handler);
    return () => hero.removeEventListener("mousemove", handler);
  }, []);

  const ringOuter = ["rose-b","horus","skull","bee","madonna","cat","flower-heart","dragon-heart","xila","veiled","monogram-ba","potion"];
  const ringInner = ["bow-heart","blossom","home-heart","flower-small","birthday-18","rose-b-2","flower-heart-2","cat-2"];

  const labels = ["Draught","Cut","Handle","Pour","Proof"];
  const bodies = [
    "Every commission begins on tracing paper. The design is sketched at actual size, then again at four-times scale. Botanical references pulled from Redouté, Besler, and the RHS archive. The drawing is revised by hand until it holds at 30 millimeters.",
    "The die is cut from cold-rolled brass bar stock on a 1952 Sheldon lathe, then engraved by a four-axis mill at 0.04mm step-over. The tolerance is tighter than printing — because the wax will find every imperfection.",
    "Every handle is turned on a wood lathe from European beech, rubbed with beeswax and burnished. The brass collar is press-fit — no glue, no pins. A seal handle should outlive the person holding it.",
    "Wax is formulated in-house: beeswax for flexibility, shellac for shine, carnuba for snap. Pigment ground on a marble slab. Poured in small batches. Each stick is broken from the mold by hand.",
    "Before any die leaves the bench, it is pressed into cream cotton at 60°C. The relief must stand at 0.8mm. The edge must break clean. If the first impression does not hold, the die is re-cut. There is no second grade.",
  ];
  const titles = [
    "A drawing, in graphite.","Brass, turned on a lathe.","Beech, turned by hand.","Wax, a single flame.","The test impression.",
  ];
  const stageImgs = [
    "assets/editorial/raw-2.jpg","assets/editorial/raw-3.jpg","assets/editorial/raw-4.jpg","assets/editorial/raw-6.jpg","assets/editorial/raw-5.jpg"
  ];

  const topTen = products.slice(0, 10);

  const scrollHorz = (dir) => {
    const tr = document.getElementById("horzTrack");
    if (tr) tr.scrollBy({ left: dir * 460, behavior: "smooth" });
  };

  return (
    <React.Fragment>
      {/* HERO */}
      <section className="hero" data-screen-label="01 Hero">
        <div className="hero-spotlight"></div>
        <div className="hero-ring" style={{transform:"translate(var(--tilt-x,0), var(--tilt-y,0))"}}>
          {ringOuter.map((id, i) => (
            <div key={id} className="ring-dot" style={{
              backgroundImage: `url('assets/products/${id}.jpg')`,
              transform: `rotate(${i*30}deg) translateY(0)`
            }}/>
          ))}
        </div>
        <div className="hero-ring-inner" style={{transform:"translate(var(--tilt-x,0), var(--tilt-y,0))"}}>
          {ringInner.map((id, i) => (
            <div key={id} className="ring-dot" style={{
              width:"42px", height:"42px", marginLeft:"-21px",
              backgroundImage: `url('assets/products/${id}.jpg')`,
              transform: `rotate(${i*45}deg) translateY(0)`
            }}/>
          ))}
        </div>
        <div className="hero-stage">
          <div className="hero-stage-ring"></div>
          <div className="hero-stage-ring"></div>
          <div className="hero-stage-ring"></div>
          <div className="hero-stage-seal" id="heroStageSeal" style={{
            backgroundImage: `url('assets/products/${seals[seal]}.jpg')`,
            transition: "background-image 0.5s ease"
          }}></div>
        </div>
        <div className="hero-content">
          <div className="hero-kicker"><span className="line"></span>Est. MMXX · Wax & Brass · New York<span className="line"></span></div>
          <h1 className="hero-title">
            <span className="word"><span>Close</span></span>
            {" "}
            <span className="word"><span>every</span></span>
            {" "}
            <span className="word"><span>letter.</span></span>
          </h1>
          <p className="hero-sub">Heirloom brass seals, hand-poured wax, and the quiet ceremony of sending something that will outlive the envelope.</p>
        </div>
        <div className="hero-wax" aria-hidden="true">
          {[[12,0,8],[24,2.1,6],[38,4.5,10],[52,1.3,7],[66,3.8,8],[78,0.9,9],[88,5.2,6]].map((d,i) => (
            <div key={i} className="wax-drop" style={{left:`${d[0]}%`, animationDelay:`${d[1]}s`, width:`${d[2]}px`}}/>
          ))}
        </div>
        <div className="hero-scroll">Scroll · Begin</div>
        <div className="hero-ticker">
          <div className="ticker-track">
            {[0,1].map(k => (
              <span key={k}>· The Rosa · Botanical No. XV · <span className="dot">◆</span> · Bastet · Mythic Relief No. XVI · <span className="dot">◆</span> · The Wyrm · Commissioned No. IV · <span className="dot">◆</span> · The Buckaroo · Commissioned No. II · <span className="dot">◆</span> · Orans · Devotional No. XVII · <span className="dot">◆</span> · Apiary · Natural History No. V · <span className="dot">◆</span> · </span>
            ))}
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto" data-screen-label="02 Manifesto">
        <div className="manifesto-bg" data-parallax="0.3"></div>
        <div className="manifesto-left">
          <div className="manifesto-quote-mark">"</div>
          <h2 className="manifesto-quote reveal">
            A letter that <em>can be sealed</em> is a letter that means to be kept.
          </h2>
        </div>
        <div className="manifesto-right">
          <div className="manifesto-paragraphs">
            <p className="reveal delay-1">Everlit Art is a Brooklyn atelier for wax seals and their instruments — brass dies turned on a Sheldon lathe, wax poured in small batches over a single flame, and the slow work of making something that a screen cannot replicate.</p>
            <p className="reveal delay-2">We have shipped to five thousand addresses across thirty-one countries. Every seal is tested on cream cotton paper before it leaves the bench. If the relief does not stand, the die does not ship.</p>
          </div>
          <div className="manifesto-sig reveal delay-3">Everlit Art · Est. MMXX · Brooklyn, NY</div>
        </div>
      </section>

      {/* HORZ GALLERY */}
      <section className="horz-section" data-screen-label="03 Signature Seals" id="shop">
        <div className="horz-header">
          <div>
            <div className="section-kicker">The Collection · 017 Designs</div>
            <h2 className="horz-title">Signature<br/><em>in brass & wax</em></h2>
          </div>
          <div className="horz-nav">
            <button className="horz-arrow" onClick={() => scrollHorz(-1)} data-hover>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"><path d="M9 2 L3 7 L9 12 M3 7 H13" strokeLinecap="round"/></svg>
            </button>
            <button className="horz-arrow" onClick={() => scrollHorz(1)} data-hover>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"><path d="M5 2 L11 7 L5 12 M11 7 H1" strokeLinecap="round"/></svg>
            </button>
          </div>
        </div>
        <div className="horz-track-wrap">
          <div className="horz-track" id="horzTrack">
            {topTen.map((p, i) => (
              <div key={p.id} className="horz-card" data-hover onClick={() => setRoute({name:"product", id:p.id})}>
                <div className="horz-card-image">
                  <span className="horz-card-num">N° {String(i+1).padStart(2,"0")} / 17</span>
                  {p.tag && <span className="horz-card-tag">{p.tag}</span>}
                  <img src={p.image} alt={p.name}/>
                </div>
                <div className="horz-card-meta"><span>{p.collection} · {p.shape || "Round 30mm"}</span><span className="price">${p.price}</span></div>
                <h3 className="horz-card-name">{p.name}</h3>
                <p className="horz-card-sub">{p.subtitle}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="process" data-screen-label="04 Craft" id="craft">
        <div style={{maxWidth:"1400px",margin:"0 auto 80px"}}>
          <div className="section-kicker">The Making · Eleven Stages</div>
          <h2 className="section-title">A seal is <em>slower</em><br/>than a screen.</h2>
        </div>
        <div className="process-grid">
          <div className="process-sticky">
            <div className="process-stage">
              {stageImgs.map((src, i) => (
                <div key={i} className={"process-stage-img" + (step === i+1 ? " active" : "")} style={{backgroundImage:`url('${src}')`}}/>
              ))}
              <div className="process-stage-overlay"></div>
              <div className="process-stage-num">{String(step).padStart(2,"0")}</div>
              <div className="process-stage-label">{labels[step-1]}</div>
            </div>
          </div>
          <div className="process-steps">
            {[1,2,3,4,5].map(n => (
              <div key={n} className={"process-step" + (step===n?" active":"")} data-step={n}>
                <div className="process-step-num">0{n} · {labels[n-1]}</div>
                <h3 className="process-step-title">{titles[n-1]}</h3>
                <p className="process-step-body">{bodies[n-1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EDITORIAL */}
      <section className="editorial" data-screen-label="05 Editorial" id="archive">
        <div className="editorial-header">
          <div className="section-kicker">Archive · The Record</div>
          <h2 className="section-title">Five years, <em>seventeen thousand</em> seals.</h2>
        </div>
        <div className="editorial-grid">
          <div className="ed-card ed-card-1" data-parallax="0.2" data-hover>
            <img src="assets/huoqi/cf9a.jpg" alt="Wax impression"/>
            <div className="ed-card-caption"><span>Pl. I · Rosa</span><span>30mm · 2026</span></div>
          </div>
          <div className="ed-card ed-card-2" data-parallax="-0.15" data-hover>
            <img src="assets/huoqi/4278.jpg" alt="Paper and seal"/>
            <div className="ed-card-caption"><span>Pl. II · Atelier</span><span>Brooklyn</span></div>
          </div>
          <div className="ed-card ed-card-3" data-parallax="0.1" data-hover>
            <img src="assets/huoqi/b463.jpg" alt="Brass die"/>
            <div className="ed-card-caption"><span>Pl. III · Die</span><span>Brass · Beech</span></div>
          </div>
          <div className="ed-card ed-card-4" data-parallax="-0.2" data-hover>
            <img src="assets/hero/detail-label.jpg" alt="Label"/>
            <div className="ed-card-caption"><span>Pl. IV · Label</span><span>Letterpress</span></div>
          </div>
          <div className="ed-card ed-card-5" data-parallax="0.15" data-hover>
            <img src="assets/editorial/raw-7.jpg" alt="Wide editorial"/>
            <div className="ed-card-caption"><span>Pl. V · Correspondence</span><span>Cream Cotton 240gsm</span></div>
          </div>
        </div>
      </section>

      {/* WAX STRIP */}
      <section className="waxstrip" data-screen-label="06 Wax">
        <div className="waxstrip-inner">
          <div className="waxstrip-left">
            <div className="section-kicker">The Wax · Six Tones</div>
            <h2 className="section-title">Poured in <em>small batches</em>.</h2>
            <p>Beeswax, shellac, and carnauba — ground with mineral pigment on a marble slab. Every color passes a ninety-second set-time test and a cold-snap test at 4°C before it leaves the bench.</p>
          </div>
          <div className="waxstrip-dots">
            {window.EVERLIT_DATA.waxColors.map(w => (
              <div key={w.id} className="wax-chip" style={{"--hex": w.hex}}>
                <div className="wax-chip-label" style={{color: ["#e9dfcc","#c28a7a"].includes(w.hex) ? "#3a3328" : undefined, textShadow: ["#e9dfcc","#c28a7a"].includes(w.hex) ? "none" : undefined}}>{w.name.split(" ")[0]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CLOSER */}
      <section className="closer" data-screen-label="07 Closer" id="atelier">
        <div className="closer-bg" data-parallax="-0.3"></div>
        <div className="closer-content">
          <div className="closer-eyebrow">The commission book is open</div>
          <h2 className="closer-headline">Begin your <em>heirloom</em>.</h2>
          <button className="closer-cta" onClick={() => setRoute("custom")} data-hover>
            <span>Commission a Seal</span>
            <span>→</span>
          </button>
        </div>
      </section>
    </React.Fragment>
  );
}

window.NoirHome = NoirHome;