function HomePage({ navigate, addToCart, openArtwork }) {
  window.useSeo({
    title: "Larissa Fine Art — Original Oil Paintings from Rural Ontario",
    description: "Original oil paintings by Larissa — landscapes, florals and still life from a small studio in Highlands, Ontario. One-of-one works, hand-signed, shipped worldwide.",
    canonical: "https://larissaart.com/",
  });
  const featured = window.PAINTINGS.filter((p) => p.section === "featured")
    .sort((a, b) => (a.sectionOrder || 99) - (b.sectionOrder || 99));
  const natureSubjects = window.PAINTINGS.filter((p) => p.section === "nature-inspiration")
    .sort((a, b) => (a.sectionOrder || 99) - (b.sectionOrder || 99));
  const studioMoments = window.PAINTINGS.filter((p) => p.section === "studio-life")
    .sort((a, b) => (a.sectionOrder || 99) - (b.sectionOrder || 99));

  return (
    <div className="page-enter">
      {/* ============ HERO ============ */}
      <section style={{ position: "relative", minHeight: "100vh", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <img src="assets/larissa-studio.jpg" alt="Larissa in her studio"
          style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(251,245,236,0.18) 0%, rgba(251,245,236,0.05) 30%, rgba(46,42,36,0.55) 100%)"
          }} />
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at 75% 50%, transparent 0%, rgba(46,42,36,0.35) 80%)"
          }} />
        </div>

        <div style={{ position: "relative", zIndex: 2, maxWidth: 1440, margin: "0 auto", padding: "180px 40px 80px",
          minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <div style={{ maxWidth: 720, color: "var(--warm-white)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <span className="gold-rule" style={{ background: "var(--sunflower-soft)" }} />
              <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>
                Spring Collection · 2026
              </span>
            </div>
            <h1 className="h-display" style={{
              fontSize: "clamp(56px, 7.2vw, 116px)",
              color: "var(--warm-white)",
              fontWeight: 300,
              margin: 0,
              textShadow: "0 1px 30px rgba(0,0,0,0.18)"
            }}>
              Art Inspired by<br />
              <em style={{ fontStyle: "italic", color: "var(--sunflower-soft)" }}>Nature's</em> Beauty
            </h1>
            <p style={{
              marginTop: 32, maxWidth: 560,
              fontSize: 17, lineHeight: 1.65,
              color: "rgba(255,255,255,0.92)", fontFamily: "Inter", margin: "0px", width: "450px"
            }}>
              Original oil paintings capturing the joy and beauty of Canadian landscapes,
              vibrant florals, and peaceful living. Hand-painted in a sunlit studio on the
              edge of Highlands East.
            </p>
            <div style={{ marginTop: 44, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <button className="btn btn-gold" onClick={() => navigate("gallery")}>
                View the Gallery <Icon.ArrowR />
              </button>
              <button className="btn btn-ghost" style={{ color: "var(--warm-white)", borderColor: "var(--warm-white)" }} onClick={() => navigate("about")}>
                Meet the Artist
              </button>
            </div>
          </div>
        </div>

        {/* Floating studio label */}
        <div className="lf-hero-floating" style={{
          position: "absolute", top: "55%", right: 60, zIndex: 2,
          color: "var(--warm-white)", maxWidth: 240, textAlign: "right",
          display: window.innerWidth < 1100 ? "none" : "block"
        }}>
          <div style={{ letterSpacing: "0.4em", textTransform: "uppercase", opacity: 0.75, fontSize: "20px" }}>The Studio</div>
          <div style={{ marginTop: 8, lineHeight: 1.6, opacity: 0.92, fontStyle: "italic", fontFamily: "var(--serif)", fontSize: "16px" }}>
            "Painted from the same window for twenty-one years, in every season."
          </div>
        </div>

        {/* Scroll cue */}
        <div className="lf-hero-scroll" style={{ position: "absolute", left: "50%", bottom: 28, transform: "translateX(-50%)", color: "rgba(255,255,255,0.7)", zIndex: 2, display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 10, letterSpacing: "0.4em", textTransform: "uppercase" }}>Scroll</span>
          <Icon.ArrowDown />
        </div>
      </section>

      {/* ============ MARQUEE ============ */}
      <section style={{ background: "var(--ivory)", padding: "30px 0", borderBottom: "1px solid var(--line-soft)" }}>
        <div style={{ overflow: "hidden" }}>
          <div style={{ display: "inline-flex", gap: 60, paddingLeft: 60, whiteSpace: "nowrap", animation: "marquee 50s linear infinite" }}>
            {[...Array(2)].flatMap((_, k) => [
            "Original Oil Paintings",
            "Hand-Signed by the Artist",
            "One of One · Never Reproduced",
            "Painted in Highlands, Ontario"].
            map((t, i) =>
            <span key={`${k}-${i}`} style={{ display: "inline-flex", alignItems: "center", gap: 60, fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--ink-soft)" }}>
                {t}
                <span style={{ color: "var(--gold)", fontSize: 14 }}>✦</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* ============ FEATURED PAINTINGS ============ */}
      <FeaturedSection navigate={navigate} openArtwork={openArtwork} paintings={featured} addToCart={addToCart} />

      {/* ============ ABOUT TEASER ============ */}
      <AboutTeaser navigate={navigate} />

      {/* ============ NATURE INSPIRATION ============ */}
      <NatureInspiration paintings={natureSubjects} openArtwork={openArtwork} addToCart={addToCart} />

      {/* ============ COLLECTOR EXPERIENCE ============ */}
      <CollectorTeaser navigate={navigate} />

      {/* ============ STUDIO LIFE ============ */}
      <StudioLife paintings={studioMoments} openArtwork={openArtwork} addToCart={addToCart} />

      {/* ============ TESTIMONIALS ============ */}
      <TestimonialsBlock />
    </div>);

}

/* ============== Featured Section ============== */
function FeaturedSection({ paintings, navigate, openArtwork, addToCart }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 40px 60px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 70 }}>
        <div>
          <div className="eyebrow">Featured Works</div>
          <h2 className="h-display" style={{ fontSize: "clamp(42px, 5vw, 76px)", marginTop: 14, marginBottom: 0, fontStyle: "italic", color: "var(--ink)" }}>
            Four favourites<br />from the studio.
          </h2>
        </div>
        <div style={{ paddingBottom: 14 }}>
          <p style={{ color: "var(--ink-soft)", maxWidth: 480, fontSize: 16, lineHeight: 1.65 }}>
            A small, hand-picked selection from the current collection — landscapes, florals,
            and a quiet rainy afternoon. Each is one of one, painted entirely by hand, signed
            on the front in oil.
          </p>
          <a onClick={() => navigate("gallery")} className="btn-link" style={{ marginTop: 22, display: "inline-flex" }}>
            View All <Icon.ArrowR />
          </a>
        </div>
      </div>

      {/* Hero-pair layout. Each slot is independently guarded so the
          admin can leave fewer than 4 featured paintings without crashing
          the home page. */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28, marginBottom: 28 }}>
        {paintings[0] && <FeaturedCard p={paintings[0]} large onClick={() => openArtwork(paintings[0].id)} addToCart={addToCart} />}
        {paintings[1] && <FeaturedCard p={paintings[1]} onClick={() => openArtwork(paintings[1].id)} addToCart={addToCart} />}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 28 }}>
        {paintings[2] && <FeaturedCard p={paintings[2]} onClick={() => openArtwork(paintings[2].id)} addToCart={addToCart} />}
        {paintings[3] && <FeaturedCard p={paintings[3]} large onClick={() => openArtwork(paintings[3].id)} addToCart={addToCart} />}
      </div>
    </section>);

}

function FeaturedCard({ p, large, onClick, addToCart }) {
  const [hover, setHover] = useState(false);
  if (!p) return null;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: "pointer", position: "relative" }}
      onClick={onClick}>
      
      <div style={{ position: "relative", overflow: "hidden", borderRadius: 2 }}>
        <Painting p={p} aspect={large ? "5/4" : "4/5"} tag={false}
        style={{ transform: hover ? "scale(1.03)" : "scale(1)", transition: "transform 800ms cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 55%, rgba(46,42,36,0.5) 100%)",
          opacity: hover ? 1 : 0.7, transition: "opacity 320ms ease"
        }} />
        <div style={{
          position: "absolute", left: 24, bottom: 22, color: "var(--warm-white)",
          display: "flex", alignItems: "center", gap: 12
        }}>
          <span className="gold-rule" style={{ background: "var(--sunflower-soft)" }} />
          <span style={{ fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase" }}>{p.category}</span>
        </div>
        {p.available && (
          <button
            onClick={(e) => {e.stopPropagation();addToCart(p);}}
            style={{
              position: "absolute", right: 22, top: 22,
              width: 44, height: 44, borderRadius: 999,
              background: hover ? "var(--ink)" : "rgba(251,245,236,0.85)",
              color: hover ? "var(--warm-white)" : "var(--ink)",
              border: "none", backdropFilter: "blur(6px)",
              transition: "all 220ms ease",
              display: "inline-flex", alignItems: "center", justifyContent: "center"
            }}
            aria-label="Add to cart">
            <Icon.Plus />
          </button>
        )}
        {!p.available && <SoldBadge size="large" />}
      </div>
      <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.15, color: "var(--ink)" }}>{p.title}</div>
          <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4, letterSpacing: "0.04em" }}>
            {p.medium} · {p.dims} · {p.year}
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          {p.available ? (
            <>
              <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)" }}>${p.price.toLocaleString()}</div>
              <div style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--sage-deep)", marginTop: 2 }}>Available</div>
            </>
          ) : (
            <div style={{ fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--gold-deep)", fontWeight: 600 }}>Sold</div>
          )}
        </div>
      </div>
    </div>);

}

/* ============== About Teaser ============== */
function AboutTeaser({ navigate }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 40px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          {/* Stacked image stand-in: photo + small painting */}
          <div style={{ position: "relative", paddingRight: 60, paddingBottom: 60 }}>
            <div style={{
              aspectRatio: "4/5", background: "var(--paper)",
              backgroundImage: `linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%)`,
              position: "relative", overflow: "hidden",
              boxShadow: "0 40px 80px -40px rgba(46,42,36,0.28)"
            }}>
              <img src="assets/larissa-studio.jpg" alt="Larissa at her easel"
              style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(1.05)" }} />
            </div>
            <div style={{ position: "absolute", right: 0, bottom: 0, width: "55%" }}>
              <div className="painting" style={{ aspectRatio: "4/5", backgroundImage: 'url("assets/lake-of-bays.jpg")', backgroundSize: "cover", backgroundPosition: "center" }}></div>
              <div style={{ marginTop: 10, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 14, color: "var(--ink-soft)" }}>"Gooderham Lake, The Cloud" — a August morning.

              </div>
            </div>
          </div>
        </div>

        <div>
          <div className="eyebrow">About the Artist</div>
          <h2 className="h-display" style={{ fontSize: "clamp(38px, 4.6vw, 64px)", margin: "16px 0 0" }}>
            <em style={{ fontStyle: "italic" }}>A life painted slowly,</em><br />
            from one quiet window.
          </h2>
          <div className="h-script" style={{ fontSize: 32, color: "var(--gold-deep)", marginTop: 20 }}>
            — Larissa, in the studio.
          </div>
          <p style={{ marginTop: 24, color: "var(--ink-soft)", fontSize: 16.5, lineHeight: 1.75, maxWidth: 540 }}>For twenty-one years I have painted from a small studio overlooking Haliberton Lakes, with one stubborn window facing east. Flowers from the garden, fog over the water, maples turning in October — these are the things I cannot stop painting.



          </p>
          <p style={{ marginTop: 16, color: "var(--ink-soft)", fontSize: 16.5, lineHeight: 1.75, maxWidth: 540 }}>My work is collected across Canada, the United States, and as far as Norway and New Zealand. Each piece is painted by hand, signed on the front, and shipped with love.


          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 14 }}>
            <button className="btn btn-ghost" onClick={() => navigate("about")}>
              Read Her Story <Icon.ArrowR />
            </button>
          </div>
        </div>
      </div>
    </section>);

}

/* ============== Nature Inspiration ============== */
function NatureInspiration({ paintings, openArtwork, addToCart }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream)", padding: "140px 40px", marginTop: 60 }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <div className="eyebrow">Landscapes &amp; Nature</div>
          <h2 className="h-display" style={{ fontSize: "clamp(38px, 4.6vw, 64px)", marginTop: 14, marginBottom: 18 }}>
            <em style={{ fontStyle: "italic" }}>Sky, water, and trees</em> — painted from life.
          </h2>
          <p style={{ color: "var(--ink-soft)", fontSize: 16.5, lineHeight: 1.7 }}>
            Wide skies over the lake, autumn fields, panoramas of still water at first light.
            Each landscape is painted from a place I have walked, more than once, in every season.
          </p>
        </div>
        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
          {paintings.map((p, i) =>
            <NatureCard key={p.id} p={p} i={i} openArtwork={openArtwork} addToCart={addToCart} />
          )}
        </div>
      </div>
    </section>);

}

function NatureCard({ p, i, openArtwork, addToCart }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => openArtwork(p.id)}
      style={{ display: "flex", flexDirection: "column", gap: 16, cursor: "pointer" }}>
      <div style={{ position: "relative", overflow: "hidden" }}>
        <Painting p={p} aspect="3/4" tag={false}
          style={{ transform: hover ? "scale(1.04)" : "scale(1)", transition: "transform 800ms cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 50%, rgba(46,42,36,0.55) 100%)",
          opacity: hover ? 1 : 0.55, transition: "opacity 320ms ease"
        }} />
        <div style={{ position: "absolute", left: 16, top: 16, color: "rgba(255,255,255,0.95)" }}>
          <span style={{ fontFamily: "var(--serif)", fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", textShadow: "0 1px 4px rgba(0,0,0,0.3)" }}>
            0{i + 1}
          </span>
        </div>
        {p.available && (
          <button
            onClick={(e) => { e.stopPropagation(); addToCart(p); }}
            style={{
              position: "absolute", right: 12, top: 12,
              background: "rgba(251,245,236,0.92)", border: "none",
              padding: "6px 12px", borderRadius: 999,
              fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--ink)", cursor: "pointer",
              transform: hover ? "translateY(0)" : "translateY(-4px)",
              opacity: hover ? 1 : 0, transition: "all 260ms ease",
              display: "inline-flex", alignItems: "center", gap: 5
            }}><Icon.Plus /> Acquire</button>
        )}
        {!p.available && <SoldBadge />}
      </div>
      <div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{p.sectionSubject || p.title}</div>
        <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 4 }}>{p.short}</div>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 8, letterSpacing: "0.04em" }}>
          {p.dims}{p.available ? ` · $${p.price.toLocaleString()} CAD` : " · Sold"}
        </div>
      </div>
    </div>);

}

/* ============== Collector Teaser ============== */
function CollectorTeaser({ navigate }) {
  const ref = useReveal();
  const items = [
  { num: "01", title: "Hand-Signed in Oil", body: "Every painting is signed on the front by Larissa, in the same oil it was painted with." },
  { num: "02", title: "Museum-Quality Packaging", body: "Hand-crated in archival materials. We pack as we'd want a painting to arrive at our own home." },
  { num: "03", title: "One of One, Forever", body: "Every painting is unique and is never reproduced as a print. Your work will be the only one of its kind in the world." }];

  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 40px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow">The Collector's Experience</div>
          <h2 className="h-display" style={{ fontSize: "clamp(38px, 4.6vw, 64px)", marginTop: 14 }}>
            <em style={{ fontStyle: "italic" }}>A painting</em> arrives like a letter you have been waiting for.
          </h2>
          <p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.7, maxWidth: 460, marginTop: 18 }}>
            Larissa's collectors live with these works for a lifetime. Here is what happens between
            the moment you press the button and the morning the crate arrives at your door.
          </p>
          <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => navigate("collector")}>
            Full Collector Experience <Icon.ArrowR />
          </button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {items.map((it, i) =>
          <div key={it.num} style={{
            padding: "32px 0", borderTop: i === 0 ? "1px solid var(--line)" : "none",
            borderBottom: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "start"
          }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: 44, color: "var(--gold)", lineHeight: 1, fontStyle: "italic" }}>
                {it.num}
              </div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 26, lineHeight: 1.2 }}>{it.title}</div>
                <p style={{ marginTop: 10, color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.7 }}>{it.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============== Studio Life ============== */
function StudioLife({ paintings, openArtwork, addToCart }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--paper)", padding: "140px 0 120px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 40px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="eyebrow">Florals &amp; Still Life</div>
            <h2 className="h-display" style={{ fontSize: "clamp(38px, 4.6vw, 64px)", marginTop: 14 }}>
              Flowers from the <em style={{ fontStyle: "italic" }}>kitchen table</em>.
            </h2>
          </div>
          <p style={{ maxWidth: 360, color: "var(--ink-soft)", fontSize: 15.5, lineHeight: 1.7 }}>
            Bouquets cut from the garden, painted before they could droop — irises, poppies,
            tulips, cornflowers. Six paintings, one carousel — swipe to see them all.
          </p>
        </div>
      </div>
      <div style={{ marginTop: 60, overflowX: "auto", paddingBottom: 12 }}>
        <div style={{ display: "inline-flex", gap: 22, padding: "0 40px" }}>
          {paintings.map((p) =>
            <StudioMomentCard key={p.id} p={p} openArtwork={openArtwork} addToCart={addToCart} />
          )}
        </div>
      </div>
    </section>);

}

function StudioMomentCard({ p, openArtwork, addToCart }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => openArtwork(p.id)}
      style={{ width: 320, flexShrink: 0, cursor: "pointer" }}>
      <div style={{ position: "relative", overflow: "hidden" }}>
        <Painting p={p} aspect="4/5" tag={false}
          style={{ transform: hover ? "scale(1.04)" : "scale(1)", transition: "transform 800ms cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 55%, rgba(46,42,36,0.55) 100%)",
          opacity: hover ? 1 : 0.5, transition: "opacity 320ms ease"
        }} />
        <div style={{
          position: "absolute", left: 16, bottom: 14,
          fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.92)", textShadow: "0 1px 4px rgba(0,0,0,0.3)"
        }}>
          {p.sectionLabel || p.title}
        </div>
        {p.available && (
          <button
            onClick={(e) => { e.stopPropagation(); addToCart(p); }}
            style={{
              position: "absolute", right: 12, top: 12,
              background: "rgba(251,245,236,0.92)", border: "none",
              padding: "6px 12px", borderRadius: 999,
              fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--ink)", cursor: "pointer",
              transform: hover ? "translateY(0)" : "translateY(-4px)",
              opacity: hover ? 1 : 0, transition: "all 260ms ease",
              display: "inline-flex", alignItems: "center", gap: 5
            }}><Icon.Plus /> Acquire</button>
        )}
        {!p.available && <SoldBadge />}
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.2 }}>{p.title}</div>
        <div style={{ fontSize: 13.5, color: "var(--ink-soft)", marginTop: 4 }}>{p.sectionNote || p.short}</div>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 8, letterSpacing: "0.04em" }}>
          {p.dims}{p.available ? ` · $${p.price.toLocaleString()} CAD` : " · Sold"}
        </div>
      </div>
    </div>);

}

/* ============== Testimonials ============== */
function TestimonialsBlock() {
  const ref = useReveal();
  const [i, setI] = useState(0);
  const t = window.TESTIMONIALS[i];
  return (
    <section ref={ref} className="reveal" style={{ padding: "140px 40px", maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
      <div className="eyebrow">From the Collectors</div>
      <div style={{ marginTop: 28 }}>
        <div className="h-script" style={{ fontSize: 96, lineHeight: 0.6, color: "var(--gold)" }}>"</div>
        <p style={{
          fontFamily: "var(--serif)", fontStyle: "italic",
          fontSize: "clamp(26px, 3vw, 38px)", lineHeight: 1.4, color: "var(--ink)",
          maxWidth: 880, margin: "8px auto 0"
        }}>
          {t.quote}
        </p>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "center", alignItems: "center", gap: 16, color: "var(--gold-deep)" }}>
          {[0, 1, 2, 3, 4].map((s) => <Icon.Star key={s} />)}
        </div>
        <div style={{ marginTop: 16 }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 19 }}>{t.name}</div>
          <div style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 4 }}>{t.place}</div>
        </div>
      </div>
      <div style={{ marginTop: 50, display: "flex", gap: 10, justifyContent: "center" }}>
        {window.TESTIMONIALS.map((_, k) =>
        <button key={k} onClick={() => setI(k)} aria-label={`Testimonial ${k + 1}`} style={{
          width: i === k ? 32 : 8, height: 8, borderRadius: 999,
          background: i === k ? "var(--gold)" : "var(--line)",
          border: "none", padding: 0, transition: "all 280ms ease"
        }} />
        )}
      </div>
    </section>);

}

window.HomePage = HomePage;