const { useState, useEffect, useRef } = React;

// =====================================================
// CottonCandy4ACause — single-page editorial charity site
// =====================================================

const FLAVORS = [
  { name: "Blue Raspberry", color: "#3B7DD8", note: "sky · electric" },
  { name: "Bubble Gum",     color: "#FF7AB6", note: "classic · pink" },
  { name: "Cherry",         color: "#D8264C", note: "ripe · red" },
  { name: "Grape",          color: "#7B4FB8", note: "deep · purple" },
  { name: "Lime",           color: "#A8D34E", note: "zest · citrus" },
  { name: "Orange",         color: "#F08A2C", note: "sunlit · juice" },
  { name: "Piña Colada",    color: "#F4E4B8", note: "tropical · cream" },
  { name: "Watermelon",     color: "#F26A82", note: "summer · slice" },
  { name: "Strawberry",     color: "#E64563", note: "field · berry" },
  { name: "Green Apple",    color: "#86C24A", note: "crisp · tart" },
  { name: "Vanilla",        color: "#F2EAD8", note: "soft · cloud" },
];

const YEARS = [2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026];

// ---------- Hero ----------
function Hero({ palette, motion }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero-bg" aria-hidden="true">
        <div className={`gradient-field ${motion === "off" ? "" : "gradient-animate"}`} />
        {motion !== "off" && (
          <div className="wisps">
            {Array.from({ length: 7 }).map((_, i) => (
              <span key={i} className={`wisp wisp-${i}`} />
            ))}
          </div>
        )}
      </div>

      <header className="topbar">
        <a className="wordmark" href="#top">
          <img src="images/Main png .png" alt="CottonCandy4ACause" className="wm-logo" />
        </a>
        <nav className="topnav" aria-label="Primary">
          <a href="#story">Story</a>
          <a href="#flavors">Flavors</a>
          <a href="#event">Event</a>
          <a href="#impact">Impact</a>
        </nav>
      </header>

      <div className="hero-inner">
        <div className="hero-meta">
          <span className="dot" /> Est. 2019 · Year Eight · Greenwich Township, NJ
        </div>

        <h1 className="hero-headline">
          Spun with <em>love.</em><br />
          Given with <em>purpose.</em>
        </h1>

        <p className="hero-sub">
          A cotton candy stand for Make-A-Wish New Jersey — one weekend a year,
          one hundred percent of every dollar, in loving memory of Collin Perrone.
        </p>

        <div className="hero-cta">
          <a href="#flavors" className="btn btn-primary">
            See our flavors
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#story" className="btn btn-ghost">Our story</a>
        </div>

        <div className="hero-foot">
          <div className="hero-foot-col">
            <div className="hf-label">Next event</div>
            <div className="hf-value">Sat · Sep 19, 2026</div>
          </div>
          <div className="hero-foot-col">
            <div className="hf-label">Location</div>
            <div className="hf-value">Thomas Stewart Park</div>
          </div>
          <div className="hero-foot-col">
            <div className="hf-label">Bag price</div>
            <div className="hf-value">$3 · all proceeds donated</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Story ----------
function Story() {
  return (
    <section id="story" className="story" data-screen-label="Story">
      <div className="section-head">
        <span className="eyebrow">01 — Our Story</span>
        <h2 className="display">
          Started from a loss.<br />
          Spun into something <em>joyful.</em>
        </h2>
      </div>

      <div className="story-grid">
        <div className="story-copy">
          <p className="lede">
            In July of 2019, Will lost his brother Collin Perrone to cancer. A few months
            later, Will and his friend Jeremy stood behind a folding table with a borrowed
            machine, spinning sugar into clouds for their neighbors.
          </p>
          <p>
            What started as <em>"Will &amp; Jer Cotton Candy for a Cause"</em> has returned
            to Greenwich Township Community Day every September since — now in its eighth
            year. The booth has gotten a little bigger. The line, a little longer. The
            mission has not changed: every dollar goes to Make-A-Wish New Jersey, granting
            wishes for children with critical illnesses.
          </p>
          <p>
            It is small, and it is one weekend a year, and it is for Collin.
          </p>

          <blockquote className="dedication">
            <span className="ded-label">In loving memory</span>
            <span className="ded-name">Collin Perrone</span>
            <span className="ded-dates">— 2019 —</span>
          </blockquote>
        </div>

        <figure className="story-photo">
          <Placeholder label="Photo · Collin" ratio="4 / 5" tone="warm" />
          <figcaption>A portrait of Collin · to be replaced</figcaption>
        </figure>
      </div>

      <div className="story-strip">
        <figure><img src="images/Booth Photo.jpeg" alt="The CottonCandy4ACause booth" className="story-strip-img" /></figure>
        <figure><Placeholder label="Photo · Will &amp; Jer" ratio="3 / 4" tone="lavender" /></figure>
        <figure><Placeholder label="Photo · the line" ratio="3 / 4" tone="cream" /></figure>
      </div>
    </section>
  );
}

// ---------- Flavors ----------
function Flavors() {
  const [active, setActive] = useState(0);

  return (
    <section id="flavors" className="flavors" data-screen-label="Flavors">
      <div className="section-head section-head-dark">
        <span className="eyebrow eyebrow-light">02 — The Flavors</span>
        <h2 className="display display-light">
          Eleven clouds.<br />
          One <em>good</em> cause.
        </h2>
        <p className="section-sub">
          Lineup varies year to year. Tap a flavor to feel its tone.
        </p>
      </div>

      <div className="flavor-feature" style={{ "--accent": FLAVORS[active].color }}>
        <div className="feature-color">
          <div className="feature-cloud" />
          <div className="feature-tag">No. {String(active + 1).padStart(2, "0")}</div>
        </div>
        <div className="feature-text">
          <div className="feature-eyebrow">Now spinning</div>
          <div className="feature-name">{FLAVORS[active].name}</div>
          <div className="feature-note">{FLAVORS[active].note}</div>
        </div>
      </div>

      <ul className="flavor-grid" role="list">
        {FLAVORS.map((f, i) => (
          <li key={f.name}>
            <button
              className={`flavor-card ${active === i ? "is-active" : ""}`}
              style={{ "--c": f.color }}
              onClick={() => setActive(i)}
              aria-pressed={active === i}
            >
              <div className="fc-swatch">
                <span className="fc-swirl" />
              </div>
              <div className="fc-meta">
                <div className="fc-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="fc-name">{f.name}</div>
                <div className="fc-note">{f.note}</div>
              </div>
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Pricing ----------
function Pricing() {
  return (
    <section id="pricing" className="pricing" data-screen-label="Pricing">
      <div className="section-head">
        <span className="eyebrow">03 — Pricing</span>
        <h2 className="display">
          Three dollars.<br />
          One <em>hundred</em> percent.
        </h2>
      </div>

      <div className="price-grid">
        <article className="price-card price-card-primary">
          <div className="pc-row">
            <span className="pc-eyebrow">A bag of cotton candy</span>
            <span className="pc-tag">Suggested</span>
          </div>
          <div className="pc-price">
            <span className="pc-currency">$</span>
            <span className="pc-amount">3</span>
          </div>
          <p className="pc-body">
            Hand-spun at the booth, bagged on the spot. Pick any flavor we have
            spinning that day.
          </p>
        </article>

        <article className="price-card">
          <div className="pc-row">
            <span className="pc-eyebrow">A donation</span>
            <span className="pc-tag pc-tag-soft">Any amount</span>
          </div>
          <div className="pc-price">
            <span className="pc-currency">$</span>
            <span className="pc-amount pc-amount-soft">—</span>
          </div>
          <p className="pc-body">
            No cotton candy required. Drop a dollar, drop a hundred — every cent
            is forwarded to Make-A-Wish New Jersey.
          </p>
        </article>
      </div>

      <div className="price-foot">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 17s-6.5-4.2-6.5-9A3.5 3.5 0 0 1 10 5a3.5 3.5 0 0 1 6.5 3c0 4.8-6.5 9-6.5 9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>
          100% of proceeds benefit Make-A-Wish New Jersey · CottonCandy4ACause is a personal fundraising effort, not a registered 501(c)(3).
      </div>
    </section>
  );
}

// ---------- Event / Find Us ----------
function Event() {
  return (
    <section id="event" className="event" data-screen-label="Event">
      <div className="event-grid">
        <div className="event-left">
          <span className="eyebrow eyebrow-light">04 — Find us</span>
          <h2 className="display display-light">
            Third Saturday<br />
            of <em>September.</em>
          </h2>
          <p className="event-lede">
            We set up every year at Greenwich Township Community Day — a free,
            family-run festival at Thomas Stewart Park in Greenwich Township, NJ.
            Look for the pink booth. You can't miss it.
          </p>

          <a className="btn btn-light"
             href="https://www.greenwichtownship.org/communityday/"
             target="_blank" rel="noopener noreferrer">
            Community Day info
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M5 11l6-6M6 5h5v5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>

        <div className="event-right">
          <div className="event-card">
            <div className="ec-row">
              <span className="ec-label">Date</span>
              <span className="ec-value">Saturday, September 19, 2026</span>
            </div>
            <div className="ec-row">
              <span className="ec-label">Time</span>
              <span className="ec-value">All day · check township site</span>
            </div>
            <div className="ec-row">
              <span className="ec-label">Place</span>
              <span className="ec-value">Thomas Stewart Park<br/>Greenwich Township, NJ</span>
            </div>
            <div className="ec-row">
              <span className="ec-label">Parking</span>
              <span className="ec-value">On-site · overflow at Greenwich School</span>
            </div>
            <div className="ec-row">
              <span className="ec-label">Admission</span>
              <span className="ec-value">Free</span>
            </div>
            <div className="ec-row">
              <span className="ec-label">Find the booth</span>
              <span className="ec-value">Look for pink &amp; the longest line</span>
            </div>
          </div>

          <div className="event-map">
            <Placeholder label="Map · Thomas Stewart Park" ratio="4 / 3" tone="dark" />
            <div className="map-pin">
              <span className="pin-dot" /> Booth approx. here
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Impact ----------
function Impact() {
  return (
    <section id="impact" className="impact" data-screen-label="Impact">
      <div className="section-head">
        <span className="eyebrow">05 — Impact</span>
        <h2 className="display">
          Eight years.<br />
          <em>Every</em> dollar forwarded.
        </h2>
        <p className="section-sub">
          We're putting together the year-by-year totals. Final numbers will be
          posted here after each event.
        </p>
      </div>

      <ol className="years" role="list">
        {YEARS.map((y, i) => (
          <li key={y} className={`year-card ${i === YEARS.length - 1 ? "is-current" : ""}`}>
            <div className="yc-top">
              <span className="yc-year">{y}</span>
              <span className="yc-num">Yr {String(i + 1).padStart(2, "0")}</span>
            </div>
            <div className="yc-amount">
              {i === YEARS.length - 1 ? "Live →" : "$ —"}
            </div>
            <div className="yc-note">
              {i === 0 ? "Year one · in memory of Collin" :
               i === YEARS.length - 1 ? "Totals coming soon" :
               "Total to be posted"}
            </div>
          </li>
        ))}
      </ol>

      <div className="impact-foot">
        <em>Totals coming soon — check back after each event.</em>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Foot() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot-mark">
        <span className="fm-mark">✺</span>
        <span className="fm-name">CottonCandy<span className="wm-num">4</span>ACause</span>
      </div>

      <p className="foot-dedication">
        In loving memory of <em>Collin Perrone.</em><br />
        Spun with love. Given with purpose.
      </p>

      <div className="foot-cols">
        <div>
          <div className="fc-eyebrow">Site</div>
          <a href="#story">Our story</a>
          <a href="#flavors">Flavors</a>
          <a href="#event">The event</a>
          <a href="#impact">Impact</a>
        </div>
        <div>
          <div className="fc-eyebrow">Event</div>
          <a href="https://www.greenwichtownship.org/communityday/" target="_blank" rel="noopener noreferrer">
            Community Day ↗
          </a>
          <a href="https://www.greenwichtownship.org/" target="_blank" rel="noopener noreferrer">
            Greenwich Township ↗
          </a>
        </div>
        <div>
          <div className="fc-eyebrow">Benefit</div>
          <span>Make-A-Wish New Jersey</span>
          <span>100% of proceeds</span>
        </div>
      </div>

      <div className="foot-rule" />

      <div className="foot-fine">
        <span>© {new Date().getFullYear()} CottonCandy4ACause</span>
        <span>cottoncandy4acause.com</span>
        <span>Est. 2019 · Greenwich Township, NJ</span>
      </div>
    </footer>
  );
}

// ---------- Placeholder ----------
function Placeholder({ label, ratio = "4 / 3", tone = "pink" }) {
  return (
    <div className={`ph ph-${tone}`} style={{ aspectRatio: ratio }}>
      <span className="ph-corner ph-tl">+</span>
      <span className="ph-corner ph-tr">+</span>
      <span className="ph-corner ph-bl">+</span>
      <span className="ph-corner ph-br">+</span>
      <span className="ph-label">{label}</span>
    </div>
  );
}

// ---------- Tweaks ----------
const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "palette": "magenta",
  "type": "editorial",
  "motion": "soft"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULS);

  useEffect(() => {
    document.documentElement.dataset.palette = tweaks.palette;
    document.documentElement.dataset.type = tweaks.type;
    document.documentElement.dataset.motion = tweaks.motion;
  }, [tweaks.palette, tweaks.type, tweaks.motion]);

  return (
    <>
      <a id="top" />
      <Hero palette={tweaks.palette} motion={tweaks.motion} />
      <Story />
      <Flavors />
      <Pricing />
      <Event />
      <Impact />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Color world"
            value={tweaks.palette}
            options={[
              { value: "magenta", label: "Magenta" },
              { value: "plum",    label: "Plum" },
              { value: "blush",   label: "Blush" },
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection title="Type">
          <TweakRadio
            label="Pairing"
            value={tweaks.type}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "grotesque", label: "Grotesque" },
            ]}
            onChange={(v) => setTweak("type", v)}
          />
        </TweakSection>
        <TweakSection title="Motion">
          <TweakRadio
            label="Hero animation"
            value={tweaks.motion}
            options={[
              { value: "soft", label: "Soft" },
              { value: "lively", label: "Lively" },
              { value: "off", label: "Off" },
            ]}
            onChange={(v) => setTweak("motion", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);