
// ─── Kaonara Sections Part 2: FlavorWheel, Craftsmanship, Rarity, Pairing, Footer ─

// ─── Flavor Wheel ─────────────────────────────────────────────────────────────

function FlavorWheel({ tweaks }) {
  const [active, setActive] = React.useState(null);
  const w = useWindowWidth();
  const isMobile = w < 768;
  const honeyList = window.honeys;
  const size = isMobile ? 260 : 340;
  const cx = size / 2, cy = size / 2;
  const radii = { sweetness: 55, intensity: 90, aroma: 120, rarity: 150 };
  const axes = Object.keys(radii);

  const honeyColors = ["#c4862a","#4a8c6e","#d4b87a","#c45a3a","#c43040"];

  function polarToCart(angle, r) {
    const a = (angle - 90) * (Math.PI / 180);
    return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
  }

  function honeyPoints(honey) {
    const vals = { sweetness: honey.sweetness, intensity: honey.intensity, aroma: 3, rarity: honey.rarity };
    const angleStep = 360 / 4;
    return axes.map((ax, i) => {
      const r = (vals[ax] / 5) * radii[ax];
      return polarToCart(i * angleStep, r);
    });
  }

  function pointsStr(pts) {
    return pts.map(p => `${p.x},${p.y}`).join(" ");
  }

  // Grid rings
  const rings = [1, 2, 3, 4, 5];

  return (
    <section style={{ background: "#1a1714", padding: isMobile ? "80px 24px" : "120px 80px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 56 : 100, alignItems: "center" }}>
        <Reveal>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 24, textTransform: "uppercase" }}>
            Sensory Comparison
          </p>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: tweaks.sectionSize, fontWeight: 400, color: "#faf7f2", lineHeight: 1.1, margin: "0 0 40px", letterSpacing: "-0.01em" }}>
            The taste<br /><em style={{ color: tweaks.accentColor, fontStyle: "italic" }}>of each season.</em>
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.75, color: "rgba(250,247,242,0.5)", marginBottom: 48 }}>
            Each honey occupies its own sensory territory. Hover to isolate a single profile against the full collection.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {honeyList.map((h, i) => (
              <div
                key={h.id}
                style={{
                  display: "flex", alignItems: "center", gap: 16,
                  cursor: "pointer", padding: "12px 0",
                  borderBottom: "1px solid rgba(196,134,42,0.1)",
                  opacity: active === null || active === i ? 1 : 0.3,
                  transition: "opacity 0.3s",
                }}
                onMouseEnter={() => setActive(i)}
                onMouseLeave={() => setActive(null)}
              >
                <div style={{ width: 12, height: 12, borderRadius: "50%", background: honeyColors[i], flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: "#faf7f2", margin: 0 }}>{h.name}</p>
                </div>
                <div style={{ display: "flex", gap: 24 }}>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "rgba(250,247,242,0.3)", letterSpacing: "0.1em" }}>
                    SWEET {h.sweetness}/5
                  </span>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "rgba(250,247,242,0.3)", letterSpacing: "0.1em" }}>
                    RARE {h.rarity}/5
                  </span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={0.3}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <svg width={size} height={size} viewBox={`-30 -30 ${size + 60} ${size + 60}`} overflow="visible">
              {/* Grid */}
              {rings.map(r => (
                <g key={r}>
                  {axes.map((ax, i) => {
                    const angleStep = 360 / 4;
                    const p = polarToCart(i * angleStep, (r / 5) * radii[ax]);
                    const p2 = polarToCart(((i + 1) % 4) * angleStep, (r / 5) * radii[(axes)[(i + 1) % 4]]);
                    return null;
                  })}
                  {/* Concentric polygons */}
                  <polygon
                    points={axes.map((_, i) => {
                      const maxR = Math.max(...Object.values(radii));
                      const p = polarToCart(i * 90, (r / 5) * maxR);
                      return `${p.x},${p.y}`;
                    }).join(" ")}
                    fill="none"
                    stroke="rgba(196,134,42,0.1)"
                    strokeWidth="0.5"
                  />
                </g>
              ))}
              {/* Axes */}
              {axes.map((ax, i) => {
                const maxR = Math.max(...Object.values(radii));
                const end = polarToCart(i * 90, maxR);
                return (
                  <g key={ax}>
                    <line x1={cx} y1={cy} x2={end.x} y2={end.y} stroke="rgba(196,134,42,0.15)" strokeWidth="0.5" />
                    <text
                      x={polarToCart(i * 90, maxR + 18).x}
                      y={polarToCart(i * 90, maxR + 18).y}
                      textAnchor="middle"
                      dominantBaseline="middle"
                      fontFamily="'DM Sans', sans-serif"
                      fontSize="9"
                      fill="rgba(196,134,42,0.6)"
                      letterSpacing="1.5"
                    >
                      {ax.toUpperCase()}
                    </text>
                  </g>
                );
              })}
              {/* Honey polygons */}
              {honeyList.map((h, i) => {
                const pts = honeyPoints(h);
                const isActive = active === i;
                const isInactive = active !== null && !isActive;
                return (
                  <polygon
                    key={h.id}
                    points={pointsStr(pts)}
                    fill={`${honeyColors[i]}${isActive ? "33" : "11"}`}
                    stroke={honeyColors[i]}
                    strokeWidth={isActive ? 1.5 : 0.5}
                    opacity={isInactive ? 0.2 : 1}
                    style={{ transition: "all 0.3s" }}
                  />
                );
              })}
              {/* Center dot */}
              <circle cx={cx} cy={cy} r={2} fill="rgba(196,134,42,0.4)" />
            </svg>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Craftsmanship ────────────────────────────────────────────────────────────

function Craftsmanship({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 768;
  const steps = [
    { num: "01", title: "Cold Extraction", desc: "Honey is extracted at ambient temperature — never heated above the hive's natural warmth. All enzymes, pollens, and phenolic compounds remain intact." },
    { num: "02", title: "Minimal Filtration", desc: "Coarse-filtered once through fine mesh. Wax particles and large debris removed; fine pollen and propolis remain. The honey retains its living complexity." },
    { num: "03", title: "No Pasteurisation", desc: "We do not heat-treat. Pasteurisation extends shelf life while destroying what makes raw honey remarkable. We choose complexity over convenience." },
    { num: "04", title: "Regenerative Apiculture", desc: "Hive health is primary. We manage for the colony, not the harvest. Honey is taken only from surplus — the bees' winter stores are never touched." },
  ];
  return (
    <section style={{ background: tweaks.bgColor, padding: isMobile ? "80px 24px" : "120px 80px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 2fr", gap: isMobile ? 32 : 100, marginBottom: 80 }}>
          <Reveal>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 24, textTransform: "uppercase" }}>Process</p>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 40 : tweaks.sectionSize, fontWeight: 400, color: "#1a1714", lineHeight: 1.1, margin: 0 }}>
              Nothing added.<br /><em style={{ fontStyle: "italic", color: tweaks.accentColor }}>Nothing removed.</em>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.8, color: "#5a5550", marginTop: 8, maxWidth: 560 }}>
              Commercial honey is heated, ultra-filtered, and blended from multiple origins to achieve uniformity. We consider this a category error. Miranda's Bees honeys are single-origin, single-bloom, single-season. Variability is not a defect — it is the point.
            </p>
          </Reveal>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 2 }}>
          {steps.map((s, i) => (
            <Reveal key={s.num} delay={0.1 * i}>
              <div style={{
                padding: "48px",
                border: "1px solid rgba(196,134,42,0.12)",
                background: i === 3 ? "linear-gradient(135deg, rgba(196,134,42,0.04), transparent)" : "transparent",
              }}>
                <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 48, color: "rgba(196,134,42,0.2)", display: "block", marginBottom: 24, lineHeight: 1 }}>
                  {s.num}
                </span>
                <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, fontWeight: 400, color: "#1a1714", margin: "0 0 16px" }}>{s.title}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.75, color: "#7a7369", margin: 0 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Certifications */}
        <Reveal delay={0.2}>
          <div style={{ marginTop: 80, padding: isMobile ? "32px 24px" : "40px 48px", border: "1px solid rgba(196,134,42,0.12)", display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: isMobile ? 32 : 64, alignItems: "center", justifyItems: "center" }}>
            {["Raw Organic", "Product of Hawai'i", "Regenerative Care", "Non-GMO"].map((cert, i) => (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{ width: 32, height: 32, border: `1px solid ${tweaks.accentColor}`, borderRadius: "50%", margin: "0 auto 12px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: 8, height: 8, background: tweaks.accentColor, borderRadius: "50%" }} />
                </div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#7a7369", letterSpacing: "0.05em", lineHeight: 1.5, maxWidth: 120, margin: "0 auto" }}>{cert}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Rarity ───────────────────────────────────────────────────────────────────

function Rarity({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 768;
  return (
    <section style={{ background: "#0d0b09", padding: isMobile ? "80px 24px" : "140px 80px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 600, height: 600, borderRadius: "50%", background: `radial-gradient(circle, ${tweaks.accentColor}08, transparent 70%)`, pointerEvents: "none" }} />

      <div style={{ maxWidth: 1200, margin: "0 auto", textAlign: "center" }}>
        <Reveal>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 32, textTransform: "uppercase" }}>
            Limited Edition
          </p>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 44 : Math.round(tweaks.sectionSize * 1.4), fontWeight: 300, color: "#faf7f2", lineHeight: 1.05, margin: "0 auto 48px", maxWidth: 800, letterSpacing: "-0.02em" }}>
            The bloom decides<br /><em style={{ color: tweaks.accentColor }}>how much exists.</em>
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.8, color: "rgba(250,247,242,0.45)", maxWidth: 560, margin: "0 auto 80px" }}>
            'Ōhi'a lehua blooms for eleven days. Keawe, for three weeks. We cannot make more. We do not stockpile seasons. Each jar is numbered from the batch, dated from the harvest.
          </p>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 1 }}>
          {[
            { value: "< 200", label: "Jars per batch", sub: "'Ōhi'a Lehua" },
            { value: "11", label: "Days of bloom", sub: "average monofloral window" },
            { value: "100%", label: "Hand-numbered", sub: "every jar, every season" },
          ].map((s, i) => (
            <Reveal key={s.label} delay={0.15 * i}>
              <div style={{ padding: "64px 48px", border: "1px solid rgba(196,134,42,0.12)", textAlign: "center" }}>
                <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 72, fontWeight: 300, color: tweaks.accentColor, margin: "0 0 8px", lineHeight: 1 }}>{s.value}</p>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#faf7f2", letterSpacing: "0.1em", marginBottom: 8 }}>{s.label}</p>
                <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 14, color: "rgba(250,247,242,0.3)", fontStyle: "italic" }}>{s.sub}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pairing ──────────────────────────────────────────────────────────────────

function Pairing({ tweaks }) {
  const [activeTab, setActiveTab] = React.useState(0);
  const w = useWindowWidth();
  const isMobile = w < 768;
  const tabs = [
    {
      label: "Tea Ceremony",
      icon: "茶",
      desc: "The ritual of chado meets the ritual of harvest. Keawe honey dissolves in hot water into near-invisibility — sweetening without altering. 'Ōhi'a lehua alongside matcha, a contrast in terroir.",
      pairings: [
        { name: "Matcha (Usucha)", honey: "'Ōhi'a Lehua", note: "Floral against vegetal bitterness" },
        { name: "Hojicha", honey: "Macadamia-Coffee", note: "Roasted mirrors roasted" },
        { name: "Oolong (High-mountain)", honey: "Keawe", note: "Delicate on delicate" },
        { name: "Darjeeling First Flush", honey: "Christmas Berry", note: "Muscatel meets spice" },
      ],
    },
    {
      label: "Fromage",
      icon: "◈",
      desc: "Honey and aged cheese share the language of time. The Maillard reactions, the bacterial cultures, the slow transformation. A board with three honeys and three cheeses is a conversation across continents.",
      pairings: [
        { name: "Roquefort", honey: "Macadamia-Coffee", note: "Blue salt meets caramel depth" },
        { name: "Comté 24 months", honey: "Christmas Berry", note: "Nutty + spice elevation" },
        { name: "Brillat-Savarin", honey: "Keawe", note: "Cream on cream, vanilla thread" },
        { name: "Manchego Reserva", honey: "Eucalyptus", note: "Herbal counterpoint" },
      ],
    },
    {
      label: "Cocktails",
      icon: "◇",
      desc: "In place of sugar syrups: a 1:1 honey-water solution, or honey dissolved directly. Christmas Berry transforms a simple gin cocktail. Macadamia-Coffee enriches an Old Fashioned in a single drop.",
      pairings: [
        { name: "Mezcal Negroni", honey: "Christmas Berry", note: "Spice amplifies smoke" },
        { name: "Whisky Old Fashioned", honey: "Macadamia-Coffee", note: "Cacao deepens oak" },
        { name: "Gin & Tonic", honey: "Eucalyptus", note: "Botanical on botanical" },
        { name: "Champagne Float", honey: "'Ōhi'a Lehua", note: "One drop. Rare on rare." },
      ],
    },
  ];
  const tab = tabs[activeTab];

  return (
    <section style={{ background: tweaks.bgColor, padding: isMobile ? "80px 24px" : "120px 80px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 100 }}>
            <div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 24, textTransform: "uppercase" }}>
                Pairing & Ritual
              </p>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 40 : tweaks.sectionSize, fontWeight: 400, color: "#1a1714", lineHeight: 1.1, margin: "0 0 48px" }}>
                The art of<br /><em style={{ fontStyle: "italic", color: tweaks.accentColor }}>the alongside.</em>
              </h2>

              {/* Tabs */}
              <div style={{ display: "flex", gap: 0, marginBottom: 48, borderBottom: "1px solid rgba(196,134,42,0.15)" }}>
                {tabs.map((t, i) => (
                  <button
                    key={t.label}
                    onClick={() => setActiveTab(i)}
                    style={{
                      fontFamily: "'DM Sans', sans-serif", fontSize: 12,
                      padding: "12px 24px", border: "none", cursor: "pointer",
                      background: "transparent",
                      color: activeTab === i ? "#1a1714" : "#7a7369",
                      borderBottom: activeTab === i ? `2px solid ${tweaks.accentColor}` : "2px solid transparent",
                      letterSpacing: "0.1em", textTransform: "uppercase",
                      transition: "color 0.3s",
                    }}
                  >{t.label}</button>
                ))}
              </div>

              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.8, color: "#5a5550", marginBottom: 40 }}>{tab.desc}</p>
            </div>

            <div style={{ paddingTop: isMobile ? 0 : 80 }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {tab.pairings.map((p, i) => (
                  <div key={p.name} style={{
                    padding: "24px 32px",
                    border: "1px solid rgba(196,134,42,0.1)",
                    display: "grid", gridTemplateColumns: "1fr auto",
                    alignItems: "center", gap: 24,
                    opacity: 0, animation: `fadeUp 0.5s ease forwards ${i * 0.08}s`,
                  }}>
                    <div>
                      <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, color: "#1a1714", margin: "0 0 4px" }}>{p.name}</p>
                      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#7a7369", margin: 0 }}>{p.note}</p>
                    </div>
                    <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 13, color: tweaks.accentColor, fontStyle: "italic", whiteSpace: "nowrap" }}>
                      {p.honey}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────────

function Footer({ tweaks }) {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  const w = useWindowWidth();
  const isMobile = w < 768;

  return (
    <footer style={{ background: "#0d0b09", padding: isMobile ? "80px 24px 48px" : "100px 80px 60px", borderTop: "1px solid rgba(196,134,42,0.1)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        {/* Newsletter */}
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.3em", color: tweaks.accentColor, marginBottom: 24, textTransform: "uppercase" }}>
            Join the Honey Society
          </p>
          <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 52, fontWeight: 300, color: "#faf7f2", margin: "0 0 16px", lineHeight: 1.1 }}>
            Early access to<br /><em style={{ color: tweaks.accentColor, fontStyle: "italic" }}>seasonal releases.</em>
          </h3>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "rgba(250,247,242,0.35)", marginBottom: 40 }}>
            Members receive advance notice before each harvest batch opens. No frequency commitment.
          </p>
          {!submitted ? (
            <div style={{ display: "flex", gap: 0, maxWidth: 480, margin: "0 auto" }}>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="your@address.com"
                style={{
                  flex: 1, padding: "14px 20px",
                  background: "rgba(250,247,242,0.05)", border: `1px solid rgba(196,134,42,0.2)`,
                  borderRight: "none", color: "#faf7f2",
                  fontFamily: "'DM Sans', sans-serif", fontSize: 14,
                  outline: "none",
                }}
              />
              <button
                onClick={() => {
                if (email) {
                  window.location.href = `mailto:honey@kaonara.com?subject=Honey Society — New Signup&body=New subscriber: ${encodeURIComponent(email)}`;
                  setSubmitted(true);
                }
              }}
                style={{
                  padding: "14px 28px",
                  background: tweaks.accentColor, border: "none", cursor: "pointer",
                  fontFamily: "'DM Sans', sans-serif", fontSize: 11,
                  letterSpacing: "0.2em", color: "#0d0b09",
                  textTransform: "uppercase", fontWeight: 600,
                  transition: "opacity 0.3s",
                }}
                onMouseEnter={e => e.target.style.opacity = 0.8}
                onMouseLeave={e => e.target.style.opacity = 1}
              >
                Join
              </button>
            </div>
          ) : (
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, color: tweaks.accentColor, fontStyle: "italic" }}>
              We will write when the bloom begins.
            </p>
          )}
        </div>

        {/* Bottom bar */}
        <div style={{ borderTop: "1px solid rgba(196,134,42,0.1)", paddingTop: 48, display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "flex-end", gap: isMobile ? 32 : 0 }}>
          <div>
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, color: "#faf7f2", margin: "0 0 8px", letterSpacing: "0.15em" }}>MIRANDA'S BEES</p>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "rgba(250,247,242,0.25)", letterSpacing: "0.1em" }}>
              Ka'ū District · Big Island, Hawai'i
            </p>
          </div>
          <div style={{ display: "flex", gap: 32 }}>
            {[
              { label: "Instagram", href: "https://instagram.com/kaonara.honey" },
              { label: "Contact", href: "tel:+14063045559" },
              { label: "Stockists", href: "https://maps.google.com/?q=93-7136+Hawaii+Belt+Rd+Naalehu+HI+96772" },
            ].map(link => (
              <a
                key={link.label}
                href={link.href}
                target={link.href.startsWith("http") ? "_blank" : undefined}
                rel="noopener noreferrer"
                style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "rgba(250,247,242,0.35)", letterSpacing: "0.1em", cursor: "pointer", transition: "color 0.3s", textDecoration: "none" }}
                onMouseEnter={e => e.target.style.color = tweaks.accentColor}
                onMouseLeave={e => e.target.style.color = "rgba(250,247,242,0.35)"}
              >
                {link.label}
              </a>
            ))}
          </div>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "rgba(250,247,242,0.2)" }}>
            © 2026 Miranda's Bees LLC
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FlavorWheel, Craftsmanship, Rarity, Pairing, Footer, useWindowWidth });
