/* global React */
const { useState: uS1, useEffect: uE1 } = React;

// ============================================================
// HOME — full-bleed wax impression with serif wordmark over
// ============================================================
function HomePage({ setRoute, addToCart }) {
  const { products, collections, reviews } = window.EVERLIT_DATA;

  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ padding: 0, position: "relative", height: "92vh", minHeight: 680, overflow: "hidden" }}>
        <img src="assets/hero/tile-hero.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,16,10,0.55) 0%, rgba(20,16,10,0.25) 40%, rgba(20,16,10,0.7) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "var(--pad)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", color: "#f4ead8", fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase" }}>
            <span>Volume I · № 007</span>
            <span>The Wax Seal Review</span>
            <span>Spring, MMXXVI</span>
          </div>

          <div style={{ textAlign: "center", color: "#f4ead8" }}>
            <div style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.4em", textTransform: "uppercase", opacity: 0.85, marginBottom: 18 }}>Three-dimensional seals, carved in brass</div>
            <h1 className="display" style={{ fontSize: "clamp(88px, 15vw, 240px)", margin: 0, color: "#f4ead8", letterSpacing: "-0.04em", lineHeight: 0.88 }}>
              Everlit
            </h1>
            <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: "clamp(20px, 2.4vw, 32px)", margin: "18px 0 30px", opacity: 0.92 }}>
              the art of closing a letter
            </div>
            <div style={{ display: "inline-flex", gap: 16, flexWrap: "wrap", justifyContent: "center" }}>
              <button className="btn" style={{ background: "#f4ead8", color: "#1a1714", borderColor: "#f4ead8" }} onClick={() => setRoute("shop")}>Enter the shop</button>
              <button className="btn btn-ghost" style={{ color: "#f4ead8", borderColor: "#f4ead8" }} onClick={() => setRoute("custom")}>Commission a seal</button>
            </div>
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", color: "#f4ead8", fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
            <span style={{ maxWidth: 220, textTransform: "none", fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 15, letterSpacing: 0 }}>
              "One of the best I've ever seen. Very good detail." — Brian, Etsy
            </span>
            <span>Scroll ↓</span>
            <span>895 orders · 5.0 ★ · 152 reviews</span>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div>
              <div className="eyebrow">Manifesto</div>
              <div style={{ marginTop: 24, fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 18, color: "var(--ink-muted)" }}>Everlit, verb —<br/>to be always burning, always lit.</div>
            </div>
            <div>
              <p className="display" style={{ fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1.06, margin: 0, letterSpacing: "-0.015em" }}>
                We make <span className="italic-accent">three-dimensional</span> wax seals at the intersection of classical draughtsmanship and <span className="italic-accent">micron-level</span> machining — one brass die, one letter, one small act of ceremony at a time.
              </p>
              <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 32, fontFamily: "var(--sans)", fontSize: 13, color: "var(--ink-soft)", borderTop: "1px solid var(--rule)", paddingTop: 28 }}>
                <div>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 42, lineHeight: 1 }}>3,482</div>
                  <div className="eyebrow" style={{ marginTop: 10 }}>Seals pressed</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 42, lineHeight: 1 }}>5.0</div>
                  <div className="eyebrow" style={{ marginTop: 10 }}>Average rating</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 42, lineHeight: 1 }}>1.8<span style={{ fontSize: 18, fontStyle: "italic" }}>mm</span></div>
                  <div className="eyebrow" style={{ marginTop: 10 }}>Avg. relief depth</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 42, lineHeight: 1 }}>5–10</div>
                  <div className="eyebrow" style={{ marginTop: 10 }}>Days to your door</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* FEATURED EDITORIAL GRID — real product photography */}
      <section>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56 }}>
            <div>
              <div className="eyebrow">Current Season · Six seals photographed</div>
              <h2 className="section-title" style={{ marginTop: 12 }}>From the <span className="italic-accent">atelier floor</span></h2>
            </div>
            <button className="btn-link" onClick={() => setRoute("shop")}>All seals →</button>
          </div>

          {/* Asymmetric editorial grid: tall + two stacked, then row of three */}
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }}>
            {/* Left: tall hero */}
            <EditorialCard
              img="assets/huoqi/adfd.jpg"
              n="I"
              name="Meadow Hare"
              subtitle="Botanical Study · brass, pearwood handle"
              caption="Fig. — die at rest, morning light"
              tall
              onClick={() => setRoute({ name: "product", id: "blossom" })}
            />
            {/* Right: two stacked */}
            <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 32 }}>
              <EditorialCard
                img="assets/huoqi/e3b9.jpg"
                n="II"
                name="Pine & Swallows"
                subtitle="Landscape relief · pressed in antique gold"
                caption="Fig. — impression, raking light"
                onClick={() => setRoute({ name: "product", id: "blossom" })}
              />
              <EditorialCard
                img="assets/huoqi/1812.jpg"
                n="III"
                name="Rosa · Open Bloom"
                subtitle="Pressed on ivory, set on cut glass"
                caption="Fig. — still life, Hangzhou atelier"
                onClick={() => setRoute({ name: "product", id: "rose-b" })}
              />
            </div>
          </div>

          {/* Row of three smaller */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 32 }}>
            <EditorialCard
              img="assets/huoqi/3646.jpg"
              n="IV"
              name="Papillon House"
              subtitle="Private cipher · sage wax, on decanter"
              caption="Fig. — commission, Est. 2020"
              onClick={() => setRoute("custom")}
            />
            <EditorialCard
              img="assets/huoqi/0a99.jpg"
              n="V"
              name="Meadow Hare, pressed"
              subtitle="Impression in bone ivory wax"
              caption="Fig. — die & seal, staged"
              onClick={() => setRoute({ name: "product", id: "blossom" })}
            />
            <EditorialCard
              img="assets/huoqi/4278.jpg"
              n="VI"
              name="Pine Forest · Die"
              subtitle="Raw brass on quarried stone"
              caption="Fig. — studio shot, daylight"
              onClick={() => setRoute({ name: "product", id: "blossom" })}
            />
          </div>
        </div>
      </section>

      {/* EDITORIAL SPLIT: Marauders Map */}
      <section style={{ background: "var(--surface)", marginTop: 40 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <img src="assets/huoqi/d703-1.jpg" alt="" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover" }} />
              <div className="fig-caption" style={{ position: "absolute", bottom: -28, left: 0 }}>Fig. VII — The Cartographer's Oath, brass die, scalloped, 32mm</div>
            </div>
            <div>
              <div className="eyebrow">Commissioned Archive</div>
              <h2 className="section-title" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 16 }}>A seal for<br/><span className="italic-accent">a private</span><br/>cartographer.</h2>
              <p style={{ fontSize: 18, lineHeight: 1.55, marginTop: 28, maxWidth: "44ch", color: "var(--ink-soft)" }}>
                Six weeks from napkin to finished die. Twenty-one proof pressings. A circular map, a ribbon of solemn text around the rim, castles and rivers carved in negative — the deepest commission we have ever cut.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: "44ch", color: "var(--ink-soft)", fontStyle: "italic" }}>
                "I am always on the lookout for seals that could pass as historical objects, and this one is the best I've ever seen." — Brian
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 18 }}>
                <button className="btn btn-ghost" onClick={() => setRoute("custom")}>Commission your own</button>
                <button className="btn-link" onClick={() => setRoute("custom")}>View the archive →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THE FOUR COLLECTIONS */}
      <section>
        <div className="container">
          <div className="eyebrow">Four Collections</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>An <span className="italic-accent">archive</span>, arranged.</h2>
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
            {collections.map((c, i) => (
              <button key={c.id} onClick={() => setRoute("collections")} style={{ textAlign: "left", cursor: "pointer" }}>
                <div style={{ position: "relative", aspectRatio: "3/4", overflow: "hidden", background: "var(--ivory-deep)" }}>
                  <img src={c.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.2)" }} />
                  <div style={{ position: "absolute", bottom: 18, left: 18, color: "#f4ead8", fontFamily: "var(--serif-display)", fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase" }}>
                    № {String(i+1).padStart(2,"0")}
                  </div>
                </div>
                <div style={{ marginTop: 20 }}>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 26, lineHeight: 1.1 }}>{c.name}</div>
                  <div className="fig-caption" style={{ marginTop: 6 }}>{c.count} pieces</div>
                  <div style={{ fontSize: 15, color: "var(--ink-soft)", marginTop: 10, fontStyle: "italic" }}>{c.description}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CRAFT PROCESS */}
      <section style={{ background: "var(--ink)", color: "#f4ead8", margin: "40px 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 72 }}>
            <div className="eyebrow" style={{ color: "var(--bronze)" }}>The Making</div>
            <h2 className="section-title" style={{ color: "#f4ead8", marginTop: 16 }}>Eleven stages,<br/><span className="italic-accent">by hand.</span></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40, borderTop: "1px solid rgba(244,234,216,0.15)", paddingTop: 48 }}>
            {[
              { n: "I", title: "Drawing", body: "Your idea enters as a napkin sketch, a photograph, or a Pinterest board. Our draughtsman redraws it as a working engraving plan." },
              { n: "II", title: "Proofing", body: "A charcoal proof in wax on tracing paper — so you can hold the impression in your hand before a single gram of brass is cut." },
              { n: "III", title: "Engraving", body: "Five-axis CNC at 2 microns, then a pass by hand. Each relief is undercut so the wax releases clean, without a smear." },
              { n: "IV", title: "Sealing", body: "The die is married to its pearwood handle, stamped with the EVERLIT mark, nested in an oxblood linen case, and posted to you." }
            ].map(s => (
              <div key={s.n}>
                <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 64, color: "var(--bronze)", lineHeight: 1 }}>{s.n}.</div>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 24, marginTop: 12 }}>{s.title}</div>
                <div style={{ fontSize: 14, color: "rgba(244,234,216,0.7)", marginTop: 12, lineHeight: 1.6 }}>{s.body}</div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 64 }}>
            <button className="btn" style={{ background: "var(--bronze)", borderColor: "var(--bronze)" }} onClick={() => setRoute("atelier")}>Visit the atelier →</button>
          </div>
        </div>
      </section>

      {/* LETTERS OF PRAISE */}
      <section>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 64 }}>
            <div className="eyebrow">Letters of Praise</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>A correspondence <span className="italic-accent">of five stars.</span></h2>
            <div style={{ marginTop: 16, fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 20, color: "var(--ink-soft)" }}>
              895 orders · 152 reviews · not a single below 5 ★
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
            {reviews.slice(0,3).map(r => (
              <figure key={r.name} style={{ margin: 0, padding: "32px 0", borderTop: "1px solid var(--rule)" }}>
                <Stars filled={r.rating} size={14} />
                <blockquote style={{ margin: "18px 0 20px", fontFamily: "var(--serif-display)", fontSize: 20, lineHeight: 1.45, fontStyle: "italic" }}>
                  "{r.text}"
                </blockquote>
                <figcaption className="fig-caption">— {r.name} · {r.date}</figcaption>
              </figure>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 48 }}>
            <button className="btn-link" onClick={() => setRoute("reviews")}>Read all 152 letters →</button>
          </div>
        </div>
      </section>

      {/* JOURNAL TEASE */}
      <section style={{ background: "var(--surface)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48 }}>
            <div>
              <div className="eyebrow">The Journal</div>
              <h2 className="section-title" style={{ marginTop: 12 }}>Essays on the <span className="italic-accent">slow letter.</span></h2>
            </div>
            <button className="btn-link" onClick={() => setRoute("journal")}>All essays →</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
            {window.EVERLIT_DATA.journal.slice(0,3).map(j => (
              <article key={j.id} style={{ cursor: "pointer" }} onClick={() => setRoute("journal")}>
                <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
                  <img src={j.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
                <div className="fig-caption" style={{ marginTop: 20 }}>{j.kicker} · {j.date} · {j.read}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 26, lineHeight: 1.15, margin: "12px 0 10px", fontWeight: 400 }}>{j.title}</h3>
                <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.5, margin: 0 }}>{j.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* BESPOKE CALLOUT */}
      <section>
        <div className="container">
          <div style={{ textAlign: "center", padding: "40px 0" }}>
            <div className="eyebrow">Bespoke Commissions</div>
            <h2 className="section-title" style={{ marginTop: 20, fontSize: "clamp(56px, 8vw, 120px)" }}>
              Send us <span className="italic-accent">your idea.</span>
            </h2>
            <p style={{ maxWidth: "60ch", margin: "28px auto 40px", fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)", fontStyle: "italic" }}>
              A family crest. A wedding monogram. A book-press device. A fictional school. A private cartography. If it can be drawn, it can be pressed.
            </p>
            <button className="btn" onClick={() => setRoute("custom")}>Begin a commission</button>
            <div className="fig-caption" style={{ marginTop: 24 }}>From $65 · Six-week lead time · Proofs before production</div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ProductCard({ product, onClick, index }) {
  return (
    <div className="product-card" onClick={onClick}>
      <div className="product-card-img">
        {product.tag && <div className="product-card-tag">{product.tag}</div>}
        <img src={product.image} alt={product.name} />
        {index && (
          <div style={{ position: "absolute", bottom: 14, right: 14, fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 44, color: "rgba(244,234,216,0.85)", lineHeight: 1, mixBlendMode: "difference" }}>
            № {String(index).padStart(2,"0")}
          </div>
        )}
      </div>
      <div className="product-card-meta">
        <div>
          <div className="product-card-name">{product.name}<small>{product.subtitle}</small></div>
          <div className="fig-caption" style={{ marginTop: 6 }}>{product.shape}</div>
        </div>
        <div className="product-card-price">
          {product.price > 0 ? `$${product.price}` : "—"}
        </div>
      </div>
    </div>
  );
}

window.HomePage = HomePage;
window.ProductCard = ProductCard;

// Editorial card — full-bleed image with roman numeral, product name, fig-caption
function EditorialCard({ img, n, name, subtitle, caption, tall, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        minHeight: tall ? 720 : 340,
        overflow: "hidden",
        cursor: "pointer",
        background: "var(--ink)",
        textAlign: "left",
        display: "block",
      }}
      className="editorial-card"
    >
      <img
        src={img}
        alt={name}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          transition: "transform 1.2s var(--ease)",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "linear-gradient(180deg, rgba(20,16,10,0) 30%, rgba(20,16,10,0.75) 100%)",
        }}
      />
      {/* Top-left: Roman numeral */}
      <div
        style={{
          position: "absolute",
          top: 20,
          left: 24,
          color: "rgba(244,234,216,0.85)",
          fontFamily: "var(--serif-display)",
          fontStyle: "italic",
          fontSize: tall ? 40 : 28,
          lineHeight: 1,
        }}
      >
        № {n}
      </div>
      {/* Bottom content */}
      <div
        style={{
          position: "absolute",
          left: 24,
          right: 24,
          bottom: 22,
          color: "#f4ead8",
        }}
      >
        <div
          style={{
            fontFamily: "var(--serif-display)",
            fontSize: tall ? 36 : 24,
            lineHeight: 1.1,
            letterSpacing: "-0.01em",
          }}
        >
          {name}
        </div>
        <div
          style={{
            marginTop: 6,
            fontSize: tall ? 15 : 13,
            fontStyle: "italic",
            opacity: 0.85,
            fontFamily: "var(--serif-display)",
          }}
        >
          {subtitle}
        </div>
        <div
          className="fig-caption"
          style={{
            marginTop: 14,
            color: "rgba(244,234,216,0.6)",
            borderTop: "1px solid rgba(244,234,216,0.22)",
            paddingTop: 10,
          }}
        >
          {caption}
        </div>
      </div>
    </button>
  );
}

window.EditorialCard = EditorialCard;
