// Home / landing page for the Jasmin Haas website.
function JHHome({ onNav, onOpen }) {
  const { Button, SectionLabel, ArtworkCard, Tag } = window.JasminHaasDesignSystem_416321;
  const Reveal = window.JHReveal;
  const works = window.JH_ARTWORKS;
  const hero = works.find((w) => w.id === "sternenregen") || works[0];
  const preview = works.filter((w) => w.status === "available").slice(0, 6);
  const exhibitions = window.JH_EXHIBITIONS;

  return (
    <div>
      {/* ===== HERO ===== */}
      <section style={{ position: "relative", minHeight: "92vh", display: "flex", alignItems: "flex-end", overflow: "hidden", marginTop: "-86px" }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
          <img src={hero.img} alt={hero.title} style={{ width: "100%", height: "100%", objectFit: "cover", animation: "jh-ken-burns 18s var(--ease-gallery) infinite alternate" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(18,14,10,0.82) 0%, rgba(18,14,10,0.30) 48%, rgba(18,14,10,0.34) 100%)" }} />
        </div>
        <div style={{ position: "relative", maxWidth: "var(--content-max)", width: "100%", margin: "0 auto", padding: "0 var(--gutter) clamp(48px, 7vw, 104px)" }}>
          <Reveal>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.74rem", fontWeight: 600, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--gold-300)" }}>
              Künstlerin aus Würzburg
            </span>
          </Reveal>
          <Reveal delay={120}>
            <h1 style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "var(--fs-display)", lineHeight: 1.0, letterSpacing: "-0.02em", color: "var(--linen-50)", maxWidth: "16ch" }}>
              Abstrakte Kunst,<br />mit <em style={{ fontStyle: "italic", color: "var(--gold-300)" }}>Blattgold</em> veredelt
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ margin: "26px 0 0", maxWidth: "46ch", fontFamily: "var(--font-sans)", fontSize: "1.1rem", lineHeight: 1.6, color: "rgba(246,241,232,0.86)" }}>
              Einzigartige Werke in Acryl auf Leinwand — entstanden in meinem Atelier in der Region Würzburg.
            </p>
          </Reveal>
          <Reveal delay={340}>
            <div style={{ display: "flex", gap: "14px", marginTop: "34px", flexWrap: "wrap" }}>
              <Button variant="gold" size="lg" onClick={() => onNav("portfolio")}>Portfolio entdecken</Button>
              <Button variant="on-ink" size="lg" onClick={() => onNav("contact")} iconRight={<i data-lucide="arrow-up-right" style={{ width: 16, height: 16 }}></i>}>Werk anfragen</Button>
            </div>
          </Reveal>
        </div>
        <div style={{ position: "absolute", right: "var(--gutter)", bottom: "40px", display: "flex", alignItems: "center", gap: "10px", color: "rgba(246,241,232,0.7)", fontFamily: "var(--font-sans)", fontSize: "0.68rem", letterSpacing: "0.2em", textTransform: "uppercase", writingMode: "vertical-rl" }}>
          <span>Scroll</span>
          <i data-lucide="arrow-down" style={{ width: 14, height: 14 }}></i>
        </div>
      </section>

      {/* ===== ABOUT / INTRO ===== */}
      <section style={{ background: "var(--bg-canvas)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(36px, 6vw, 88px)", alignItems: "center" }}>
          <Reveal style={{ position: "relative" }}>
            <img src={window.JH_STUDIO} alt="Atelier" style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-frame)" }} />
            <div style={{ position: "absolute", bottom: "-22px", left: "-22px", background: "var(--bg-paper)", padding: "16px 22px", boxShadow: "var(--shadow-md)", borderRadius: "var(--radius-sm)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.5rem", color: "var(--text-gold)" }}>seit 2021</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.66rem", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>im Atelier Würzburg</div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <SectionLabel eyebrow="Über die Künstlerin" title="Die Liebe zur Malerei, wiederentdeckt" />
            <p style={{ margin: "26px 0 0", maxWidth: "var(--measure)", fontFamily: "var(--font-sans)", fontSize: "1.08rem", lineHeight: 1.7, color: "var(--text-secondary)" }}>
              Seit meinem Umzug 2021 in die Region Würzburg habe ich die Liebe zur Malerei wiederentdeckt. Ich widme mich der abstrakten Kunst, welche ich mit Acrylfarben auf Leinwand bringe und mit Blattgold zu einzigartigen Kunstwerken veredle.
            </p>
            <p style={{ margin: "18px 0 0", maxWidth: "var(--measure)", fontFamily: "var(--font-sans)", fontSize: "1.08rem", lineHeight: 1.7, color: "var(--text-secondary)" }}>
              Sie träumen von einem individuell gestalteten Kunstwerk für Ihr Wohnzimmer oder Geschäft, das Ihre Wünsche perfekt widerspiegelt? Lassen Sie uns gemeinsam Ihre Ideen verwandeln.
            </p>
            <div style={{ display: "flex", gap: "10px", marginTop: "26px", flexWrap: "wrap" }}>
              <Tag variant="meta">Acryl auf Leinwand</Tag>
              <Tag variant="gold">Blattgold</Tag>
              <Tag variant="meta">Auftragsarbeiten</Tag>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== PORTFOLIO PREVIEW ===== */}
      <section style={{ background: "var(--bg-paper)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
          <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "20px", marginBottom: "clamp(36px, 5vw, 64px)" }}>
            <SectionLabel eyebrow="Verkaufsportfolio" title="Werke, die ein Zuhause suchen" />
            <Button variant="outline" onClick={() => onNav("portfolio")} iconRight={<i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>}>Alle Werke</Button>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(24px, 3vw, 46px)" }}>
            {preview.map((w, i) => (
              <Reveal key={w.id} delay={i * 80}>
                <ArtworkCard image={w.img} title={w.title} year={w.year} dimensions={w.w} status={w.status} price={w.price} ratio={w.ratio} onClick={() => onOpen(w.id)} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ===== EXHIBITIONS ===== */}
      <section style={{ background: "var(--bg-canvas)", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ maxWidth: "980px", margin: "0 auto" }}>
          <Reveal><SectionLabel eyebrow="Ausstellungen" title="Wo die Werke zu sehen waren" align="center" /></Reveal>
          <div style={{ marginTop: "clamp(36px, 5vw, 56px)" }}>
            {exhibitions.map((ex, i) => (
              <Reveal key={i} delay={i * 90}>
                <div style={{ display: "grid", gridTemplateColumns: "180px 1fr auto", gap: "28px", alignItems: "center", padding: "26px 8px", borderTop: "1px solid var(--line)", ...(i === exhibitions.length - 1 ? { borderBottom: "1px solid var(--line)" } : {}) }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.8rem", fontWeight: 600, letterSpacing: "0.1em", color: "var(--text-gold)" }}>{ex.date}</span>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.5rem", color: "var(--text-primary)" }}>{ex.title}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.86rem", color: "var(--text-secondary)", marginTop: "4px" }}>{ex.note}</div>
                  </div>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.8rem", color: "var(--text-muted)", display: "flex", alignItems: "center", gap: "7px" }}>
                    <i data-lucide="map-pin" style={{ width: 14, height: 14 }}></i>{ex.place}
                  </span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ===== COMMISSION CTA ===== */}
      <section style={{ background: "var(--bg-ink)", padding: "var(--section-y) var(--gutter)" }}>
        <Reveal style={{ maxWidth: "760px", margin: "0 auto", textAlign: "center" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.3em", textTransform: "uppercase", color: "var(--gold-300)" }}>Auftragsarbeit</span>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "var(--fs-h1)", lineHeight: 1.1, color: "var(--linen-50)" }}>
            Ein Werk, so einzigartig<br />wie Ihr Zuhause
          </h2>
          <p style={{ margin: "22px auto 0", maxWidth: "48ch", fontFamily: "var(--font-sans)", fontSize: "1.08rem", lineHeight: 1.7, color: "rgba(246,241,232,0.78)" }}>
            Erzählen Sie mir von Ihrer Idee — gemeinsam verwandeln wir sie in ein individuelles Kunstwerk, abgestimmt auf Farbe, Format und Raum.
          </p>
          <div style={{ marginTop: "34px" }}>
            <Button variant="gold" size="lg" onClick={() => onNav("contact")}>Jetzt anfragen</Button>
          </div>
        </Reveal>
      </section>
    </div>
  );
}
window.JHHome = JHHome;