// promo.jsx — Marketing landing for new visitors.
// Two-mode behavior: empty hash routes new visitors here, registered families
// to /home. Hits the same hastings.bike form worker through RegisterView; no
// local form state is forked off.

const { useState: useSt, useEffect: useEf } = React;

// ─── PromoView ──────────────────────────────────────────────────────────────
function PromoView({ setRoute, registered }) {
  return (
    <div style={{ paddingBottom: 80 }}>
      <PromoHero setRoute={setRoute} registered={registered} />

      {registered && <RegisteredBanner setRoute={setRoute} />}

      <PromoSection eyebrow="What is a Bike Rodeo?" title="A structured skills morning." accent="var(--accent)">
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 }}>
          Volunteers run your kid through six drills — bike check, helmet & fit,
          starts and stops, scanning, the rock dodge, and the demon driveway.
          It's how a lot of kids first learn to ride confidently and safely. No
          competition, no winners, no pressure — every kid leaves with a certificate.
        </p>
        <PromoStationStrip setRoute={setRoute} />
      </PromoSection>

      <LevelsSection />

      <PromoSection eyebrow="Come as you are" title="No fancy gear required." accent="var(--tertiary)">
        <div style={{ display: "grid", gap: 12,
                      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
          {comeAsYouAre.map((it) => (
            <div key={it.title} className="paper" style={{ padding: "16px 18px" }}>
              <div style={{ fontSize: 26, lineHeight: 1 }} aria-hidden="true">{it.icon}</div>
              <div className="h-display" style={{ fontSize: 19, marginTop: 6 }}>{it.title}</div>
              <p style={{ margin: "6px 0 0", fontSize: 14, lineHeight: 1.5, color: "var(--ink-soft)" }}>
                {it.body}
              </p>
            </div>
          ))}
        </div>
      </PromoSection>

      <TimelineSection setRoute={setRoute} />

      <PromoSection eyebrow="What you'll work on" title="Open the parents guide." accent="var(--secondary)">
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 16px" }}>
          We made a guide for parents — six stations, what to say to your kid,
          the questions to ask in line, the grown-up notes when you want them.
          Free, no login, works on your phone. Skim it before you come and the
          morning goes a lot smoother.
        </p>
        <button className="btn btn-ghost" onClick={() => setRoute("home")}>
          Open the parents guide →
        </button>
      </PromoSection>

      {!registered && <PrimaryCTA setRoute={setRoute} />}

      <SoftCaptureSection />

      <PromoFooter setRoute={setRoute} />
    </div>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────────
function PromoHero({ setRoute, registered }) {
  return (
    <div style={{ padding: "20px 20px 0", maxWidth: 980, margin: "0 auto" }}>
      <div className="paper" style={{
        position: "relative", padding: "32px 28px 36px",
        background: "linear-gradient(180deg, #fcf4dc 0%, #f0e2bd 100%)",
      }}>
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0, opacity: 0.45, pointerEvents: "none",
          overflow: "hidden", borderRadius: "inherit",
        }}>
          <div style={dot(8, 16, "var(--accent)", 0.2)} />
          <div style={dot(92, 8, "var(--secondary)", 0.16)} />
          <div style={dot(4, 86, "var(--tertiary)", 0.14)} />
          <div style={dot(95, 88, "var(--accent)", 0.16)} />
        </div>

        <div style={{
          display: "grid", gap: 28, alignItems: "center",
          gridTemplateColumns: "minmax(280px, 1fr) minmax(220px, 380px)",
        }}>
          {/* LEFT */}
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <img src="brand/tyendinaga-township.svg" alt="Tyendinaga Township"
                   style={{ height: 32, width: "auto", display: "block", color: "var(--ink)" }} />
              <span className="h-eyebrow" style={{ color: "var(--accent-deep)" }}>
                Sunday · May 24 · 10:30AM – 1PM
              </span>
            </div>
            <h1 className="h-display" style={{
              margin: "12px 0 0", fontSize: "clamp(46px, 9vw, 88px)",
              color: "var(--ink)", lineHeight: 1,
            }}>
              Bike Rodeo
            </h1>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
              <span className="h-hand" style={{ fontSize: 40, color: "var(--accent)", lineHeight: 1 }}>
                Tyendinaga
              </span>
              <HandUnderline color="var(--accent)" width={120} height={10} />
            </div>

            <p style={{
              marginTop: 22, fontSize: 17, lineHeight: 1.55, color: "var(--ink-soft)",
              maxWidth: 560,
            }}>
              A free skills morning for kids 5+ at the Tyendinaga Recreation Complex.
              Six stations, friendly volunteers, an 8.7 km family ride, lunch on us,
              and a certificate at the end. Come as you are — hand-me-down bikes welcome.
            </p>

            <div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
              {registered ? (
                <button className="btn btn-primary"
                  onClick={() => setRoute("home")}
                  style={{ background: "var(--accent)" }}>
                  Open the parents guide →
                </button>
              ) : (
                <button className="btn btn-primary"
                  onClick={() => setRoute("register")}
                  style={{ background: "var(--accent)" }}>
                  Register your family — lunch's on us →
                </button>
              )}
              <a href="#what" onClick={(e) => {
                e.preventDefault();
                document.querySelector("#what")?.scrollIntoView({ behavior: "smooth", block: "start" });
              }} className="btn btn-ghost" style={{ textDecoration: "none" }}>
                What's a bike rodeo?
              </a>
            </div>

            {/* Stats */}
            <div style={{
              marginTop: 26, display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
              gap: 14, paddingTop: 22, borderTop: "1.5px dashed var(--rule)",
            }}>
              <PromoStat label="When"  big="May 24"      small="10:30AM – 1PM" />
              <PromoStat label="Where" big="Shannonville" small="363 McFarlane Rd" />
              <PromoStat label="Ages"  big="5 +"         small="three skill levels" />
              <PromoStat label="Cost"  big="Free"        small="lunch included" />
            </div>
          </div>

          {/* RIGHT — Polaroid-style photo placeholder */}
          <div style={{ position: "relative", justifySelf: "center", width: "100%", maxWidth: 360 }}>
            <PhotoSlot label="hero photo · kids on bikes" tape rotate={-2.4} />
          </div>
        </div>
      </div>

      <div id="what" style={{ height: 1 }} />
    </div>
  );
}

function PhotoSlot({ label, tape, rotate = 0, w, h, aspect = "5/4" }) {
  return (
    <div style={{
      transform: `rotate(${rotate}deg)`,
      transition: "transform 220ms ease",
      width: w || "100%",
      height: h || "auto",
      position: "relative",
    }}>
      <div style={{
        background: "#fff",
        padding: "10px 10px 38px",
        boxShadow: "0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px rgba(29,26,20,0.18), 0 20px 60px -20px rgba(29,26,20,0.35)",
        border: "1px solid rgba(29,26,20,0.12)",
        borderRadius: 4,
      }}>
        <div style={{
          aspectRatio: aspect,
          width: "100%",
          background:
            "repeating-linear-gradient(45deg, #e6d7a8 0 14px, #ddc995 14px 28px)",
          display: "grid", placeItems: "center",
          borderRadius: 2,
        }}>
          <div style={{
            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
            fontSize: 11, color: "rgba(29,26,20,0.5)", letterSpacing: "0.06em",
            textAlign: "center", padding: 8,
          }}>
            {label}
          </div>
        </div>
        <div className="h-hand" style={{
          position: "absolute", bottom: 6, left: 0, right: 0,
          textAlign: "center", color: "var(--ink-soft)", fontSize: 22, lineHeight: 1,
        }}>
          May 24, 2026
        </div>
      </div>
      {tape && (
        <div aria-hidden="true" style={{
          position: "absolute", top: -10, left: "40%", width: 70, height: 22,
          background: "rgba(184,65,43,0.22)",
          borderLeft: "1px solid rgba(184,65,43,0.32)",
          borderRight: "1px solid rgba(184,65,43,0.32)",
          transform: "rotate(-4deg)",
        }} />
      )}
    </div>
  );
}

function PromoStat({ label, big, small }) {
  return (
    <div>
      <div className="h-eyebrow">{label}</div>
      <div className="h-display" style={{ fontSize: 20, lineHeight: 1.1, margin: "4px 0 2px" }}>
        {big}
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{small}</div>
    </div>
  );
}

// ─── RegisteredBanner ───────────────────────────────────────────────────────
function RegisteredBanner({ setRoute }) {
  return (
    <div style={{ maxWidth: 980, margin: "16px auto 0", padding: "0 20px" }}>
      <div className="paper" style={{
        padding: "12px 16px", display: "flex", alignItems: "center", gap: 12,
        flexWrap: "wrap", borderColor: "var(--tertiary)",
        background: "linear-gradient(180deg, #f4ecd0 0%, #ecdfba 100%)",
      }}>
        <span style={{
          width: 28, height: 28, borderRadius: "50%",
          background: "var(--tertiary)", color: "var(--paper)",
          display: "grid", placeItems: "center", fontWeight: 700,
        }}>✓</span>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div className="h-display" style={{ fontSize: 18, lineHeight: 1.1 }}>
            You're registered.
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-mute)" }}>
            See you Sunday. Open the guide to read up before you come.
          </div>
        </div>
        <button className="btn btn-primary" onClick={() => setRoute("home")}
          style={{ background: "var(--accent)" }}>
          Open guide →
        </button>
      </div>
    </div>
  );
}

// ─── PromoSection (consistent eyebrow + title + body block) ─────────────────
function PromoSection({ eyebrow, title, accent, children }) {
  return (
    <section style={{
      maxWidth: 760, margin: "0 auto", padding: "44px 20px 0",
    }}>
      <div className="h-eyebrow" style={{ color: accent }}>{eyebrow}</div>
      <h2 className="h-display" style={{
        margin: "8px 0 8px", fontSize: "clamp(28px, 5.6vw, 38px)", lineHeight: 1.05,
      }}>
        {title}
      </h2>
      <HandUnderline color={accent} width={120} height={9} style={{ marginBottom: 18 }} />
      {children}
    </section>
  );
}

// ─── StationStrip — six rodeo stations ──────────────────────────────────────
function PromoStationStrip({ setRoute }) {
  const items = (window.STATIONS || []).map((s) => ({ n: s.number, label: s.title, id: s.id }));
  return (
    <div style={{
      marginTop: 22, display: "flex", gap: 10, overflowX: "auto", paddingBottom: 4,
      scrollbarWidth: "thin",
    }}>
      {items.map((it, i) => (
        <button key={it.n} onClick={() => setRoute(`station/${it.id}`)}
          className="paper" style={{
            flex: "0 0 auto", padding: "12px 14px",
            display: "flex", alignItems: "center", gap: 10,
            transform: `rotate(${(i % 2 ? -0.6 : 0.6)}deg)`,
            appearance: "none", cursor: "pointer", font: "inherit", color: "inherit",
            textAlign: "left",
          }}>
          <div style={{
            width: 28, height: 28, borderRadius: "50%",
            border: "1.5px solid var(--ink)",
            display: "grid", placeItems: "center",
            fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 700,
            fontSize: 14, color: "var(--ink)",
          }}>{it.n}</div>
          <div className="h-display" style={{ fontSize: 15 }}>{it.label}</div>
        </button>
      ))}
    </div>
  );
}

// ─── Three-levels section ──────────────────────────────────────────────────
function LevelsSection() {
  const levels = [
    {
      tag: "Basic", ages: "Ages 5 +", color: "var(--tertiary)", dot: "🟢",
      pitch: "First-time riders welcome",
      bullets: ["Bike check + helmet & fit", "Starts & stops", "Scanning & awareness", "Demon driveway", "Snail-race finale"],
    },
    {
      tag: "Intermediate", ages: "Ages 9 +", color: "var(--accent)", dot: "🟡",
      pitch: "Real-world drills on top of Basic",
      bullets: ["Everything in Basic", "Rock dodge", "Crazy crossroad", "Sharper decisions"],
    },
    {
      tag: "Advanced", ages: "Ages 10 +", color: "var(--secondary)", dot: "🔴",
      pitch: "Short closed-road loop",
      bullets: ["Lead the pack", "Apply everything you learned", "Closed to traffic", "Real-but-controlled ride"],
    },
  ];
  return (
    <PromoSection eyebrow="Three levels" title="Pick the pace that fits your kid." accent="var(--ink-soft)">
      <div style={{
        display: "grid", gap: 14,
        gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))",
      }}>
        {levels.map((lv) => (
          <div key={lv.tag} className="paper" style={{
            padding: "20px 20px 22px", borderColor: lv.color, borderWidth: 1.5,
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 18 }} aria-hidden="true">{lv.dot}</span>
              <div className="h-display" style={{ fontSize: 24, color: lv.color, lineHeight: 1 }}>
                {lv.tag}
              </div>
            </div>
            <div className="h-eyebrow" style={{ color: "var(--ink-mute)" }}>{lv.ages}</div>
            <div style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: -2 }}>{lv.pitch}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "grid", gap: 6 }}>
              {lv.bullets.map((b) => (
                <li key={b} style={{ display: "flex", gap: 8, alignItems: "baseline",
                                     fontSize: 14, lineHeight: 1.45 }}>
                  <span style={{ color: lv.color, fontWeight: 700 }}>✓</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </PromoSection>
  );
}

// ─── Come as you are ────────────────────────────────────────────────────────
const comeAsYouAre = [
  { icon: "🚲", title: "Any bike",        body: "BMX, mountain, hybrid, hand-me-down. Whatever your kid rides." },
  { icon: "🔧", title: "Free safety check", body: "8:30 – 9:30AM, first come first served. Brakes, bolts, tire pressure." },
  { icon: "💨", title: "Pump stations",   body: "On site all day. Top up your tires before you ride." },
  { icon: "👨‍👩‍👧", title: "Whole family",     body: "Strollers, siblings, non-riding families welcome. Melrose Gravel Tour runs alongside." },
];

// ─── Timeline ───────────────────────────────────────────────────────────────
function TimelineSection({ setRoute }) {
  const rows = [
    { time: "8:30",  title: "Free bike safety checks open",
      body: "Roll in early. Volunteers check brakes, bolts, tires. First come, first served." },
    { time: "10:30", title: "Rodeo starts — six stations",
      body: "Find Station 1 (Bike Check) and start. Move at your kid's pace; volunteers run each station." },
    { time: "12:00", title: "Family ride rolls out — 8.7 km",
      body: "Together on quiet township gravel. Lead and sweep riders. Nobody gets dropped." },
    { time: "1:00",  title: "Wrap-up · lunch · certificates",
      body: "Every kid gets a completion certificate. Lunch on us. Stick around for the Melrose Gravel Tour finish." },
  ];
  return (
    <PromoSection eyebrow="The morning" title="What your day looks like." accent="var(--accent)">
      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
        {rows.map((r) => (
          <li key={r.time} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{
              flex: "0 0 64px",
              fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 700,
              fontSize: 22, color: "var(--accent)", lineHeight: 1, paddingTop: 14,
            }}>
              {r.time}
            </div>
            <div className="paper" style={{ flex: 1, padding: "12px 16px" }}>
              <div className="h-display" style={{ fontSize: 19, lineHeight: 1.15 }}>{r.title}</div>
              <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.55 }}>
                {r.body}
              </p>
            </div>
          </li>
        ))}
      </ol>
      <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
        <button className="btn btn-ghost" onClick={() => setRoute("ride")}>See the family ride route →</button>
      </div>
    </PromoSection>
  );
}

// ─── Primary CTA repeat ─────────────────────────────────────────────────────
function PrimaryCTA({ setRoute }) {
  return (
    <section style={{ maxWidth: 760, margin: "0 auto", padding: "44px 20px 0" }}>
      <div className="paper" style={{
        padding: "30px 24px", textAlign: "center",
        background: "linear-gradient(180deg, #fcf4dc 0%, #f1e3b8 100%)",
      }}>
        <div className="h-eyebrow" style={{ color: "var(--accent-deep)" }}>
          Walk-ups welcome — but please register
        </div>
        <h2 className="h-display" style={{
          margin: "8px 0 6px", fontSize: "clamp(28px, 6vw, 40px)",
        }}>
          Help us plan the morning.
        </h2>
        <p style={{ margin: "8px auto 18px", fontSize: 15, color: "var(--ink-soft)", maxWidth: 480 }}>
          Two minutes. We need a head count and how to reach you if it rains.
          Lunch is on us when you register — and the parents guide unlocks too.
        </p>
        <button className="btn btn-primary"
          onClick={() => setRoute("register")}
          style={{ background: "var(--accent)", padding: "14px 28px", fontSize: 15 }}>
          Register your family →
        </button>
      </div>
    </section>
  );
}

// ─── Soft capture — notify + volunteer ─────────────────────────────────────
function SoftCaptureSection() {
  return (
    <section style={{ maxWidth: 760, margin: "0 auto", padding: "44px 20px 0" }}>
      <div style={{ display: "grid", gap: 14,
                    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
        <SoftCard
          eyebrow="Can't make this one?"
          title="Get a heads-up next year."
          placeholder="your email"
          cta="Notify me"
          kind="notify"
        />
        <SoftCard
          eyebrow="Want to help out?"
          title="Volunteer for the morning."
          placeholder="your email"
          cta="Count me in"
          kind="volunteer"
        />
      </div>
    </section>
  );
}

function SoftCard({ eyebrow, title, placeholder, cta, kind }) {
  const [email, setEmail] = useSt("");
  const [done, setDone] = useSt(false);
  function submit(e) {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(email)) return;
    const list = readLS(`tbr.${kind}`, []);
    writeLS(`tbr.${kind}`, [...list, { email, at: new Date().toISOString() }]);
    setDone(true);
  }
  return (
    <div className="paper" style={{ padding: "18px 18px 16px" }}>
      <div className="h-eyebrow" style={{ color: "var(--accent-deep)" }}>{eyebrow}</div>
      <div className="h-display" style={{ fontSize: 20, marginTop: 4 }}>{title}</div>
      {done ? (
        <p style={{ margin: "10px 0 0", fontSize: 14, color: "var(--tertiary)", fontWeight: 600 }}>
          ✓ Got it — thanks.
        </p>
      ) : (
        <form onSubmit={submit} style={{ marginTop: 12, display: "flex", gap: 8, flexWrap: "wrap" }}>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
            placeholder={placeholder} required
            style={promoInputStyle} />
          <button type="submit" className="btn btn-primary"
            style={{ background: "var(--ink)", padding: "10px 14px", fontSize: 13 }}>
            {cta}
          </button>
        </form>
      )}
    </div>
  );
}

const promoInputStyle = {
  flex: 1, minWidth: 160,
  appearance: "none", font: "inherit",
  padding: "10px 12px", borderRadius: 8,
  border: "1.5px solid var(--rule)",
  background: "#fbf3df", color: "var(--ink)",
  fontSize: 14,
};

// ─── Footer ────────────────────────────────────────────────────────────────
function PromoFooter({ setRoute }) {
  return (
    <footer style={{ maxWidth: 760, margin: "60px auto 0", padding: "30px 20px 20px",
                     borderTop: "1.5px dashed var(--rule)" }}>
      <div style={{ display: "grid", gap: 22,
                    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
        <div>
          <div className="h-eyebrow">Location</div>
          <div className="h-display" style={{ fontSize: 18, marginTop: 4 }}>
            Tyendinaga Recreation Complex
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 2 }}>
            363 McFarlane Road<br />Shannonville, ON
          </div>
        </div>
        <div>
          <div className="h-eyebrow">Hosted by</div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 8, lineHeight: 1.5 }}>
            Township of Tyendinaga · BOQ.BIKE<br />
            Funded in part by the Ontario Trillium Foundation through the Township of Tyendinaga.
          </div>
        </div>
        <div>
          <div className="h-eyebrow">Same morning</div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 8, lineHeight: 1.5 }}>
            Melrose Gravel Tour runs alongside the rodeo. Plenty going on at the hall all morning.
          </div>
        </div>
      </div>
      <div style={{ marginTop: 24, paddingTop: 14, borderTop: "1px solid var(--rule)",
                    display: "flex", justifyContent: "space-between", gap: 12,
                    flexWrap: "wrap", fontSize: 11, color: "var(--ink-mute)",
                    letterSpacing: "0.04em" }}>
        <span>© 2026 Tyendinaga Bike Rodeo</span>
        <button onClick={() => setRoute("home")}
          style={{
            appearance: "none", border: 0, background: "transparent",
            cursor: "pointer", color: "var(--ink-mute)", fontSize: 11,
            letterSpacing: "0.04em", padding: 0, font: "inherit",
          }}>
          Open parents guide →
        </button>
      </div>
    </footer>
  );
}

function dot(x, y, color, alpha) {
  return {
    position: "absolute", top: `${y}%`, left: `${x}%`,
    width: 22, height: 22, borderRadius: "50%",
    background: color, opacity: alpha,
    transform: "translate(-50%, -50%)",
  };
}

Object.assign(window, { PromoView });