// home-mid.jsx — middle home sections: Collection, Featured Product, Science

/* ─────────────────────────────────────────────────────────────
   3 · THE COLLECTION
   ───────────────────────────────────────────────────────────── */
const CollectionSection = ({ onNav, onOpenProduct, onAdd }) => (
  <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--bone)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <Reveal>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "var(--s-5)", marginBottom: "var(--s-7)" }}>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
          <Eyebrow>The Essentials &middot; Section ii</Eyebrow>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
        </div>
      </Reveal>

      <Reveal delay={80}>
        <div style={{ textAlign: "center", marginBottom: "var(--s-7)" }}>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(48px, 5.2vw, 76px)",
            letterSpacing: "-0.015em", lineHeight: 1.04,
            color: "var(--ink)", margin: 0, textWrap: "balance",
          }}>
            Six products. <span style={{ fontStyle: "italic" }}>A complete ritual</span>.
          </h2>
          <p style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
            fontSize: "20px", color: "var(--ink-2)", lineHeight: 1.5,
            margin: "var(--s-5) auto 0", maxWidth: "42ch",
          }}>
            Each formulation has a single purpose. Together, they form a complete daily practice for skin that has been waiting to be heard.
          </p>
        </div>
      </Reveal>

      {/* Filter chips, decorative — quiet pills, champagne accent on the first one */}
      <Reveal delay={140}>
        <div style={{ display: "flex", justifyContent: "center", gap: "var(--s-3)", flexWrap: "wrap", margin: "var(--s-7) 0 var(--s-9)" }}>
          {["All six", "Hydration", "Renewal", "Calm", "Brightening"].map((c, i) => (
            <button key={c} style={{
              fontFamily: "var(--font-sans)", fontSize: "11px",
              letterSpacing: "0.22em", textTransform: "uppercase",
              padding: "10px 20px",
              border: i === 0 ? "1px solid var(--ink)" : "1px solid var(--line)",
              background: i === 0 ? "var(--ink)" : "transparent",
              color: i === 0 ? "var(--paper)" : "var(--ink-2)",
              borderRadius: "999px",
              cursor: "pointer",
            }}>{c}</button>
          ))}
        </div>
      </Reveal>

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        gap: "var(--s-9) var(--s-7)",
      }}>
        {PRODUCTS.map((p, i) => (
          <Reveal key={p.id} delay={i * 60}>
            <ProductCard product={p} onClick={onOpenProduct} onAdd={onAdd} />
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div style={{ textAlign: "center", marginTop: "var(--s-10)" }}>
          <Button variant="ghost" onClick={() => onNav("shop")}>View the full collection</Button>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ─────────────────────────────────────────────────────────────
   4 · FEATURED PRODUCT — Halo Renewal Serum, with a clinical strip
   ───────────────────────────────────────────────────────────── */
const FeaturedProductSection = ({ onAdd, onOpenProduct }) => {
  const halo = PRODUCTS.find(p => p.id === "halo");
  return (
    <section style={{ padding: 0, background: "var(--linen)" }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        minHeight: "720px",
      }}>
        <div style={{ background: "var(--linen)", position: "relative", overflow: "hidden" }}>
          <img src="assets/featured-product.png" alt="Halo Renewal Serum"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          <div style={{
            position: "absolute", left: "var(--s-6)", top: "var(--s-6)",
            background: "rgba(250,248,243,0.86)",
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
            padding: "10px 16px",
            fontFamily: "var(--font-sans)", fontSize: "10px",
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--ink-2)",
          }}>In focus &middot; Edition 03</div>
        </div>

        <div style={{
          padding: "var(--s-10) var(--s-9)",
          display: "flex", flexDirection: "column", justifyContent: "center",
          background: "var(--cream)",
        }}>
          <Reveal>
            <Eyebrow style={{ marginBottom: "var(--s-5)" }}>Featured &middot; In focus</Eyebrow>
          </Reveal>
          <Reveal delay={120}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(48px, 5vw, 76px)",
              letterSpacing: "-0.015em",
              lineHeight: 1.0, color: "var(--ink)", margin: 0, textWrap: "balance",
              maxWidth: "14ch",
            }}>
              Halo<br/>Renewal Serum
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
              fontSize: "22px", lineHeight: 1.45, color: "var(--ink-2)",
              margin: "var(--s-5) 0 var(--s-5)", maxWidth: "32ch",
            }}>
              Worn nightly. Felt by morning.
            </p>
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: "15px",
              color: "var(--ink-2)", lineHeight: 1.7,
              margin: 0, maxWidth: "42ch",
            }}>
              Formulated with 0.1 percent encapsulated retinaldehyde, the most active and best-tolerated form of vitamin A available, stabilized with bakuchiol for skin that prefers a softer correction. The result of a four-year collaboration with a dermatological research group in Lausanne.
            </p>
          </Reveal>

          {/* Clinical strip */}
          <Reveal delay={280}>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
              gap: "var(--s-5)", marginTop: "var(--s-7)",
              paddingTop: "var(--s-6)", borderTop: "0.5px solid var(--line)",
            }}>
              {[
                ["94%", "Visibly more luminous skin"],
                ["89%", "Improved skin texture"],
                ["0%", "Discontinued for irritation"],
              ].map(([n, t]) => (
                <div key={n}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "40px", letterSpacing: "-0.02em", color: "var(--ink)", lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--ink-3)", marginTop: 8, lineHeight: 1.5, maxWidth: "20ch" }}>{t}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 14,
              fontFamily: "var(--font-sans)", fontSize: "11px",
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--ink-4)",
            }}>Independent twelve-week study &middot; n = 84 &middot; Dermatest GmbH, Münster</div>
          </Reveal>

          <Reveal delay={360}>
            <div style={{ display: "flex", gap: "var(--s-5)", alignItems: "baseline", marginTop: "var(--s-7)" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "28px", color: "var(--ink)" }}>$220</span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-4)" }}>30 ml</span>
            </div>
            <div style={{ display: "flex", gap: "var(--s-4)", marginTop: "var(--s-6)", flexWrap: "wrap" }}>
              <Button onClick={() => onAdd(halo)}>Add to ritual</Button>
              <Button variant="quiet" onClick={() => onOpenProduct(halo)}>The formulation</Button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ─────────────────────────────────────────────────────────────
   5 · THE SCIENCE — includes dermatologist endorsement
   ───────────────────────────────────────────────────────────── */
const ScienceSection = () => (
  <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--bone)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <Reveal>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "var(--s-5)", marginBottom: "var(--s-9)" }}>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
          <Eyebrow>Our practice &middot; Section iii</Eyebrow>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
        </div>
      </Reveal>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "var(--s-10)", alignItems: "center" }}>
        <Reveal delay={120}>
          <div style={{ aspectRatio: "4 / 5", borderRadius: "2px", overflow: "hidden", background: "var(--linen)" }}>
            <img src="assets/science.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </Reveal>

        <div>
          <Reveal>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(48px, 5vw, 76px)",
              letterSpacing: "-0.015em", lineHeight: 1.0,
              color: "var(--ink)", margin: 0, textWrap: "balance",
              maxWidth: "14ch",
            }}>
              Science <span style={{ fontStyle: "italic" }}>as craft</span>.
            </h2>
          </Reveal>

          <Reveal delay={100}>
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: "16px",
              color: "var(--ink-2)", lineHeight: 1.75, maxWidth: "44ch",
              margin: "var(--s-6) 0 var(--s-4)",
            }}>
              Every Lumera formulation is developed in partnership with dermatological researchers in Switzerland and Japan. We disclose every concentration. We test every claim.
            </p>
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: "16px",
              color: "var(--ink-2)", lineHeight: 1.75, maxWidth: "44ch",
              margin: 0,
            }}>
              Our laboratory in Geneva operates under pharmaceutical-grade conditions. Active ingredients are stabilized using encapsulation more commonly found in clinical dermatology than in cosmetics.
            </p>
          </Reveal>

          {/* Stat strip */}
          <Reveal delay={200}>
            <ul style={{
              listStyle: "none", padding: 0, marginTop: "var(--s-8)",
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-6) var(--s-7)",
            }}>
              {[
                ["+47%", "Corneometer-measured hydration at eight hours, Lucent Essence"],
                ["−18%", "TEWL versus baseline, Veil Restorative Cream"],
                ["12 wks", "Independent clinical testing per release"],
                ["0", "Synthetic fragrance or filler ingredients"],
              ].map(([n, t]) => (
                <li key={n} style={{ borderTop: "0.5px solid var(--line)", paddingTop: "var(--s-4)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "42px", letterSpacing: "-0.02em", color: "var(--ink)", lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--ink-3)", marginTop: 10, maxWidth: "26ch", lineHeight: 1.55 }}>{t}</div>
                </li>
              ))}
            </ul>
          </Reveal>

          <Reveal delay={280}>
            <div style={{ marginTop: "var(--s-7)" }}>
              <ArrowLink>Read the clinical studies</ArrowLink>
            </div>
          </Reveal>
        </div>
      </div>

      {/* Dermatologist endorsement — quiet block beneath the science panel */}
      <Reveal delay={120}>
        <div style={{
          marginTop: "var(--s-11)",
          padding: "var(--s-8) var(--s-9)",
          background: "var(--cream)",
          borderTop: "0.5px solid var(--line)",
          borderBottom: "0.5px solid var(--line)",
          display: "grid",
          gridTemplateColumns: "1fr 1.6fr",
          gap: "var(--s-8)",
          alignItems: "center",
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>Independent endorsement</Eyebrow>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "26px", color: "var(--ink)", lineHeight: 1.2 }}>{DERM_QUOTE.by}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--ink-3)", marginTop: 8, letterSpacing: "0.02em" }}>{DERM_QUOTE.title}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "var(--ink-4)", marginTop: 6, letterSpacing: "0.04em", lineHeight: 1.6, maxWidth: "32ch" }}>{DERM_QUOTE.credentials}</div>
          </div>
          <blockquote style={{
            margin: 0,
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
            fontSize: "26px", lineHeight: 1.4, color: "var(--ink)",
            position: "relative",
            paddingLeft: "var(--s-6)",
            borderLeft: "1px solid var(--champagne)",
          }}>
            "{DERM_QUOTE.quote}"
          </blockquote>
        </div>
      </Reveal>
    </div>
  </section>
);

window.CollectionSection = CollectionSection;
window.FeaturedProductSection = FeaturedProductSection;
window.ScienceSection = ScienceSection;
