/* global React */

const TAGLINES = {
  "peace":    "drawing keeps me grounded.",
  "people":   "i paint the people i love.",
  "engineer": "engineer by day, painter on weekends.",
  "slow":     "soft portraits, made by hand.",
};

function paletteAccent(palette) {
  if (palette === "tide")      return { lead: "var(--tide-600)", soft: "var(--tide-100)", deep: "var(--tide-700)" };
  if (palette === "balanced")  return { lead: "var(--marigold-600)", soft: "var(--tide-100)", deep: "var(--tide-700)" };
  return { lead: "var(--marigold-600)", soft: "var(--marigold-100)", deep: "var(--marigold-700)" };
}

function HeroSplit({ onNav, onOpenArtwork, palette, tagline }) {
  const t = TAGLINES[tagline] || TAGLINES.peace;
  const a = paletteAccent(palette);
  return (
    <section style={{ padding: "72px 0 110px", position: "relative" }}>
      <div style={{
        maxWidth: 1120,
        margin: "0 auto",
        padding: "0 32px",
        display: "grid",
        gridTemplateColumns: "1.05fr 1fr",
        gap: 64,
        alignItems: "center",
        position: "relative",
      }}>
        <Doodle kind="sparkle" size={28} color="var(--marigold-500)" style={{ position: "absolute", top: -8, left: "42%" }} />
        <Doodle kind="asterisk" size={20} color="var(--tide-400)" style={{ position: "absolute", bottom: 32, left: "48%" }} />

        <div style={{ position: "relative" }}>
          <h1 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(34px, 4vw, 58px)",
            lineHeight: 1.02,
            margin: "0 0 18px",
            color: "var(--ink)",
            letterSpacing: "-0.015em",
            textWrap: "balance",
          }}>
            {t}
          </h1>

          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 19,
            lineHeight: 1.6,
            color: "var(--ink-soft)",
            maxWidth: 480,
            margin: "0 0 32px",
          }}>
            I'm Bárbara — a Chemical and Biological Engineer who draws to bring her anxious heart to peace. <span style={{ whiteSpace: "nowrap" }}>💌</span>
          </p>

          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" icon="arrow-right" onClick={() => onNav("commission")}>
              start a piece
            </Button>
            <Button variant="secondary" size="lg" onClick={() => onNav("gallery")}>
              see the gallery
            </Button>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          {/* tape pieces */}
          <Tape tone="marigold" rotate={-8} width={88} top={-14} left={20} opacity={0.55} />
          <Tape tone="tide" rotate={6} width={72} top={-10} right={36} opacity={0.5} />

          <div
            onClick={() => onOpenArtwork("sun-and-moon")}
            style={{
              borderRadius: 18,
              overflow: "hidden",
              transform: "rotate(-1.5deg)",
              cursor: "pointer",
              boxShadow: "0 12px 28px rgba(42,33,24,0.14), 0 24px 56px rgba(245,165,36,0.20)",
              aspectRatio: "1",
              transition: "transform 320ms cubic-bezier(0.22,1,0.36,1)",
              position: "relative",
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "rotate(-0.5deg) translateY(-4px)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "rotate(-1.5deg)"}
          >
            <img
              src="assets/sun-and-moon.png"
              alt="sun & moon"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          </div>

          {/* signature plate */}
          <div style={{
            position: "absolute",
            bottom: -28,
            left: -24,
            background: "var(--cream)",
            borderRadius: 14,
            padding: "14px 18px",
            boxShadow: "0 8px 22px rgba(42,33,24,0.12)",
            display: "flex",
            flexDirection: "column",
            gap: 2,
            transform: "rotate(-3deg)",
            zIndex: 2,
          }}>
            <Eyebrow>featured · 2026</Eyebrow>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink)" }}>sun & moon</div>
            <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: a.deep, marginTop: -2 }}>— Bárbara</div>
          </div>

          {/* handwritten caption below image */}
          <div style={{
            display: "flex", alignItems: "flex-start", justifyContent: "flex-end",
            marginTop: 36, paddingRight: 8,
          }}>
            <div style={{ textAlign: "right", transform: "rotate(2deg)", transformOrigin: "right top" }}>
              <Arrow direction="up" color="var(--ink-muted)" size={36} style={{ marginBottom: 2, marginRight: 24, display: "block", marginLeft: "auto" }} />
              <MarginNote rotate={0} color="var(--ink-muted)" size={20}>
                digital · procreate<br/>diptych 🤍
              </MarginNote>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroFullBleed({ onNav, onOpenArtwork, palette, tagline }) {
  const t = TAGLINES[tagline] || TAGLINES.peace;
  const a = paletteAccent(palette);
  return (
    <section style={{ position: "relative", padding: 0 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px", position: "relative" }}>
        <div style={{
          position: "relative",
          borderRadius: 24,
          overflow: "hidden",
          marginTop: 32,
          height: "clamp(520px, 80vh, 720px)",
          boxShadow: "0 18px 48px rgba(42,33,24,0.22)",
        }}>
          <img
            src="assets/sun-and-moon.png"
            alt="sun & moon"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "saturate(105%)" }}
          />
          {/* protection gradient */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(42,33,24,0) 40%, rgba(42,33,24,0.55) 100%)",
            pointerEvents: "none",
          }} />
          {/* left protection gradient for legibility */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(90deg, rgba(42,33,24,0.5) 0%, rgba(42,33,24,0.0) 55%)",
            pointerEvents: "none",
          }} />

          <div style={{
            position: "absolute",
            left: 48,
            bottom: 48,
            right: 48,
            color: "var(--cream)",
            maxWidth: 620,
          }}>
            <h1 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(40px, 4.8vw, 70px)",
              lineHeight: 1,
              margin: "0 0 18px",
              color: "var(--cream)",
              letterSpacing: "-0.015em",
              textWrap: "balance",
            }}>
              {t}
            </h1>
            <p style={{
              fontFamily: "var(--font-body)",
              fontSize: 19,
              lineHeight: 1.55,
              color: "rgba(247,241,232,0.88)",
              maxWidth: 480,
              margin: "0 0 28px",
            }}>
              I'm Bárbara — Chemical and Biological Engineer by day, illustrator on weekends. 🤍
            </p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              <Button variant="marigold" size="lg" icon="arrow-right" onClick={() => onNav("commission")}>
                start a piece
              </Button>
              <Button variant="cream" size="lg" onClick={() => onNav("gallery")}>
                see the gallery
              </Button>
            </div>
          </div>

          {/* corner ornament */}
          <div style={{ position: "absolute", top: 28, right: 28 }}>
            <Doodle kind="sun" size={44} color="rgba(247,241,232,0.85)" />
          </div>
        </div>

        {/* handwritten caption under the image */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-start",
          padding: "20px 8px 0",
        }}>
          <MarginNote rotate={-2} size={22} color={a.deep}>
            sun & moon, 2026 — one of mine i'm proud of ✨
          </MarginNote>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-muted)", letterSpacing: "0.08em" }}>
            01 / featured
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ onNav, onOpenArtwork, palette, tagline }) {
  const t = TAGLINES[tagline] || TAGLINES.peace;
  const a = paletteAccent(palette);
  return (
    <section style={{ padding: "72px 0 80px", position: "relative" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", padding: "0 32px", textAlign: "center", position: "relative" }}>
        <Doodle kind="sparkle" size={28} color={a.lead} style={{ display: "block", margin: "0 auto 12px" }} />

        <h1 style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(40px, 5.2vw, 78px)",
          lineHeight: 0.98,
          margin: "0 0 22px",
          color: "var(--ink)",
          letterSpacing: "-0.02em",
          textWrap: "balance",
        }}>
          {t}
        </h1>

        <p style={{
          fontFamily: "var(--font-body)",
          fontSize: 20,
          lineHeight: 1.6,
          color: "var(--ink-soft)",
          maxWidth: 540,
          margin: "0 auto 32px",
        }}>
          some of the work I've been making lately. 🤍
        </p>

        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" icon="arrow-right" onClick={() => onNav("commission")}>
            start a piece
          </Button>
          <Button variant="secondary" size="lg" onClick={() => onNav("gallery")}>
            see the gallery
          </Button>
        </div>
      </div>

      {/* centered featured image with marginalia */}
      <div style={{ maxWidth: 720, margin: "64px auto 0", padding: "0 32px", position: "relative" }}>
        <Tape tone="marigold" rotate={-6} width={90} top={-12} left="46%" />

        <div
          onClick={() => onOpenArtwork("sun-and-moon")}
          style={{
            borderRadius: 18,
            overflow: "hidden",
            cursor: "pointer",
            boxShadow: "0 14px 32px rgba(42,33,24,0.16), 0 28px 64px rgba(245,165,36,0.18)",
            aspectRatio: "16/10",
            transform: "rotate(-0.6deg)",
            transition: "transform 320ms cubic-bezier(0.22,1,0.36,1)",
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = "rotate(0deg) translateY(-4px)"}
          onMouseLeave={(e) => e.currentTarget.style.transform = "rotate(-0.6deg)"}
        >
          <img
            src="assets/sun-and-moon.png"
            alt="sun & moon"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }}
          />
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginTop: 16, padding: "0 8px",
        }}>
          <MarginNote rotate={-2} size={22} color={a.deep}>
            featured · sun & moon, 2026
          </MarginNote>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: a.deep }}>— bárbara</div>
        </div>
      </div>
    </section>
  );
}

function Hero({ onNav, onOpenArtwork, layout = "split", palette = "warm", tagline = "peace" }) {
  if (layout === "full-bleed") return <HeroFullBleed onNav={onNav} onOpenArtwork={onOpenArtwork} palette={palette} tagline={tagline} />;
  if (layout === "centered")   return <HeroCentered  onNav={onNav} onOpenArtwork={onOpenArtwork} palette={palette} tagline={tagline} />;
  return <HeroSplit onNav={onNav} onOpenArtwork={onOpenArtwork} palette={palette} tagline={tagline} />;
}

window.Hero = Hero;