
// ─── Kaonara Sections Part 1: Nav, Hero, Origin, Collection ───────────────

const honeys = [
  {
    id: "macadamia",
    name: "Macadamia-Coffee",
    subtitle: "Ka'ū Estate Blend",
    harvest: "February – April",
    color: "#7a4a1e",
    lightColor: "#c4862a",
    bgTint: "#2a1e12",
    rarity: 4,
    sweetness: 3,
    intensity: 4,
    aroma: ["Toasted caramel", "Dark cacao", "Roasted nut"],
    texture: "Creamy, slow-pour",
    notes: "Opens with the warmth of a freshly pulled espresso, deepening into bitter chocolate and salted macadamia. A honey that lingers.",
    functional: "Antioxidant-rich, natural energy",
    pairings: ["Aged blue cheese", "Dark chocolate 70%+", "Double espresso"],
    desc: "The meeting of two crops native to Hawai'i's volcanic highlands — macadamia groves and shade-grown coffee. A rare synchrony of bloom.",
  },
  {
    id: "eucalyptus",
    name: "Eucalyptus",
    subtitle: "Silver Dollar Bloom",
    harvest: "May – June",
    color: "#2a4a3a",
    lightColor: "#4a8c6e",
    bgTint: "#121e18",
    rarity: 3,
    sweetness: 2,
    intensity: 3,
    aroma: ["Cool menthol", "Balsam", "Fresh herb"],
    texture: "Light, fluid",
    notes: "Medicinal clarity. A breath of cool mountain air held in amber. Clean on the palate with a long herbal finish that suggests eucalyptus forests after rain.",
    functional: "Antibacterial, respiratory support",
    pairings: ["Chamomile tea", "Glazed white fish", "Ricotta on toast"],
    desc: "Harvested when Ka'ū's eucalyptus groves release their singular bloom — a brief, silver-leafed interval in the Hawaiian spring.",
  },
  {
    id: "keawe",
    name: "Keawe",
    subtitle: "White Kiawe Blossom",
    harvest: "June – July",
    color: "#8a7650",
    lightColor: "#d4b87a",
    bgTint: "#1e1a10",
    rarity: 4,
    sweetness: 5,
    intensity: 2,
    aroma: ["Vanilla", "Warm butter", "Delicate floral"],
    texture: "Whipped, granular cream",
    notes: "The palest honey in the collection. Granulates naturally into a spreadable, velvety cream. Butter and vanilla without sweetness fatigue — it whispers rather than shouts.",
    functional: "Low moisture, antimicrobial",
    pairings: ["Croissant with cultured butter", "Fine pâtisserie", "Mild brie"],
    desc: "Kiawe (mesquite) blooms in the dry coastal lowlands of Ka'ū. Its white flowers yield a honey so fine it is often called the champagne of Hawaiian honeys.",
  },
  {
    id: "christmas",
    name: "Christmas Berry",
    subtitle: "Schinus terebinthifolia",
    harvest: "November – December",
    color: "#6a2020",
    lightColor: "#c45a3a",
    bgTint: "#1e1010",
    rarity: 3,
    sweetness: 3,
    intensity: 4,
    aroma: ["Warm spice", "Citrus peel", "Light pepper"],
    texture: "Amber, medium viscosity",
    notes: "Harvested at the year's turn, when Christmas berry colors Ka'ū's hillsides red. A spiced warmth on the mid-palate, closing with a bright citrus echo.",
    functional: "Anti-inflammatory compounds",
    pairings: ["Aged manchego", "Gin cocktails", "Sherry vinaigrette"],
    desc: "An invasive species turned into something extraordinary. Christmas berry's late-season bloom yields a honey with remarkable complexity — spice, heat, and unexpected brightness.",
  },
  {
    id: "ohia",
    name: "'Ōhi'a Lehua",
    subtitle: "Sacred Native Blossom",
    harvest: "March – May",
    color: "#6a1820",
    lightColor: "#c43040",
    bgTint: "#1e0a0e",
    rarity: 5,
    sweetness: 4,
    intensity: 3,
    aroma: ["Delicate floral", "Rainwater", "Light mineral"],
    texture: "Fine crystalline, almost granular silk",
    notes: "The rarest honey we produce. 'Ōhi'a lehua is sacred in Hawaiian tradition — its blossoms are not to be picked on the journey to the volcano, lest rain follow. We harvest with deep respect. The honey holds that same reverence: pure, fleeting, irreplaceable.",
    functional: "Rich in enzymes and trace minerals",
    pairings: ["Pure tasting on a wooden spoon", "Matcha ceremony", "Nothing else"],
    desc: "The 'Ōhi'a lehua is the first tree to flower on fresh lava flows — a symbol of resilience and sacred beauty. Its honey is produced in the smallest quantities of all our collection.",
  },
];

// ─── Shared ─────────────────────────────────────────────────────────────────

function useWindowWidth() {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const fn = () => setW(window.innerWidth);
    window.addEventListener("resize", fn);
    return () => window.removeEventListener("resize", fn);
  }, []);
  return w;
}

function useReveal(threshold = 0.15) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

function Reveal({ children, delay = 0, className = "" }) {
  const [ref, visible] = useReveal();
  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(32px)",
        transition: `opacity 1s ease ${delay}s, transform 1s ease ${delay}s`,
      }}
    >
      {children}
    </div>
  );
}

// ─── Nav ────────────────────────────────────────────────────────────────────

function Nav({ tweaks }) {
  const [scrolled, setScrolled] = React.useState(false);
  const w = useWindowWidth();
  const isMobile = w < 768;
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      padding: isMobile ? "20px 24px" : "28px 56px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      background: scrolled ? "rgba(250,247,242,0.95)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(196,134,42,0.12)" : "none",
      transition: "all 0.6s ease",
    }}>
      <div style={{ width: 80 }} />
      <div style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontSize: 26,
        letterSpacing: "0.35em",
        color: scrolled ? "#1a1714" : "#faf7f2",
        fontWeight: 400,
        transition: "color 0.6s ease",
      }}>
        KAONARA
      </div>
      <div style={{ width: 80, display: "flex", justifyContent: "flex-end" }}>
        <a href="#collection" style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 11,
          letterSpacing: "0.2em", color: scrolled ? "#7a7369" : "rgba(250,247,242,0.5)",
          cursor: "pointer", textDecoration: "none", textTransform: "uppercase",
          transition: "color 0.3s",
        }}
        onMouseEnter={e => e.target.style.color = tweaks.accentColor}
        onMouseLeave={e => e.target.style.color = scrolled ? "#7a7369" : "rgba(250,247,242,0.5)"}
        >
          Collection
        </a>
      </div>
    </nav>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────────

function Hero({ tweaks }) {
  const [loaded, setLoaded] = React.useState(false);
  const w = useWindowWidth();
  const isMobile = w < 768;
  React.useEffect(() => { setTimeout(() => setLoaded(true), 100); }, []);
  return (
    <section style={{ position: "relative", height: "100vh", overflow: "hidden", background: "#0d0b09" }}>
      {/* BG Placeholder – replace with: volcanic Ka'ū landscape at dawn, lava fields meeting dense jungle, golden morning backlight */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(160deg, #1a1008 0%, #2a1a08 35%, #0d0b07 70%, #080604 100%)",
      }} />
      {/* Honey light glow */}
      <div style={{
        position: "absolute", top: "30%", left: "55%",
        width: 600, height: 600,
        background: `radial-gradient(circle, ${tweaks.accentColor}22 0%, transparent 70%)`,
        transform: "translate(-50%,-50%)",
        pointerEvents: "none",
      }} />
      {/* Image placeholder */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        opacity: 0.12,
      }}>
        <svg width="320" height="320" viewBox="0 0 320 320" fill="none">
          <polygon points="160,30 290,105 290,215 160,290 30,215 30,105" stroke="#c4862a" strokeWidth="1" fill="none" opacity="0.6"/>
          <polygon points="160,60 265,120 265,200 160,260 55,200 55,120" stroke="#c4862a" strokeWidth="0.5" fill="none" opacity="0.4"/>
          <circle cx="160" cy="160" r="40" stroke="#c4862a" strokeWidth="0.5" fill="none" opacity="0.3"/>
          <text x="160" y="167" textAnchor="middle" fontFamily="serif" fontSize="18" fill="#c4862a" opacity="0.5">蜜</text>
        </svg>
      </div>

      {/* Content */}
      <div style={{
        position: "relative", zIndex: 10,
        height: "100%", display: "flex", flexDirection: "column",
        justifyContent: "center", alignItems: "center",
        textAlign: "center",
        padding: "0 40px",
      }}>
        <div style={{
          opacity: loaded ? 1 : 0,
          transform: loaded ? "none" : "translateY(32px)",
          transition: "all 1.6s cubic-bezier(0.16,1,0.3,1) 0.4s",
          display: "flex", flexDirection: "column", alignItems: "center",
        }}>
          <h1 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: isMobile ? 44 : tweaks.heroSize,
            fontWeight: 300, lineHeight: 1.05,
            color: "#faf7f2",
            margin: "0 0 32px",
            letterSpacing: "-0.02em",
            textAlign: "center",
            padding: isMobile ? "0 16px" : 0,
          }}>
            Born from volcanic fire.<br />
            <em style={{ color: tweaks.accentColor, fontStyle: "italic" }}>Carried by Pacific air.</em>
          </h1>

          <div style={{
            width: 32, height: 1,
            background: `rgba(196,134,42,0.5)`,
            margin: "0 auto 32px",
            opacity: loaded ? 1 : 0,
            transition: "opacity 1s ease 1.4s",
          }} />

          <a href="#collection" style={{
            display: "inline-block",
            fontFamily: "'DM Sans', sans-serif",
            fontSize: 11, letterSpacing: "0.25em",
            color: "rgba(250,247,242,0.5)",
            textDecoration: "none",
            textTransform: "uppercase",
            transition: "color 0.4s",
            opacity: loaded ? 1 : 0,
            transitionDelay: "1.6s",
          }}
          onMouseEnter={e => e.target.style.color = tweaks.accentColor}
          onMouseLeave={e => e.target.style.color = "rgba(250,247,242,0.5)"}
          >
            Discover the Collection
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{
        position: "absolute", bottom: 40, right: 80,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
        opacity: loaded ? 0.5 : 0, transition: "opacity 1s ease 2s",
      }}>
        <div style={{ width: 1, height: 48, background: tweaks.accentColor, transformOrigin: "top",
          animation: "scrollLine 2s ease-in-out infinite" }} />
      </div>
    </section>
  );
}

// ─── Origin Story ────────────────────────────────────────────────────────────

function Origin({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 768;
  return (
    <section style={{ background: tweaks.bgColor, padding: isMobile ? "80px 24px" : "140px 80px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", right: -20, top: "50%", transform: "translateY(-50%)", fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 200 : 400, lineHeight: 1, color: "rgba(196,134,42,0.04)", userSelect: "none", pointerEvents: "none", fontWeight: 700 }}>土</div>
      <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 48 : 120, alignItems: "center" }}>
        <Reveal>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 24, textTransform: "uppercase" }}>
            The Terroir
          </p>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 40 : tweaks.sectionSize, fontWeight: 400, lineHeight: 1.15, color: "#1a1714", margin: "0 0 40px", letterSpacing: "-0.01em" }}>
            Where lava<br /><em style={{ fontStyle: "italic", color: tweaks.accentColor }}>becomes soil.</em><br />Where soil<br />becomes honey.
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.8, color: "#5a5550", marginBottom: 24, maxWidth: 480 }}>
            Ka'ū sits at the southern edge of Hawai'i's Big Island — a district shaped by centuries of volcanic activity. Pāhoehoe lava flows have created mineral-dense soils found nowhere else on Earth. No two fields share the same composition.
          </p>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.8, color: "#5a5550", maxWidth: 480 }}>
            The native flora — 'ōhi'a lehua, keawe, macadamia — blooms in short, intense windows dictated by elevation, rainfall, and the Pacific trades. Our bees follow these blooms precisely. The result: honeys of startling purity and depth.
          </p>
        </Reveal>

        <Reveal delay={0.3}>
          {/* Map placeholder – replace with: hand-illustrated map of Big Island highlighting Ka'ū district */}
          <div style={{
            aspectRatio: "4/5",
            background: "linear-gradient(135deg, #1a1714 0%, #2a2018 50%, #1a1410 100%)",
            borderRadius: 2,
            position: "relative",
            overflow: "hidden",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            {/* Stylized Big Island map SVG */}
            <svg viewBox="0 0 300 360" width="220" style={{ opacity: 0.9 }}>
              {/* Island outline */}
              <path d="M150,20 C180,20 220,40 250,70 C275,95 290,130 285,165 C280,200 265,230 245,255 C220,285 190,305 160,315 C130,325 100,320 75,305 C50,290 30,265 20,235 C10,205 15,170 30,140 C45,110 70,85 100,60 C120,42 135,20 150,20Z" fill="none" stroke="rgba(196,134,42,0.3)" strokeWidth="1.5"/>
              {/* Ka'ū district highlight */}
              <path d="M90,270 C100,265 115,260 130,262 C145,264 158,270 165,278 C172,286 170,298 162,308 C154,318 140,325 125,322 C110,319 95,308 88,295 C82,283 82,273 90,270Z" fill="rgba(196,134,42,0.2)" stroke={tweaks.accentColor} strokeWidth="1"/>
              {/* Volcanic peaks */}
              <g opacity="0.4">
                <polygon points="155,80 168,112 142,112" fill="none" stroke="rgba(250,247,242,0.4)" strokeWidth="0.8"/>
                <polygon points="175,95 185,118 165,118" fill="none" stroke="rgba(250,247,242,0.3)" strokeWidth="0.8"/>
              </g>
              {/* Ka'ū label */}
              <text x="125" y="292" textAnchor="middle" fontFamily="'Cormorant Garamond', serif" fontSize="11" fill={tweaks.accentColor} letterSpacing="2">KA'Ū</text>
              {/* Compass */}
              <g transform="translate(258,45)">
                <circle cx="0" cy="0" r="14" fill="none" stroke="rgba(196,134,42,0.2)" strokeWidth="0.8"/>
                <line x1="0" y1="-10" x2="0" y2="10" stroke="rgba(196,134,42,0.4)" strokeWidth="0.6"/>
                <line x1="-10" y1="0" x2="10" y2="0" stroke="rgba(196,134,42,0.4)" strokeWidth="0.6"/>
                <text x="0" y="-14" textAnchor="middle" fontSize="7" fill="rgba(196,134,42,0.6)" fontFamily="sans-serif">N</text>
              </g>
            </svg>
            <div style={{ position: "absolute", bottom: 24, left: 24, right: 24 }}>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "rgba(250,247,242,0.4)", letterSpacing: "0.2em" }}>
                19°N · 155°W · ELEVATION 300–1200M
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Collection ───────────────────────────────────────────────────────────────

function RarityDots({ count, color }) {
  return (
    <div style={{ display: "flex", gap: 4 }}>
      {[1,2,3,4,5].map(i => (
        <div key={i} style={{
          width: 6, height: 6, borderRadius: "50%",
          background: i <= count ? color : "rgba(0,0,0,0.1)",
          transition: "all 0.3s",
        }} />
      ))}
    </div>
  );
}

function HoneyCard({ honey, index, tweaks }) {
  const [hovered, setHovered] = React.useState(false);
  const w = useWindowWidth();
  const isMobile = w < 768;
  const isEven = index % 2 === 0;

  return (
    <Reveal delay={0.1 * index}>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: 0,
          minHeight: isMobile ? "auto" : 560,
          background: hovered ? "#1a1714" : tweaks.bgColor,
          border: `1px solid rgba(196,134,42,${hovered ? 0.25 : 0.1})`,
          transition: "all 0.6s cubic-bezier(0.16,1,0.3,1)",
          cursor: "default",
          overflow: "hidden",
        }}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        {/* Visual column */}
        <div style={{
          order: isMobile ? 0 : (isEven ? 0 : 1),
          background: honey.bgTint,
          display: "flex", alignItems: "center", justifyContent: "center",
          position: "relative", overflow: "hidden",
          minHeight: isMobile ? 240 : 400,
        }}>
          {/* Honey color visualization */}
          <div style={{
            width: 160, height: 220,
            background: `linear-gradient(180deg, ${honey.color}88 0%, ${honey.lightColor} 40%, ${honey.lightColor}cc 100%)`,
            borderRadius: "50% 50% 45% 45%",
            position: "relative",
            boxShadow: `0 40px 80px ${honey.lightColor}33, inset 0 -20px 40px ${honey.color}44`,
            transform: hovered ? "scale(1.05)" : "scale(1)",
            transition: "transform 0.8s cubic-bezier(0.16,1,0.3,1)",
          }}>
            {/* Light refraction */}
            <div style={{
              position: "absolute", top: "15%", left: "25%",
              width: "30%", height: "35%",
              background: "rgba(255,255,255,0.15)",
              borderRadius: "50%",
              transform: "rotate(-30deg)",
            }} />
          </div>
          {/* Image hint */}
          <p style={{
            position: "absolute", bottom: 20, left: 20, right: 20,
            fontFamily: "'DM Sans', sans-serif", fontSize: 10,
            color: "rgba(250,247,242,0.25)", letterSpacing: "0.1em",
            textAlign: "center",
          }}>
            {/* Placeholder: close-up of {honey.name} honey in jar with natural backlight */}
          </p>
        </div>

        {/* Content column */}
        <div style={{
          order: isMobile ? 1 : (isEven ? 1 : 0),
          padding: isMobile ? "36px 24px" : "64px 56px",
          display: "flex", flexDirection: "column", justifyContent: "center",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 32 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.3em", color: tweaks.accentColor, textTransform: "uppercase" }}>
              {String(index + 1).padStart(2, "0")} / 05
            </span>
            <RarityDots count={honey.rarity} color={tweaks.accentColor} />
          </div>

          <h3 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 42, fontWeight: 400,
            color: hovered ? "#faf7f2" : "#1a1714",
            margin: "0 0 4px",
            lineHeight: 1.1, letterSpacing: "-0.01em",
            transition: "color 0.4s",
          }}>
            {honey.name}
          </h3>
          <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: tweaks.accentColor, fontStyle: "italic", marginBottom: 32 }}>
            {honey.subtitle}
          </p>

          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.75, color: hovered ? "rgba(250,247,242,0.6)" : "#5a5550", marginBottom: 36, transition: "color 0.4s" }}>
            {honey.notes}
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px 32px", marginBottom: 36 }}>
            <div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.2em", color: tweaks.accentColor, marginBottom: 6, textTransform: "uppercase" }}>Harvest</p>
              <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: hovered ? "#faf7f2" : "#1a1714", transition: "color 0.4s" }}>{honey.harvest}</p>
            </div>
            <div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.2em", color: tweaks.accentColor, marginBottom: 6, textTransform: "uppercase" }}>Texture</p>
              <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: hovered ? "#faf7f2" : "#1a1714", transition: "color 0.4s" }}>{honey.texture}</p>
            </div>
          </div>

          <div style={{ marginBottom: 28 }}>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.2em", color: tweaks.accentColor, marginBottom: 12, textTransform: "uppercase" }}>Aroma Profile</p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {honey.aroma.map(a => (
                <span key={a} style={{
                  fontFamily: "'DM Sans', sans-serif", fontSize: 11,
                  padding: "4px 12px", border: `1px solid rgba(196,134,42,0.25)`,
                  color: hovered ? "rgba(250,247,242,0.7)" : "#7a7369",
                  letterSpacing: "0.05em",
                  transition: "color 0.4s",
                }}>{a}</span>
              ))}
            </div>
          </div>

          <div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.2em", color: tweaks.accentColor, marginBottom: 8, textTransform: "uppercase" }}>Pairings</p>
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: hovered ? "rgba(250,247,242,0.6)" : "#5a5550", fontStyle: "italic", transition: "color 0.4s" }}>
              {honey.pairings.join(" · ")}
            </p>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function Collection({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 768;
  return (
    <section id="collection" style={{ background: tweaks.bgColor, padding: isMobile ? "80px 24px" : "100px 80px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "flex-end", justifyContent: "space-between", marginBottom: 80, borderBottom: "1px solid rgba(196,134,42,0.15)", paddingBottom: 48, gap: isMobile ? 24 : 0 }}>
            <div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 20, textTransform: "uppercase" }}>The Collection</p>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 40 : tweaks.sectionSize, fontWeight: 400, color: "#1a1714", margin: 0, letterSpacing: "-0.01em", lineHeight: 1.1 }}>
                Five honeys.<br /><em style={{ fontStyle: "italic" }}>Five worlds.</em>
              </h2>
            </div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, lineHeight: 1.7, color: "#7a7369", maxWidth: isMobile ? "100%" : 320, textAlign: isMobile ? "left" : "right" }}>
              Each batch is harvested, cold-extracted, and numbered by hand. Production is limited to the bloom — when it ends, so does the season.
            </p>
          </div>
        </Reveal>

        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {honeys.map((h, i) => <HoneyCard key={h.id} honey={h} index={i} tweaks={tweaks} />)}
        </div>
      </div>
    </section>
  );
}

// Export all
Object.assign(window, { Nav, Hero, Origin, Collection, honeys, Reveal, useReveal, useWindowWidth });
