// DIRT FEST V — sections
// All sections registered as window globals so app.jsx can compose them.

const TICKET_URL = "https://events.humanitix.com/dirt-fest-v";
const EVENT_DATE = "SAT 23 MAY 2026";
const VENUE = "Lord Gladstone Hotel · Chippendale";

const LINEUP = [
"TRINITY AND THE SLUTS",
"ARI KIKO",
"DARKSYDE",
"MARTY ROTTEN",
"RETAIL THERAPY",
"DOCTOR ROBOT",
"LITTLE ARCHER",
"GLOBAL SOUNDS",
"DAYSEA",
"MENARKU",
"THREATNIQUE",
"DAMIEN ALOYSIUS",
"SINISTER MINISTER",
"S.MILES",
"LUNA PEREZ",
"MATTY PAXTON",
"DIRTFEST HOUSE BAND",
"LOUIX",
"SASHA SOH",
"LUKE MARTIN",
"ARIG"];

const LINEUP_HIGHLIGHT = new Set(["DOCTOR ROBOT", "ARI KIKO"]);


// Pseudo-random but deterministic rotation for poster items
function tilt(seed, range = 3) {
  const x = Math.sin(seed * 9301 + 49297) * 233280;
  const r = (x - Math.floor(x)) * 2 - 1;
  return (r * range).toFixed(2) + "deg";
}

// ─────────────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────────────
function Nav() {
  const links = [
  ["Lineup", "#lineup"],
  ["Schedule", "#schedule"],
  ["Venue", "#venue"],
  ["About", "#about"],
  ["FAQ", "#faq"]];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <DogMark size={32} />
          DIRT FEST <span className="v">V</span>
        </a>
        <div className="nav-links">
          {links.map(([label, href]) =>
          <a key={href} href={href}>{label}</a>
          )}
        </div>
        <a className="nav-cta" href={TICKET_URL} target="_blank" rel="noreferrer">
          Buy tickets · $35
        </a>
      </div>
    </nav>);

}

// ─────────────────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section id="top" style={{ paddingTop: 72, paddingBottom: 60, position: "relative" }}>
      <div className="wrap" style={{ position: "relative" }}>
        {/* tape strips */}
        <span className="tape" style={{ top: 12, left: "12%", transform: "rotate(-8deg)" }}></span>
        <span className="tape" style={{ top: 30, right: "8%", transform: "rotate(6deg)", width: 110 }}></span>

        {/* mascot mark above the title */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 12 }}>
          <DogMark size={140} />
        </div>

        {/* tiny upper kickers */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 40, flexWrap: "wrap", gap: 12 }}>
          <span className="mono-tag">EST. 2022 · INNER WEST · DIY</span>
          <span className="mono-tag">VOL. 005 / FIVE / V</span>
          <span className="mono-tag">PRINT RUN 0421 / 9999</span>
        </div>

        {/* MASSIVE TITLE */}
        <div style={{ position: "relative" }}>
          <h1 className="h-display" style={{ fontSize: "clamp(80px, 17vw, 280px)", margin: 0 }}>
            DIRT
          </h1>
          <h1 className="h-display" style={{ fontSize: "clamp(80px, 17vw, 280px)", margin: "-0.12em 0 0", letterSpacing: "-0.02em" }}>
            FEST <span style={{ color: "var(--marker-red)", fontStyle: "italic", display: "inline-block", transform: "skewX(-8deg)" }}>V</span>
          </h1>

          {/* floating round stamp */}
          <div className="round-stamp float-stamp" style={{ position: "absolute", top: "10%", right: "2%", fontSize: 13 }}>
            <div>
              <div style={{ fontSize: 11, opacity: 0.7 }}>★ FIFTH ★</div>
              <div style={{ fontSize: 20, lineHeight: 1.1 }}>DIRT</div>
              <div style={{ fontSize: 20, lineHeight: 1.1 }}>FEST</div>
              <div style={{ fontSize: 10, opacity: 0.7 }}>NSW · AU</div>
            </div>
          </div>
        </div>

        {/* under-banner */}
        <div className="tablecloth" style={{
          marginTop: 18,
          padding: "26px 22px",
          display: "flex",
          justifyContent: "center",
          borderTop: "3px solid var(--ink)",
          borderBottom: "3px solid var(--ink)"
        }}>
          <OliveSprig width={300} />
        </div>
        <div className="date-band" style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 22,
          alignItems: "center",
          justifyContent: "space-between",
          transform: "rotate(-0.2deg)"
        }}>
          <span>◆ {EVENT_DATE}</span>
          <span>◆ {VENUE}</span>
          <span>◆ 21 ACTS / 3 STAGES</span>
          <span>◆ $35 GA</span>
        </div>

        {/* Subhead + CTA row */}
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 50, marginTop: 56, alignItems: "start" }}>
          <div>
            <p className="h-serif" style={{ fontSize: "clamp(22px, 2.6vw, 36px)", margin: 0, maxWidth: 720 }}>
              A one-day festival for <em>unsigned</em> music & art, run out of the back room
              of a pub in the inner west. <span className="highlight">No labels, no algorithms</span> —
              just the people making the work, and the people who turn up for it.
            </p>
            <div style={{ marginTop: 38, display: "flex", gap: 18, flexWrap: "wrap", alignItems: "center" }}>
              <a className="btn btn-yellow" href={TICKET_URL} target="_blank" rel="noreferrer">
                Grab a ticket
              </a>
              <span className="h-hand" style={{ fontSize: 22, transform: "rotate(-4deg)", display: "inline-block" }}>
                ← do it before they sell out (they will)
              </span>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div style={{
              background: "var(--paper-deep)",
              border: "2px solid var(--ink)",
              padding: "20px 22px",
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              lineHeight: 1.65,
              transform: "rotate(1.5deg)",
              boxShadow: "6px 6px 0 var(--ink)"
            }}>
              <div className="mono-tag" style={{ marginBottom: 10 }}>★ THE BASICS ★</div>
              <div><strong>WHO</strong> &nbsp; 21 unsigned acts</div>
              <div><strong>WHAT</strong> &nbsp; live music + art</div>
              <div><strong>WHEN</strong> &nbsp; Sat 23 May 2026, 2pm–late</div>
              <div><strong>WHERE</strong> &nbsp; Lord Gladstone, Chippendale</div>
              <div><strong>HOW</strong> &nbsp; $35, link below</div>
              <div><strong>WHY</strong> &nbsp; <span className="highlight">because it matters</span></div>
              <hr style={{ border: 0, borderTop: "1px dashed var(--ink)", margin: "12px 0" }} />
              <div style={{ fontSize: 11, opacity: 0.75 }}>
                18+ &nbsp;·&nbsp; Door sales if not sold out &nbsp;·&nbsp; Earplugs at the merch desk, free
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// LINEUP
// ─────────────────────────────────────────────────────────────────────────────
function Lineup() {
  // Layered sizes for poster feel
  const sizes = [110, 70, 80, 102, 95, 72, 64, 80, 56, 90, 68, 96, 60, 84, 70, 64, 60, 70, 70, 60, 56];
  const colors = ["red", "ink", "ink", "green", "ink", "red", "ink", "ink", "ink", "ink", "ink", "blue", "ink", "ink", "red", "ink", "blue", "ink", "ink", "red", "ink"];
  return (
    <section id="lineup" style={{ background: "var(--paper-deep)", borderTop: "2px solid var(--ink)", borderBottom: "2px solid var(--ink)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 40 }}>
          <div>
            <span className="kicker"><span className="dot"></span>SECTION 01 — LINEUP</span>
            <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 120px)", margin: "16px 0 0" }}>
              TWENTY-ONE <span className="highlight-red">ACTS</span>
            </h2>
            <p className="h-serif" style={{ fontSize: 22, maxWidth: 560, marginTop: 12 }}>
              Three stages, twenty-one acts, doors at 2pm. Every act unsigned at the time of booking.
            </p>
          </div>
          <span className="stamp shake" style={{ transform: "rotate(6deg)" }}>FULL BILL</span>
        </div>

        {/* poster name list */}
        <div style={{ textAlign: "center", padding: "20px 0 40px" }}>
          {LINEUP.map((name, i) => {
            const c = colors[i] === "red" ? "var(--marker-red)" : colors[i] === "blue" ? "var(--marker-blue)" : colors[i] === "green" ? "#1f4d29" : "var(--ink)";
            const isHi = LINEUP_HIGHLIGHT.has(name);
            const isMarty = name === "MARTY ROTTEN";
            return (
              <span key={name} style={{
                display: "inline-block",
                fontFamily: "var(--font-display)",
                fontSize: sizes[i],
                lineHeight: 0.95,
                color: c,
                margin: "0 14px 6px",
                transform: `rotate(${tilt(i + 1, isMarty ? 4 : 2)})`,
                textTransform: "uppercase",
                fontStyle: isMarty ? "italic" : "normal",
                textShadow: isMarty ? "4px 4px 0 #9eb53a" : "none",
                letterSpacing: isMarty ? "-0.02em" : "normal"
              }}>
                {isHi ? <span className="highlight">{name}</span> : name}
              </span>);

          })}
        </div>

        <div className="perf-line" style={{ margin: "40px 0" }}></div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
          <div>
            <div className="mono-tag" style={{ marginBottom: 8 }}>★ FEATURED ★</div>
            <h3 className="h-serif" style={{ fontSize: 36, fontStyle: "italic", margin: "0 0 8px" }}>Trinity and the Sluts</h3>
            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.6 }}>
              Glasgow-via-Marrickville punk five-piece. Two guitars, no apologies.               Closing the Dirt Stage at 9:30pm.
            </p>
          </div>
          <div>
            <div className="mono-tag" style={{ marginBottom: 8 }}>★ DEBUT ★</div>
            <h3 className="h-serif" style={{ fontSize: 36, fontStyle: "italic", margin: "0 0 8px" }}>Marty Rotten</h3>
            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.6 }}>First-ever live set. Room Upstairs, 8:00pm — be there.

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

}

// ─────────────────────────────────────────────────────────────────────────────
// SCHEDULE
// ─────────────────────────────────────────────────────────────────────────────
function Schedule() {
  const dirtStage = [
  { t: "4:00–4:30", n: "Luke Martin" },
  { t: "4:50–5:20", n: "Sinister Minister" },
  { t: "5:40–6:10", n: "Daysea" },
  { t: "6:30–7:00", n: "S.Miles" },
  { t: "7:20–7:50", n: "Trinity and the Sluts" },
  { t: "8:10–8:40", n: "Retail Therapy" },
  { t: "9:00–9:40", n: "Doctor Robot" },
  { t: "10:00–10:45", n: "Dirtfest House Band" }];

  const roomUpstairs = [
  { t: "2:00–2:30", n: "Little Archer" },
  { t: "2:45–3:15", n: "Luna Perez" },
  { t: "3:30–4:00", n: "Arig" },
  { t: "4:15–4:45", n: "Menarku" },
  { t: "5:00–5:45", n: "Darksyde" },
  { t: "6:00–6:45", n: "Louix" },
  { t: "7:00–7:45", n: "Threatnique" },
  { t: "8:00–9:00", n: "Marty Rotten" },
  { t: "9:15–10:15", n: "Matty Paxton" }];

  const courtyard = [
  { t: "4:00–6:00", n: "Global Sounds" },
  { t: "6:00–8:00", n: "Damien Aloysius" },
  { t: "8:00–10:00", n: "Sasha Soh" },
  { t: "10:00–12:00", n: "Ari Kiko" }];


  const Row = ({ t, n, accent }) =>
  <div style={{
    display: "grid",
    gridTemplateColumns: "108px 1fr",
    gap: 10,
    padding: "8px 0",
    borderBottom: "1px dashed var(--ink)",
    alignItems: "baseline"
  }}>
      <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: 12, letterSpacing: "0.02em" }}>{t}</span>
      <span className="h-display" style={{ fontSize: 22, color: "var(--ink)" }}>
        {accent ? <span className="highlight">{n}</span> : n}
      </span>
    </div>;


  const Stage = ({ title, sub, rows, tilt: tiltDeg, tapeRight }) =>
  <div style={{
    border: "3px solid var(--ink)",
    padding: "24px 22px",
    background: "var(--paper)",
    position: "relative",
    transform: `rotate(${tiltDeg}deg)`
  }}>
      <span className="tape" style={{ top: -14, [tapeRight ? "right" : "left"]: 30, transform: tapeRight ? "rotate(8deg)" : "rotate(-6deg)" }}></span>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8, flexWrap: "wrap", gap: 6 }}>
        <h3 className="h-display" style={{ fontSize: 30, margin: 0, lineHeight: 1 }}>{title}</h3>
        <span className="mono-tag">{sub}</span>
      </div>
      <p style={{ margin: "0 0 12px", fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.7 }}>
        {rows.length} acts · doors 2pm
      </p>
      {rows.map((s, i) => <Row key={i} {...s} accent={i === rows.length - 1} />)}
    </div>;


  return (
    <section id="schedule">
      <div className="wrap">
        <span className="kicker"><span className="dot"></span>SECTION 02 — SET TIMES</span>
        <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 120px)", margin: "16px 0 8px" }}>
          WHO PLAYS <em style={{ fontStyle: "italic", color: "var(--marker-red)" }}>WHEN</em>
        </h2>
        <p className="h-serif" style={{ fontSize: 22, maxWidth: 720 }}>
          Three stages, running 2pm to midnight. Bring a watch, an open mind, comfortable shoes.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28, marginTop: 50 }}>
          <Stage title="DIRT STAGE" sub="MAIN ROOM" rows={dirtStage} tilt={-0.4} tapeRight={false} />
          <Stage title="ROOM UPSTAIRS" sub="LOFT" rows={roomUpstairs} tilt={0.5} tapeRight={true} />
          <Stage title="COURTYARD" sub="OUTSIDE" rows={courtyard} tilt={-0.3} tapeRight={false} />
        </div>

        <p className="h-hand" style={{ fontSize: 26, transform: "rotate(-2deg)", display: "inline-block", marginTop: 28 }}>full set times may change, we run this shit ourselves ✌

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

}

// ─────────────────────────────────────────────────────────────────────────────
// VENUE
// ─────────────────────────────────────────────────────────────────────────────
function Venue() {
  return (
    <section id="venue" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap">
        <span className="kicker" style={{ background: "var(--paper)", color: "var(--ink)" }}>
          <span className="dot"></span>SECTION 03 — THE PUB
        </span>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginTop: 20, alignItems: "start" }}>
          <div>
            <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 120px)", margin: "16px 0 24px", color: "var(--paper)" }}>
              LORD <br /><span style={{ color: "var(--marker-yellow)" }}>GLADSTONE</span>
            </h2>
            <p className="h-serif" style={{ fontSize: 24, maxWidth: 540, color: "var(--paper)" }}>
              115 Regent St, Chippendale. The corner pub that's hosted every Dirt Fest since the first one.
              Two rooms, a courtyard, a kitchen that does not stop until close.
            </p>
            <div style={{ marginTop: 30, fontFamily: "var(--font-mono)", fontSize: 14, lineHeight: 1.9, opacity: 0.9 }}>
              <div>◇ &nbsp;Train: 6 min walk from Central, 5 from Redfern</div>
              <div>◇ &nbsp;Light rail: Chinatown / Central Chalmers stop</div>
              <div>◇ &nbsp;Bike racks out front, lock 'em up</div>
              <div>◇ &nbsp;Step-free entry, accessible toilet on ground floor</div>
            </div>
            <a className="btn btn-yellow" style={{ marginTop: 30 }} href="https://maps.google.com/?q=Lord+Gladstone+Hotel+Chippendale" target="_blank" rel="noreferrer">
              Open in Maps
            </a>
          </div>

          <div style={{ position: "relative" }}>
            {/* Hand-drawn map */}
            <div style={{
              background: "var(--paper)",
              color: "var(--ink)",
              padding: "26px 24px",
              border: "3px solid var(--paper)",
              transform: "rotate(1.5deg)",
              boxShadow: "10px 10px 0 var(--marker-red)",
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              minHeight: 360,
              position: "relative"
            }}>
              <div className="mono-tag" style={{ marginBottom: 10 }}>★ FOUND-IT MAP ★</div>
              <svg viewBox="0 0 400 320" style={{ width: "100%", height: 260 }}>
                {/* roads */}
                <line x1="0" y1="160" x2="400" y2="160" stroke="var(--ink)" strokeWidth="3" strokeLinecap="round" />
                <line x1="200" y1="0" x2="200" y2="320" stroke="var(--ink)" strokeWidth="3" strokeLinecap="round" />
                <line x1="0" y1="240" x2="400" y2="240" stroke="var(--ink)" strokeWidth="2" strokeDasharray="4 5" />
                <line x1="80" y1="0" x2="80" y2="320" stroke="var(--ink)" strokeWidth="2" strokeDasharray="4 5" />
                {/* venue X */}
                <g transform="translate(220 140) rotate(-12)">
                  <rect x="-22" y="-22" width="44" height="44" fill="var(--marker-yellow)" stroke="var(--ink)" strokeWidth="3" />
                  <text x="0" y="6" textAnchor="middle" fontFamily="Anton" fontSize="22" fill="var(--ink)">★</text>
                </g>
                <text x="270" y="135" fontFamily="Permanent Marker" fontSize="14" fill="var(--marker-red)">YOU ARE HERE</text>
                {/* labels */}
                <text x="10" y="155" fontFamily="DM Mono" fontSize="11" fill="var(--ink)">REGENT ST →</text>
                <text x="210" y="20" fontFamily="DM Mono" fontSize="11" fill="var(--ink)">DENISON RD ↑</text>
                <text x="10" y="235" fontFamily="DM Mono" fontSize="11" fill="var(--ink)">light rail ~~</text>
                {/* arrow */}
                <path d="M 60 60 Q 140 80 200 130" fill="none" stroke="var(--marker-red)" strokeWidth="3" strokeLinecap="round" />
                <polygon points="200,130 188,124 192,138" fill="var(--marker-red)" />
                <text x="40" y="50" fontFamily="Permanent Marker" fontSize="14" fill="var(--marker-red)">walk from stn.</text>
              </svg>
              <p style={{ margin: "10px 0 0", fontSize: 11, opacity: 0.7 }}>
                Approx. Not to scale. Phone reception inside is bad — meet outside.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// GALLERY
// ─────────────────────────────────────────────────────────────────────────────
function Gallery() {
  const editions = [
  { id: "i", roman: "I", year: "2022", note: "the basement gig that started it" },
  { id: "ii", roman: "II", year: "2023", note: "first time we sold out" },
  { id: "iii", roman: "III", year: "2024", note: "added the back bar / second stage" },
  { id: "iv", roman: "IV", year: "2025", note: "art wall + 18 acts" }];

  // 4 slots per edition
  return (
    <section id="gallery">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 30 }}>
          <div>
            <span className="kicker"><span className="dot"></span>SECTION 04 — GALLERY</span>
            <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 120px)", margin: "16px 0 0" }}>
              FOUR YEARS <span className="strike-red">DEEP</span> IN
            </h2>
          </div>
          <span className="h-hand" style={{ fontSize: 22, transform: "rotate(-3deg)", display: "inline-block", maxWidth: 280 }}>
            ↓ drop yr photos here — we'll print the best ones on next year's flyer
          </span>
        </div>

        {editions.map((ed, idx) =>
        <div key={ed.id} style={{ marginBottom: 60 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 18, flexWrap: "wrap" }}>
              <span className="h-display" style={{ fontSize: 64, lineHeight: 1, color: "var(--marker-red)", flexShrink: 0 }}>{ed.roman}</span>
              <span className="h-display" style={{ fontSize: 30, lineHeight: 1 }}>DIRT FEST · {ed.year}</span>
              <span className="h-hand" style={{ fontSize: 22, transform: "rotate(-2deg)", display: "inline-block", color: "var(--ink-soft)", lineHeight: 1 }}>
                — {ed.note}
              </span>
            </div>
            <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 18
          }}>
              {[0, 1, 2, 3].map((s) =>
            <div key={s} style={{ position: "relative", transform: `rotate(${tilt(idx * 4 + s + 9, 1.5)})` }}>
                  <span className="tape" style={{
                top: -12,
                left: s % 2 === 0 ? 20 : "auto",
                right: s % 2 === 0 ? "auto" : 20,
                width: 70,
                transform: s % 2 === 0 ? "rotate(-7deg)" : "rotate(8deg)"
              }}></span>
                  <image-slot
                id={`gal-${ed.id}-${s}`}
                shape="rect"
                placeholder={`${ed.year} · drop photo`}
                style={{ width: "100%", aspectRatio: "4 / 5" }}>
              </image-slot>
                  <div style={{
                marginTop: 8,
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: "var(--ink-soft)"
              }}>
                    DF{ed.roman}_{String(s + 1).padStart(3, "0")}.JPG
                  </div>
                </div>
            )}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" style={{ background: "var(--paper-deep)", borderTop: "2px solid var(--ink)", borderBottom: "2px solid var(--ink)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "start" }}>
          <div>
            <span className="kicker"><span className="dot"></span>SECTION 05 — ABOUT</span>
            <h2 className="h-display" style={{ fontSize: "clamp(54px, 7vw, 100px)", margin: "16px 0 0" }}>
              WHY <br /><span className="highlight-red">BOTHER?</span>
            </h2>
            <p className="h-hand" style={{ fontSize: 26, transform: "rotate(-2deg)", display: "inline-block", marginTop: 30 }}>
              for the love of it ♡
            </p>
          </div>
          <div>
            <p className="h-serif" style={{ fontSize: 28, lineHeight: 1.3, margin: "0 0 24px" }}>
              Dirt Fest started in 2022 because three friends wanted to put on a gig for the
              bands they loved who couldn't get a booking. <em>It hasn't really changed since.</em>
            </p>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, lineHeight: 1.75, columnCount: 2, columnGap: 30 }}>
              <p style={{ marginTop: 0 }}>
                We don't take a cut. Door money, after costs, splits across the bill. The art
                on the walls comes from local makers, who keep 100% of what sells.
              </p>
              <p>
                There's no curator, no taste-maker. Lineups come from open submissions and the
                tip-offs of friends. If we book a band you've never heard of, that's the point.
              </p>
              <p>
                It's small on purpose. 400 people in a pub, one Saturday a year. Every dollar
                in the door goes back into making the next one happen, or into the hands of the
                people who turned up to play.
              </p>
              <p style={{ marginBottom: 0 }}>
                If you've got a band, a sculpture, a zine, a film, a busted theremin — submit it.
                We read every one. The hard part isn't getting on; the hard part is being honest.
              </p>
            </div>
            <div style={{ marginTop: 30, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <span className="stamp">RUN BY VOLUNTEERS</span>
              <span className="stamp stamp-ink" style={{ transform: "rotate(3deg)" }}>NOT FOR PROFIT</span>
              <span className="stamp stamp-blue" style={{ transform: "rotate(-2deg)" }}>EST. 2022</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
  ["Is there a door sale or is it tickets only?", "Tickets first — door sale only if we haven't sold out. We have for the last three years, so don't bet on it."],
  ["Is it all-ages?", "18+. Sorry kids. The pub's licence is what it is."],
  ["Can I bring my own art / zine / tape to sell?", "Yes. Email submissions@dirt-fest.com by 1 May. The market wall is free for anyone on the bill, $10/spot otherwise."],
  ["Refunds?", "Up to 14 days before the fest. After that, on-sell it to a friend — Humanitix lets you transfer."],
  ["Lineup clashes?", "Yep — three stages, twenty-one acts, you can't see them all. Plan your night, then throw the plan out."],
  ["What about food / dietary stuff?", "The Lord Gladstone kitchen runs vegan/veggie/GF options all night. Cash and card both work."],
  ["I'm in a band — can I play next year?", "Yes — submissions open the Monday after this year's fest. See below."]];

  return (
    <section id="faq">
      <div className="wrap">
        <span className="kicker"><span className="dot"></span>SECTION 06 — FAQ</span>
        <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 120px)", margin: "16px 0 40px" }}>
          QUESTIONS, <em style={{ fontStyle: "italic" }}>&amp;c.</em>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "40px 60px" }}>
          {qs.map(([q, a], i) =>
          <div key={i}>
              <h3 className="h-display" style={{ fontSize: 22, margin: "0 0 8px", display: "flex", alignItems: "baseline", gap: 12 }}>
                <span style={{ color: "var(--marker-red)" }}>{String(i + 1).padStart(2, "0")}</span>
                {q}
              </h3>
              <p style={{ fontFamily: "var(--font-mono)", fontSize: 14, lineHeight: 1.65, margin: 0 }}>{a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// NEWSLETTER + SUBMIT
// ─────────────────────────────────────────────────────────────────────────────
function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section id="newsletter" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
        <div>
          <span className="kicker" style={{ background: "var(--marker-yellow)", color: "var(--ink)" }}>
            <span className="dot" style={{ background: "var(--ink)" }}></span>SECTION 07 — MAILING LIST
          </span>
          <h2 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 96px)", margin: "16px 0 14px", color: "var(--paper)" }}>
            THE <span style={{ color: "var(--marker-yellow)" }}>SLOW</span><br />NEWSLETTER
          </h2>
          <p className="h-serif" style={{ fontSize: 22, maxWidth: 480, color: "var(--paper)", opacity: 0.9 }}>
            One email a month, max. Lineup drops, gig recs from the locals, and a heads-up
            when next year's tickets go on sale.
          </p>
        </div>
        <div style={{ position: "relative" }}>
          {sent ?
          <div style={{ background: "var(--marker-yellow)", color: "var(--ink)", padding: "30px 30px", transform: "rotate(-1deg)", boxShadow: "8px 8px 0 var(--marker-red)" }}>
              <h3 className="h-display" style={{ fontSize: 30, margin: 0 }}>★ YOU'RE ON IT ★</h3>
              <p style={{ fontFamily: "var(--font-mono)", fontSize: 13, margin: "10px 0 0" }}>
                Check yr inbox for the welcome blast. If it's not there, it's in spam (sorry).
              </p>
            </div> :

          <form
            onSubmit={(e) => {e.preventDefault();if (email.includes("@")) setSent(true);}}
            style={{ background: "var(--paper)", color: "var(--ink)", padding: "30px 28px", transform: "rotate(0.8deg)", boxShadow: "8px 8px 0 var(--marker-red)" }}>
            
              <label className="mono-tag" style={{ display: "block", marginBottom: 8 }}>★ YR EMAIL ★</label>
              <input
              type="email"
              className="zine-input"
              placeholder="you@somewhere.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required />
            
              <button type="submit" className="btn" style={{ marginTop: 20, fontSize: 22 }}>Sign me up</button>
              <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.65, marginTop: 14 }}>
                We don't sell yr details. We barely use them.
              </p>
            </form>
          }
        </div>
      </div>
    </section>);

}

function SubmitBand() {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ name: "", links: "", city: "Sydney", note: "" });
  if (step === 1) {
    return (
      <section id="submit" style={{ background: "var(--marker-yellow)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <span className="stamp" style={{ fontSize: 22, marginBottom: 30 }}>RECEIVED</span>
          <h2 className="h-display" style={{ fontSize: "clamp(54px, 8vw, 110px)", margin: "20px 0", color: "var(--ink)" }}>
            CHEERS, <em style={{ fontStyle: "italic", color: "var(--marker-red)" }}>{form.name || "FRIEND"}</em>
          </h2>
          <p className="h-serif" style={{ fontSize: 24, maxWidth: 620, margin: "0 auto" }}>
            We read every submission by hand. You'll hear back within a fortnight either way —
            and if we're a fit, you'll be on the Dirt Fest VI longlist.
          </p>
          <button onClick={() => {setStep(0);setForm({ name: "", links: "", city: "Sydney", note: "" });}}
          style={{ marginTop: 30, background: "transparent", border: 0, fontFamily: "var(--font-mono)", textDecoration: "underline", cursor: "pointer", fontSize: 13 }}>
            Submit another →
          </button>
        </div>
      </section>);

  }
  return (
    <section id="submit" style={{ background: "var(--marker-yellow)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 60, alignItems: "start" }}>
        <div>
          <span className="kicker"><span className="dot"></span>SECTION 08 — SUBMIT</span>
          <h2 className="h-display" style={{ fontSize: "clamp(50px, 7vw, 100px)", margin: "16px 0 0" }}>
            PLAY <br />DIRT <span style={{ color: "var(--marker-red)" }}>VI</span>
          </h2>
          <p className="h-serif" style={{ fontSize: 22, marginTop: 20, maxWidth: 460 }}>
            Submissions for Dirt Fest VI open the Monday after this year's. Drop your details
            now and we'll be in touch.
          </p>
          <div className="h-hand" style={{ fontSize: 22, transform: "rotate(-3deg)", marginTop: 20, display: "inline-block" }}>
            unsigned acts only ✌
          </div>
        </div>
        <form
          onSubmit={(e) => {e.preventDefault();if (form.name) setStep(1);}}
          style={{ background: "var(--paper)", padding: "32px 30px", border: "3px solid var(--ink)", boxShadow: "10px 10px 0 var(--ink)", transform: "rotate(-0.6deg)" }}>
          
          <label className="mono-tag" style={{ display: "block", marginTop: 0 }}>BAND / ARTIST NAME</label>
          <input className="zine-input" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Trinity and the Sluts" />

          <label className="mono-tag" style={{ display: "block", marginTop: 22 }}>LINK TO MUSIC / WORK</label>
          <input className="zine-input" required value={form.links} onChange={(e) => setForm({ ...form, links: e.target.value })} placeholder="soundcloud / yr website" />

          <label className="mono-tag" style={{ display: "block", marginTop: 22 }}>BASED IN</label>
          <input className="zine-input" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} />

          <label className="mono-tag" style={{ display: "block", marginTop: 22 }}>ANYTHING ELSE</label>
          <textarea
            className="zine-input"
            style={{ minHeight: 80, resize: "vertical", paddingTop: 8 }}
            value={form.note}
            onChange={(e) => setForm({ ...form, note: e.target.value })}
            placeholder="how'd you hear about us, what you'd play, vibes…" />
          

          <button type="submit" className="btn" style={{ marginTop: 26 }}>Submit</button>
        </form>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", padding: "60px 0 30px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 30, alignItems: "start" }}>
          <div>
            <div className="h-display" style={{ fontSize: 56, lineHeight: 0.9 }}>
              DIRT <span style={{ color: "var(--marker-yellow)" }}>FEST V</span>
            </div>
            <p className="h-hand" style={{ fontSize: 22, marginTop: 12, color: "var(--paper)" }}>
              made on stolen land — always was, always will be.
            </p>
          </div>
          <div>
            <div className="mono-tag" style={{ color: "var(--marker-yellow)", marginBottom: 10 }}>FIND US</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 2 }}>
              <div>@dirtfest.aus</div>
              <div>hello@dirt-fest.com</div>
              <div>dirt-fest.com</div>
            </div>
          </div>
          <div>
            <div className="mono-tag" style={{ color: "var(--marker-yellow)", marginBottom: 10 }}>VENUE</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 2 }}>
              <div>Lord Gladstone Hotel</div>
              <div>115 Regent St</div>
              <div>Chippendale 2008</div>
            </div>
          </div>
          <div>
            <div className="mono-tag" style={{ color: "var(--marker-yellow)", marginBottom: 10 }}>MORE</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 2 }}>
              <div><a href="#submit" style={{ color: "var(--paper)" }}>Submit your band</a></div>
              <div><a href="#newsletter" style={{ color: "var(--paper)" }}>Mailing list</a></div>
              <div><a href={TICKET_URL} target="_blank" rel="noreferrer" style={{ color: "var(--paper)" }}>Tickets ↗</a></div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 50, paddingTop: 20, borderTop: "1px dashed var(--paper)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 14, fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.65 }}>
          <span>© DIRT FEST 2022–2026</span>
          <span>Designed in a back room. Printed on a copier.</span>
          <span>Not affiliated with anybody.</span>
        </div>
      </div>
    </footer>);

}

// Dog mascot — the actual poster mark
function DogMark({ size = 44 }) {
  return (
    <span className="dog-mark" style={{ width: size, height: size, display: "inline-block", lineHeight: 0 }}>
      <img src="assets/mascot.png" width={size} height={size} alt="Dirt Fest mascot" style={{ width: size, height: size, display: "block", objectFit: "contain" }} />
    </span>);

}

// Olive sprig — poster motif
function OliveSprig({ width = 220, style }) {
  return (
    <svg viewBox="0 0 240 140" width={width} style={style} aria-hidden="true">
      <g stroke="#1f4d29" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        {/* branch */}
        <path d="M10 70 Q80 60 230 70" fill="none" />
        {/* leaves */}
        <path d="M40 70 Q60 40 90 50 Q80 70 50 75 Z" fill="#1f4d29" />
        <path d="M80 70 Q100 95 130 90 Q120 70 90 65 Z" fill="#2a5f33" />
        <path d="M130 70 Q150 35 185 50 Q175 75 145 78 Z" fill="#1f4d29" />
        <path d="M170 70 Q190 100 220 95 Q210 75 180 70 Z" fill="#2a5f33" />
        {/* olives */}
        <circle cx="105" cy="78" r="13" fill="#9eb53a" />
        <circle cx="135" cy="92" r="11" fill="#9eb53a" />
        <circle cx="160" cy="76" r="12" fill="#9eb53a" />
      </g>
    </svg>);

}

// ─────────────────────────────────────────────────────────────────────────────
// SPONSORS — poster-inspired bottom band
// ─────────────────────────────────────────────────────────────────────────────
function Sponsors() {
  return (
    <section id="sponsors" style={{ paddingTop: 70, paddingBottom: 60, background: "var(--paper-deep)", borderTop: "2px solid var(--ink)", borderBottom: "2px solid var(--ink)" }}>
      <div className="wrap" style={{ textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center", gap: 30, alignItems: "center", flexWrap: "wrap", marginBottom: 26 }}>
          <OliveSprig width={140} style={{ transform: "scaleX(-1) rotate(-8deg)" }} />
          <div className="h-display" style={{ fontSize: "clamp(28px, 3.6vw, 46px)", lineHeight: 1.1, maxWidth: 720 }}>
            MADE FROM A PROPRIETARY BLEND OF <span className="highlight">LOCALLY SOURCED ORGANIC ARTISTS</span>
          </div>
          <OliveSprig width={140} style={{ transform: "rotate(8deg)" }} />
        </div>
        <p className="h-hand" style={{ fontSize: 26, transform: "rotate(-2deg)", display: "inline-block", marginBottom: 36, color: "var(--marker-red)" }}>
          now with added <strong style={{ background: "#ff3aaa", color: "#fff", padding: "2px 10px", transform: "rotate(3deg)", display: "inline-block" }}>HUSH CLUB</strong>!
        </p>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          alignItems: "center",
          maxWidth: 920,
          margin: "0 auto"
        }}>
          {[
          { name: "Lord Gladstone Hotel", sub: "venue" },
          { name: "Coelho", sub: "pasta + wine" },
          { name: "Side Quest Season", sub: "merch + zines" },
          { name: "Humanitix", sub: "ticketing" }].
          map((s, i) =>
          <div key={s.name} style={{
            border: "2px solid var(--ink)",
            padding: "22px 14px",
            background: "var(--paper)",
            transform: `rotate(${["-1.2deg", "0.8deg", "-0.6deg", "1.1deg"][i]})`,
            boxShadow: "4px 4px 0 var(--ink)"
          }}>
              <div className="h-display" style={{ fontSize: 20, lineHeight: 1.05 }}>{s.name}</div>
              <div className="mono-tag" style={{ marginTop: 6, fontSize: 10 }}>{s.sub}</div>
            </div>
          )}
        </div>

        <p style={{ marginTop: 40, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
          ★ Proudly brought to you by WISDWM, Mr. Roarke &amp; Mitch Dirt ★
        </p>
      </div>
    </section>);

}

Object.assign(window, { Sponsors });