// home-bot.jsx — bottom home sections: Sourcing, Ritual, Testimonials, Press, Journal, Newsletter

/* ─────────────────────────────────────────────────────────────
   6 · SOURCING & PROVENANCE — full-bleed editorial with text panel
   ───────────────────────────────────────────────────────────── */
const SourcingSection = ({ onNav }) => (
  <section style={{ padding: 0, background: "var(--noir)" }}>
    <div style={{ position: "relative", overflow: "hidden", minHeight: "min(86vh, 760px)" }}>
      <img src="assets/sourcing.png" alt=""
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      {/* Strong left-side protection wash — guarantees text legibility */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(to right, rgba(26,22,18,0.78) 0%, rgba(26,22,18,0.55) 30%, rgba(26,22,18,0.20) 55%, rgba(26,22,18,0) 75%)",
        pointerEvents: "none",
      }} />
      <div style={{
        position: "relative",
        maxWidth: 1280, margin: "0 auto",
        padding: "var(--s-11) var(--s-9)",
        display: "grid", gridTemplateColumns: "minmax(0, 580px) 1fr",
        alignItems: "center", minHeight: "min(86vh, 760px)",
      }}>
        <div style={{ color: "var(--paper)" }}>
          <Reveal>
            <Eyebrow color="#D9C49A" style={{ marginBottom: 20 }}>Our growers &middot; Section iv</Eyebrow>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(48px, 5.4vw, 80px)",
              letterSpacing: "-0.015em", lineHeight: 1.02,
              color: "var(--paper)", margin: 0, textWrap: "balance",
              maxWidth: "16ch",
            }}>
              Rare ingredients.<br/>
              <span style={{ fontStyle: "italic" }}>Long partnerships.</span>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
              fontSize: "20px", lineHeight: 1.5, color: "rgba(250,248,243,0.92)",
              margin: "var(--s-6) 0 var(--s-5)", maxWidth: "34ch",
            }}>
              The camellia oil in Aurum is pressed from seeds harvested on a single family farm in Kyushu, Japan, where it has been cultivated the same way for four generations.
            </p>
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: "15px",
              color: "rgba(250,248,243,0.78)", lineHeight: 1.75,
              margin: 0, maxWidth: "42ch",
            }}>
              We do not switch suppliers when prices rise. We pay our growers above market. We visit them. Every gram is traced to a single grower partnership.
            </p>
          </Reveal>

          <Reveal delay={300}>
            <div style={{
              marginTop: "var(--s-8)",
              display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
              gap: "var(--s-5)",
            }}>
              {[
                ["Kyushu", "Camellia, since 1972"],
                ["Madagascar", "Centella asiatica, since 2019"],
                ["Gangotri", "Glacier water, by permit"],
              ].map(([place, what]) => (
                <div key={place} style={{ borderTop: "0.5px solid rgba(250,248,243,0.32)", paddingTop: "var(--s-3)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300, fontSize: "22px", color: "var(--paper)" }}>{place}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(250,248,243,0.7)", marginTop: 6 }}>{what}</div>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={400}>
            <div style={{ marginTop: "var(--s-7)" }}>
              <ArrowLink color="var(--paper)" onClick={() => onNav("house")}>Meet our growers</ArrowLink>
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

/* ─────────────────────────────────────────────────────────────
   7 · THE RITUAL
   ───────────────────────────────────────────────────────────── */
const RitualSection = () => (
  <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>On using Lumera &middot; Section v</Eyebrow>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
        </div>
      </Reveal>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "var(--s-10)", alignItems: "center" }}>
        <div>
          <Reveal>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(44px, 4.8vw, 72px)",
              letterSpacing: "-0.015em", lineHeight: 1.04,
              color: "var(--ink)", margin: 0, textWrap: "balance",
              maxWidth: "18ch",
            }}>
              A regimen is a chore.<br/>
              <span style={{ fontStyle: "italic" }}>A ritual is a refuge.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{
              fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
              fontSize: "20px", lineHeight: 1.5, color: "var(--ink-2)",
              margin: "var(--s-6) 0 var(--s-6)", maxWidth: "36ch",
            }}>
              A Lumera routine is not a regimen. It is a few minutes of stillness, in which the skin is cleansed, replenished, and restored.
            </p>
          </Reveal>

          <Reveal delay={200}>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                ["i", "Cleanse", "Aurum Cleansing Balm, warmed between fingertips, pressed into dry skin. Removed with a warm linen cloth."],
                ["ii", "Hydrate", "Lucent Essence, decanted into clean palms and pressed into damp skin. Pause. Allow it to settle."],
                ["iii", "Renew", "Halo Serum, three drops, evenings only. Begin twice weekly. Build to nightly over the course of a month."],
                ["iv", "Seal", "Veil Cream, then a single touch of Solace under each eye, and Ember Oil as the closing note of the evening."],
              ].map(([n, t, d]) => (
                <li key={n} style={{
                  display: "grid", gridTemplateColumns: "60px 1fr",
                  gap: "var(--s-5)",
                  padding: "var(--s-5) 0",
                  borderTop: "0.5px solid var(--line)",
                }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300, fontSize: "32px", color: "var(--champagne-d)", lineHeight: 1 }}>{n}</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "26px", color: "var(--ink)", lineHeight: 1.15 }}>{t}</div>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--ink-3)", lineHeight: 1.7, margin: "8px 0 0", maxWidth: "48ch" }}>{d}</p>
                  </div>
                </li>
              ))}
              <li style={{ borderTop: "0.5px solid var(--line)" }}></li>
            </ol>
          </Reveal>

          <Reveal delay={300}>
            <div style={{ marginTop: "var(--s-7)" }}>
              <ArrowLink>Build your ritual</ArrowLink>
            </div>
          </Reveal>
        </div>

        <Reveal delay={150}>
          <div style={{
            position: "relative",
            aspectRatio: "4 / 5",
            borderRadius: "2px",
            overflow: "hidden",
            background: "var(--linen)",
          }}>
            <img src="assets/ritual.png" alt=""
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <div style={{
              position: "absolute", left: "var(--s-6)", bottom: "var(--s-6)",
              padding: "12px 16px",
              background: "rgba(250,248,243,0.92)",
              fontFamily: "var(--font-sans)", fontSize: "10px",
              letterSpacing: "0.32em", textTransform: "uppercase",
              color: "var(--ink-2)",
            }}>Evening · 9.40 pm</div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ─────────────────────────────────────────────────────────────
   8 · TESTIMONIALS — three quiet typographic blocks
   ───────────────────────────────────────────────────────────── */
const TestimonialsSection = () => (
  <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--linen)" }}>
    <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>From our customers</Eyebrow>
          <span style={{ height: 1, background: "var(--line-strong)", flex: "0 0 60px" }}></span>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--s-7)" }}>
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={i} delay={i * 80}>
            <figure style={{
              margin: 0,
              padding: "var(--s-7) var(--s-6)",
              borderTop: "0.5px solid var(--line)",
              height: "100%",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              gap: "var(--s-5)",
            }}>
              <blockquote style={{
                margin: 0,
                fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
                fontSize: "24px", lineHeight: 1.4, color: "var(--ink)",
                textWrap: "pretty",
              }}>
                "{t.quote}"
              </blockquote>
              <figcaption>
                <div style={{ width: 24, height: 1, background: "var(--champagne)", marginBottom: 12 }} />
                <div style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-3)" }}>
                  {t.by} &middot; {t.city}
                </div>
              </figcaption>
            </figure>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ─────────────────────────────────────────────────────────────
   9 · PRESS — logo row + rotating pull quote beneath
   ───────────────────────────────────────────────────────────── */
const PressSection = () => {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % PRESS.length), 6500);
    return () => clearInterval(id);
  }, []);
  const current = PRESS[idx];
  return (
    <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--bone)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: "var(--s-9)" }}>
            <Eyebrow style={{ marginBottom: "var(--s-5)" }}>Press &amp; Recognition</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(40px, 4.6vw, 64px)",
              letterSpacing: "-0.015em", lineHeight: 1.05,
              color: "var(--ink)", margin: 0,
            }}>
              In good company.
            </h2>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300, fontSize: "18px", color: "var(--ink-3)", margin: "var(--s-5) auto 0" }}>
              Selected mentions from publications we admire.
            </p>
          </div>
        </Reveal>

        {/* Logo row */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(6, 1fr)",
          gap: "var(--s-5)", alignItems: "center",
          paddingBottom: "var(--s-9)",
        }}>
          {PRESS.map((p, i) => (
            <div key={p.name} onMouseEnter={() => setIdx(i)} style={{
              textAlign: "center",
              cursor: "pointer",
              padding: "12px 0",
              fontSize: p.label.length > 8 ? "20px" : "26px",
              color: idx === i ? "var(--ink)" : "var(--ink-4)",
              opacity: idx === i ? 1 : 0.7,
              transition: "color 320ms var(--ease-quiet), opacity 320ms var(--ease-quiet)",
              ...p.style,
            }}>{p.label}</div>
          ))}
        </div>

        {/* Quote card */}
        <Reveal>
          <div style={{
            borderTop: "0.5px solid var(--line)",
            borderBottom: "0.5px solid var(--line)",
            padding: "var(--s-8) var(--s-9)",
            display: "grid",
            gridTemplateColumns: "auto 1fr",
            gap: "var(--s-8)",
            alignItems: "center",
            background: "var(--cream)",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "84px", lineHeight: 1, color: "var(--champagne)",
              fontStyle: "italic",
            }}>"</div>
            <div style={{ position: "relative", minHeight: 120 }}>
              {PRESS.map((p, i) => (
                <div key={p.name} style={{
                  position: idx === i ? "relative" : "absolute",
                  inset: idx === i ? "auto" : 0,
                  opacity: idx === i ? 1 : 0,
                  transition: "opacity 600ms var(--ease-quiet)",
                  pointerEvents: idx === i ? "auto" : "none",
                }}>
                  <blockquote style={{
                    margin: 0,
                    fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
                    fontSize: "clamp(22px, 2.2vw, 30px)",
                    lineHeight: 1.4, color: "var(--ink)",
                    maxWidth: "52ch",
                  }}>
                    {p.quote}
                  </blockquote>
                  <div style={{
                    marginTop: "var(--s-5)",
                    display: "flex", alignItems: "center", gap: "var(--s-4)",
                  }}>
                    <div style={{ width: 24, height: 1, background: "var(--champagne)" }}></div>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-3)" }}>
                      {p.name} &middot; {p.issue}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ─────────────────────────────────────────────────────────────
   10 · JOURNAL preview
   ───────────────────────────────────────────────────────────── */
const JournalSection = () => (
  <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--linen)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <Reveal>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "var(--s-9)", flexWrap: "wrap", gap: "var(--s-5)" }}>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>The Journal</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(40px, 4.6vw, 64px)", letterSpacing: "-0.015em", lineHeight: 1.05, color: "var(--ink)", margin: 0 }}>
              Long-form, monthly.
            </h2>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300, fontSize: "18px", color: "var(--ink-3)", margin: "var(--s-4) 0 0", maxWidth: "42ch" }}>
              Correspondence on skin, ritual, and the discipline of doing less.
            </p>
          </div>
          <ArrowLink>Read the Journal</ArrowLink>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-7)" }}>
        {JOURNAL.map((j, i) => (
          <Reveal key={j.id} delay={i * 100}>
            <JournalCard entry={j} />
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ─────────────────────────────────────────────────────────────
   11 · NEWSLETTER (The Lumera Letter)
   ───────────────────────────────────────────────────────────── */
const NewsletterSection = () => (
  <section style={{ padding: "var(--s-11) var(--s-7)", background: "var(--bone)", textAlign: "center" }}>
    <div style={{ maxWidth: 720, margin: "0 auto" }}>
      <Reveal>
        <Eyebrow style={{ marginBottom: "var(--s-5)" }}>The Lumera Letter</Eyebrow>
      </Reveal>
      <Reveal delay={100}>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 300,
          fontSize: "clamp(40px, 4.8vw, 68px)",
          letterSpacing: "-0.015em", lineHeight: 1.04,
          color: "var(--ink)", margin: 0, textWrap: "balance",
        }}>
          A monthly editorial<br/>on skin, ritual, and stillness.
        </h2>
      </Reveal>
      <Reveal delay={200}>
        <p style={{
          fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
          fontSize: "20px", color: "var(--ink-2)", lineHeight: 1.5,
          margin: "var(--s-5) auto var(--s-7)", maxWidth: "40ch",
        }}>
          No promotions. No discounts. Just a quiet letter, once a month. Unsubscribe at any time.
        </p>
      </Reveal>
      <Reveal delay={300}>
        <form onSubmit={(e) => e.preventDefault()} style={{
          display: "flex", maxWidth: 480, margin: "0 auto",
          borderBottom: "1px solid var(--ink)", paddingBottom: 6,
        }}>
          <input placeholder="Your email address" style={{
            flex: 1, padding: "14px 0", border: 0, background: "transparent",
            fontFamily: "var(--font-sans)", fontSize: "15px", color: "var(--ink)",
            outline: "none",
          }} />
          <button type="submit" style={{
            fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 500,
            letterSpacing: "0.22em", textTransform: "uppercase",
            border: 0, background: "transparent", color: "var(--ink)",
            padding: "14px 0 14px 24px", cursor: "pointer",
          }}>Subscribe →</button>
        </form>
      </Reveal>
      <Reveal delay={380}>
        <div style={{
          marginTop: "var(--s-9)",
          paddingTop: "var(--s-7)",
          borderTop: "0.5px solid var(--line)",
          display: "flex", gap: "var(--s-7)", justifyContent: "center", flexWrap: "wrap",
          fontFamily: "var(--font-sans)", fontSize: "11px",
          letterSpacing: "0.22em", textTransform: "uppercase",
          color: "var(--ink-3)",
        }}>
          <span>Free global shipping over $200</span>
          <span style={{ color: "var(--champagne)" }}>◆</span>
          <span>Thirty-day returns</span>
          <span style={{ color: "var(--champagne)" }}>◆</span>
          <span>Concierge within twenty-four hours</span>
        </div>
      </Reveal>
    </div>
  </section>
);

window.SourcingSection = SourcingSection;
window.RitualSection = RitualSection;
window.TestimonialsSection = TestimonialsSection;
window.PressSection = PressSection;
window.JournalSection = JournalSection;
window.NewsletterSection = NewsletterSection;
