// hero.jsx — Four hero treatments for the cozy storybook portfolio.

function HeroMagazine({ palette }) {
  return (
    <section data-vg-section="hero-magazine" style={{ ...{ background: palette.bg, padding: "32px 80px 80px", position: "relative", overflow: "hidden" }, background: "rgb(255, 253, 247)", textAlign: "left" }}>
      <div data-vg-grid="hero-2col" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center", minHeight: 640 }}>
        <div>
          <div style={{ fontFamily: "var(--vg-body)", fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", color: palette.muted, marginBottom: 28 }}>ILLUSTRATOR

          </div>
          <div style={{ width: 380, maxWidth: "100%", margin: "0 0 12px" }}>
            <image-slot id="logo" shape="rect" placeholder="Drop your logo"
            style={{ display: "block", height: "182px", opacity: "1", padding: "80px", margin: "4px", borderStyle: "solid", width: "278px", borderWidth: "0px" }}></image-slot>
          </div>
          <p style={{
            lineHeight: 1.55, maxWidth: 460,
            color: palette.ink, marginTop: 32, opacity: 0.85, fontSize: "16px", fontFamily: "\"Work Sans\""
          }}>Creating joyful characters and stories for publishers, brands, and the little ones who love them.

          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 40 }}>
            <a href="#work" style={{ ...btnPrimary(palette), background: "rgb(230, 166, 127)" }}>See the work</a>
            <a href="#contact" style={btnGhost(palette)}>Say hello</a>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ ...{
              background: palette.frame, padding: 16,
              boxShadow: "0 30px 60px -30px rgba(60,40,20,.45)",
              aspectRatio: "3 / 4"
            }, background: "rgb(255, 253, 247)" }}>
            <image-slot id="hero-main" shape="rect" placeholder="Drop your signature illustration"
            style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
          </div>
          <div style={{ ...{
              position: "absolute", bottom: -28, left: -32,
              background: palette.bg, padding: "12px 18px",
              border: `1px solid ${palette.line}`, fontFamily: "var(--vg-body)", fontSize: 12,
              letterSpacing: ".14em", textTransform: "uppercase", color: palette.muted,
              transform: "rotate(-2deg)"
            }, color: "rgb(155, 152, 141)", background: "rgb(255, 252, 243)" }}>FARAWAY FRIEND  · 2022

          </div>
        </div>
      </div>
    </section>);

}

function HeroScrapbook({ palette }) {
  // Pinned thumbs scattered around a centered title block.
  const pins = [
  { id: "hero-pin-1", x: "4%", y: "8%", w: 220, h: 280, rot: -6 },
  { id: "hero-pin-2", x: "78%", y: "12%", w: 200, h: 200, rot: 5 },
  { id: "hero-pin-3", x: "8%", y: "62%", w: 240, h: 180, rot: 4 },
  { id: "hero-pin-4", x: "74%", y: "58%", w: 220, h: 280, rot: -4 }];

  return (
    <section data-vg-section="hero-scrapbook" style={{ background: palette.bg, padding: "60px 80px 100px", position: "relative", overflow: "hidden", minHeight: 760 }}>
      {pins.map((p, i) =>
      <div key={p.id} data-vg-pin="true" style={{
        position: "absolute", left: p.x, top: p.y, width: p.w, height: p.h,
        background: palette.frame, padding: 10,
        transform: `rotate(${p.rot}deg)`,
        boxShadow: "0 18px 30px -20px rgba(60,40,20,.4)",
        zIndex: 1
      }}>
          <span aria-hidden="true" style={{
          position: "absolute", top: -8, left: "50%", transform: "translateX(-50%)",
          width: 60, height: 16, background: "rgba(244, 232, 200, 0.78)",
          boxShadow: "0 2px 6px rgba(60,40,20,.08)"
        }} />
          <image-slot id={p.id} shape="rect" placeholder={`Sample ${i + 1}`}
        style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
        </div>
      )}
      <div style={{
        position: "relative", zIndex: 2, maxWidth: 640, margin: "120px auto 80px", textAlign: "center"
      }}>
        <div style={{ fontFamily: "var(--vg-body)", fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", color: palette.muted, marginBottom: 20 }}>
          A working sketchbook by
        </div>
        <div style={{ width: 380, maxWidth: "100%", margin: "0 auto 12px" }}>
          <image-slot id="logo" shape="rect" placeholder="Drop your logo"
          style={{ width: "100%", height: 140, display: "block" }}></image-slot>
        </div>
        <p style={{ fontFamily: "var(--vg-body)", fontSize: 18, lineHeight: 1.55, marginTop: 24, color: palette.ink, opacity: .85 }}>
          Illustrator of picture books, magazine spreads, and the occasional plush bear.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 32 }}>
          <a href="#work" style={btnPrimary(palette)}>See the work</a>
          <a href="#contact" style={btnGhost(palette)}>Say hello</a>
        </div>
      </div>
    </section>);

}

function HeroSpread({ palette }) {
  // Full-bleed left illustration, cream right with name + bio.
  return (
    <section data-vg-section="hero-spread" style={{ background: palette.bg, display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 760 }}>
      <div style={{ background: palette.frame, padding: 24 }}>
        <image-slot id="hero-spread" shape="rect" placeholder="Drop a full-bleed spread"
        style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
      <div style={{ padding: "100px 80px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ fontFamily: "var(--vg-body)", fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", color: palette.muted, marginBottom: 24 }}>
          Chapter One
        </div>
        <div style={{ width: 320, maxWidth: "100%", margin: "0 0 20px" }}>
          <image-slot id="logo" shape="rect" placeholder="Drop your logo"
          style={{ width: "100%", height: 100, display: "block" }}></image-slot>
        </div>
        <h1 style={{
          fontFamily: "var(--vg-display)", fontSize: 80, lineHeight: 1.02, margin: 0,
          color: palette.ink, letterSpacing: "-0.025em"
        }}>
          Pictures for <em style={{ fontStyle: "italic", color: palette.primary, fontWeight: 400 }}>small readers</em>.
        </h1>
        <p style={{ fontFamily: "var(--vg-body)", fontSize: 18, lineHeight: 1.6, marginTop: 32, color: palette.ink, opacity: .8, maxWidth: 460 }}>
          A storybook studio working in watercolour and gouache. Currently taking on picture-book commissions for autumn 2026.
        </p>
        <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
          <a href="#work" style={btnPrimary(palette)}>See the work</a>
          <a href="#contact" style={btnGhost(palette)}>Say hello</a>
        </div>
      </div>
    </section>);

}

function HeroStamp({ palette }) {
  // A grid of small "stamp" thumbs around a wordmark.
  const stamps = [
  { id: "hero-stamp-1", label: "Fox" },
  { id: "hero-stamp-2", label: "Moon" },
  { id: "hero-stamp-3", label: "Boat" },
  { id: "hero-stamp-4", label: "Bear" },
  { id: "hero-stamp-5", label: "Garden" },
  { id: "hero-stamp-6", label: "Lighthouse" }];

  return (
    <section data-vg-section="hero-stamp" style={{ background: palette.bg, padding: "80px 80px 100px" }}>
      <div style={{ textAlign: "center", maxWidth: 880, margin: "0 auto 56px" }}>
        <div style={{ fontFamily: "var(--vg-body)", fontSize: 12, letterSpacing: ".24em", textTransform: "uppercase", color: palette.muted, marginBottom: 24 }}>
          Est. 2017 · Illustration Studio
        </div>
        <div style={{ width: 420, maxWidth: "100%", margin: "0 auto" }}>
          <image-slot id="logo" shape="rect" placeholder="Drop your logo"
          style={{ width: "100%", height: 150, display: "block" }}></image-slot>
        </div>
        <p style={{ fontFamily: "var(--vg-body)", fontSize: 18, lineHeight: 1.55, marginTop: 24, color: palette.ink, opacity: .8 }}>
          A small studio drawing warm, painterly pictures for children's books, magazines, and brands.
        </p>
      </div>
      <div data-vg-grid="hero-stamps" style={{
        display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24,
        maxWidth: 1180, margin: "0 auto"
      }}>
        {stamps.map((s, i) =>
        <div key={s.id} style={{
          background: palette.frame, padding: 10, aspectRatio: "1 / 1",
          boxShadow: "0 14px 24px -18px rgba(60,40,20,.5)",
          transform: `rotate(${(i % 2 === 0 ? -1 : 1) * 1.5}deg)`,
          position: "relative"
        }}>
            <image-slot id={s.id} shape="rect" placeholder={s.label}
          style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
            <div style={{
            position: "absolute", bottom: -22, left: 0, right: 0, textAlign: "center",
            fontFamily: "var(--vg-body)", fontSize: 11, letterSpacing: ".18em",
            textTransform: "uppercase", color: palette.muted
          }}>
              {s.label}
            </div>
          </div>
        )}
      </div>
      <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 80 }}>
        <a href="#work" style={btnPrimary(palette)}>See the work</a>
        <a href="#contact" style={btnGhost(palette)}>Say hello</a>
      </div>
    </section>);

}

function btnPrimary(p) {
  return {
    display: "inline-block",
    background: p.primary, color: p.bg,
    padding: "14px 22px", borderRadius: 999,
    fontFamily: "var(--vg-body)", fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase",
    textDecoration: "none"
  };
}
function btnGhost(p) {
  return {
    display: "inline-block",
    background: "transparent", color: p.ink,
    padding: "14px 22px", borderRadius: 999,
    border: `1px solid ${p.line}`,
    fontFamily: "var(--vg-body)", fontSize: 13, letterSpacing: ".14em", textTransform: "uppercase",
    textDecoration: "none"
  };
}

Object.assign(window, { HeroMagazine, HeroScrapbook, HeroSpread, HeroStamp, btnPrimary, btnGhost });