/* global React */
const { useEffect, useRef, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "cinematic",
  "palette": "martini",
  "typography": "cormorant"
}/*EDITMODE-END*/;

const PALETTES = {
  martini: { ink: "#0a0a0a", ink2: "#131313", ink3: "#1c1c1c", cream: "#e8e1d3", creamDim: "#b8b1a3", gold: "#a8945c", goldSoft: "#8b7a4d" },
  monochrome: { ink: "#000000", ink2: "#0d0d0d", ink3: "#1a1a1a", cream: "#f5f5f5", creamDim: "#a8a8a8", gold: "#cccccc", goldSoft: "#888888" },
  blood: { ink: "#0a0808", ink2: "#130f0f", ink3: "#1c1616", cream: "#ede6dc", creamDim: "#b8a99a", gold: "#8a2424", goldSoft: "#5e1818" },
  champagne: { ink: "#16130d", ink2: "#1d1912", ink3: "#262017", cream: "#f0e6d2", creamDim: "#bfa988", gold: "#c89968", goldSoft: "#a07a4f" },
};

const TYPO = {
  cormorant: { serif: '"Cormorant Garamond", serif' },
  playfair:  { serif: '"Playfair Display", serif' },
  caslon:    { serif: '"Libre Caslon Text", "EB Garamond", serif' },
};

/* ============================================================
   HERO — ALL THE WAY CINEMATIC
   ============================================================ */
function Hero({ layout = "cinematic" }) {
  const imgRef = useRef(null);

  useEffect(() => {
    // Skip parallax on mobile / reduced-motion — banner shows at native ratio there
    const isMobile = window.matchMedia("(max-width: 768px)").matches;
    const reduced  = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (isMobile || reduced) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        if (!imgRef.current) return;
        const y = window.scrollY;
        imgRef.current.style.transform = `scale(1.06) translate3d(0, ${y * 0.18}px, 0)`;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  if (layout === "split") {
    return (
      <section className="hero hero--split">
        <div className="hero-split-text wrap">
          <div className="hero-meta">
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--gold)" }}>FILE · 001</span>
            <span className="hairline" style={{ flex: 1, maxWidth: 80 }} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>SOUTHERN CALIFORNIA</span>
          </div>
          <h1 className="title-xl">A journey<br />from pain<br />to <em>progress.</em></h1>
          <p className="body" style={{ maxWidth: "38ch", fontSize: 15, marginTop: 32 }}>
            One percent better. Every day. A quiet protocol for becoming the man your family deserves.
          </p>
          <div className="hero-cta" style={{ marginTop: 40 }}>
            <a href="#hunt-for-hope" className="btn"><span>Watch the documentary</span><span className="arrow">→</span></a>
          </div>
        </div>
        <div className="hero-split-img curtain is-in">
          <img ref={imgRef} src="images/hero-main.jpg" alt="Timothy Valverde" loading="eager" fetchpriority="high" decoding="async" />
          <div className="hero-vignette" />
        </div>
      </section>
    );
  }

  if (layout === "centered") {
    return (
      <section className="hero hero--centered">
        <div className="hero-img-wrap">
          <img ref={imgRef} src="images/hero-main.jpg" alt="Timothy Valverde" loading="eager" fetchpriority="high" decoding="async" />
          <div className="hero-vignette" style={{ background: "linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.95) 100%)" }} />
        </div>
        <div className="hero-content wrap" style={{ textAlign: "center" }}>
          <div className="hero-meta" style={{ justifyContent: "center" }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--gold)" }}>FILE · 001</span>
            <span className="hairline" style={{ width: 80 }} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>SOUTHERN CALIFORNIA</span>
          </div>
          <h1 className="title-xl" style={{ textAlign: "center", marginTop: 24 }}>
            A journey from pain<br />to <em>progress.</em>
          </h1>
          <p className="body" style={{ maxWidth: "44ch", margin: "32px auto 0", fontSize: 15, textAlign: "center" }}>
            One percent better. Every day. Physically, spiritually, emotionally.
          </p>
          <div style={{ display: "flex", gap: 32, justifyContent: "center", marginTop: 48, flexWrap: "wrap" }}>
            <a href="#hunt-for-hope" className="btn"><span>Watch the documentary</span><span className="arrow">→</span></a>
            <a href="#about" className="btn-ghost">Read the dossier <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="hero">
      <div className="hero-img-wrap">
        <img ref={imgRef} src="images/hero-main.jpg" alt="Timothy Valverde" loading="eager" fetchpriority="high" decoding="async" />
        <div className="hero-vignette" />
      </div>

      <div className="hero-content wrap">
        <div className="hero-meta">
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--gold)" }}>FILE · 001</span>
          <span className="hairline" style={{ flex: 1, maxWidth: 80 }} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>SOUTHERN CALIFORNIA</span>
        </div>

        <h1 className="title-xl">
          A journey<br />
          from pain<br />
          to <em>progress.</em>
        </h1>

        <div className="hero-foot">
          <p className="body" style={{ maxWidth: "38ch", fontSize: 15 }}>
            One percent better. Every day. Physically, spiritually, emotionally —
            a quiet protocol for becoming the man your family deserves.
          </p>

          <div className="hero-cta">
            <a href="#hunt-for-hope" className="btn"><span>Watch the documentary</span><span className="arrow">→</span></a>
            <a href="#about" className="btn-ghost">Read the dossier <span className="arrow">→</span></a>
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span className="mono" style={{ fontSize: 9, letterSpacing: "0.4em", color: "var(--cream-dim)" }}>SCROLL</span>
        <span className="hero-scroll-line" />
      </div>
    </section>
  );
}

/* ============================================================
   HUNT FOR HOPE
   ============================================================ */
function HuntForHope() {
  return (
    <section className="section" id="hunt-for-hope" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead
          num="N° 02"
          label="Feature presentation"
          title="Hunt <em>for</em> Hope"
        />

        <div className="curtain hfh-poster bracket">
          <img src="images/hunt-for-hope.jpg" alt="Hunt for Hope — A Documentary" loading="lazy" decoding="async" />
          <div className="hfh-poster-overlay">
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.32em", color: "var(--gold)" }}>● THEATRICAL POSTER · 2026</span>
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.32em", color: "var(--cream-dim)" }}>RUNTIME · TBA</span>
          </div>
        </div>

        <div className="hfh-grid">
          <div className="hfh-text reveal">
            <p className="kicker" style={{ color: "var(--gold)", marginBottom: 18 }}>A Documentary</p>
            <h3 className="title-md serif" style={{ marginBottom: 28 }}>
              The story of a young boy who lost an eye battling cancer twice — but never lost his hope.
            </h3>
            <p className="body" style={{ marginBottom: 18 }}>
              <em>Hunt for Hope</em> follows the incredible journey of a young boy who faced
              the unimaginable: an eight-year battle with retinoblastoma that took one of his eyes
              but could never take his spirit.
            </p>
            <p className="body" style={{ marginBottom: 36 }}>
              Told through moments of pain, resilience, and boundless hope — this documentary
              captures his journey through two cancer battles, highlighting the courage that
              sustained him and inspired those around him.
            </p>

            <div className="release-card">
              <div className="release-row">
                <span className="mono release-label">Watch Party</span>
                <span className="hairline release-line" />
                <span className="serif release-date">May 23, 2026</span>
              </div>
              <div className="release-row">
                <span className="mono release-label">YouTube Release</span>
                <span className="hairline release-line" />
                <span className="serif release-date">May 24, 2026</span>
              </div>
            </div>

            <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
              <a href="https://www.eventbrite.com/e/hunt-for-hope-documentary-watch-party-tickets-1986473341238?aff=oddtdtcreator" target="_blank" rel="noreferrer" className="btn">
                <span>Reserve seat</span><span className="arrow">→</span>
              </a>
              <a href="https://www.the1percent.work/pages/watch-party" target="_blank" rel="noreferrer" className="btn-ghost">
                Host a watch party <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ABOUT
   ============================================================ */
function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <SectionHead
          num="N° 03"
          label="The man · the dossier"
          title="<em>The</em> man behind the work."
        />

        <div className="about-grid">
          <div className="curtain about-portrait">
            <img src="images/about-tim.jpg" alt="Timothy Valverde" loading="lazy" decoding="async" />
            <div className="about-portrait-meta">
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em" }}>SUBJECT · TIMOTHY VALVERDE</span><br />
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--gold)" }}>STATUS · ACTIVE</span>
            </div>
          </div>

          <div className="about-text reveal">
            <p className="body" style={{ fontSize: 18, lineHeight: 1.7, color: "var(--cream)" }}>
              I am a devoted Pastor, husband, and father — grounded in my faith and family.
              I enjoy <em className="serif" style={{ color: "var(--gold)" }}>martial arts</em>,
              a good <em className="serif" style={{ color: "var(--gold)" }}>steak</em>, and
              <em className="serif" style={{ color: "var(--gold)" }}> James Bond</em>.
            </p>
            <p className="body" style={{ marginTop: 24 }}>
              I am inspired and motivated by my son's courageous six-year battle with cancer.
              I founded The 1 Percent — a movement dedicated to fostering hope, progress and
              improving everyday by 1% physically, spiritually and emotionally.
            </p>
            <p className="body" style={{ marginTop: 24 }}>
              Balancing my roles as a leader, caregiver, and martial arts enthusiast, I strive
              to inspire others to embrace their challenges with strength and grace. I reside
              in Southern California with my wife <strong>Sonia</strong>, daughters
              <strong> Maddie</strong> and <strong>Emma</strong>, and my son <strong>Hunt</strong>.
            </p>

            <dl className="about-stats">
              <div><dt>Family</dt><dd>Sonia · Maddie · Emma · Hunt</dd></div>
              <div><dt>Discipline</dt><dd>Brazilian Jiu-Jitsu · Boxing</dd></div>
              <div><dt>Calling</dt><dd>Pastor</dd></div>
              <div><dt>Mission</dt><dd>+1% · Daily</dd></div>
            </dl>

            <a href="https://docs.google.com/forms/d/e/1FAIpQLSe083LpQH5KUI40fLSICV64LOJ7HtafMdug4MhzcrV-_mIzpQ/viewform" target="_blank" rel="noreferrer" className="btn" style={{ marginTop: 40 }}>
              <span>Book Timothy to speak</span><span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ORIGIN — How it all began
   ============================================================ */
function Origin() {
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead
          num="N° 04"
          label="Origin"
          title="<em>How</em> it all began."
        />

        <div className="origin-grid">
          <div className="reveal">
            <p className="body" style={{ fontSize: 22, lineHeight: 1.6, color: "var(--cream)", fontFamily: "var(--serif)", fontStyle: "italic", maxWidth: "30ch" }}>
              "The One Percent was birthed through pain."
            </p>
            <p className="body" style={{ marginTop: 32 }}>
              It is Hunt's cancer journey that inspired me to become a better man.
              I want to improve physically, emotionally — and more importantly, spiritually.
            </p>
          </div>

          <div className="video-frame">
            <YTEmbed vid="7ZC_AvkbtWA" title="The 1 Percent — Origin" />
            <div className="video-caption">
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--gold)" }}>REC · 0:01:24</span>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>EXT. — THE 1%</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PRODUCTS PREVIEW
   ============================================================ */
function ProductsPreview() {
  const products = [
    { img: "images/product-book.png",      title: "The 1 Percent Book", tag: "Pre-Order", price: "$20.00", href: "merch.html#book" },
    { img: "images/product-pray-tee.png",  title: "Pray for Hunt Tee",  tag: "Sold Out",  price: "$20.00", href: "merch.html#pray" },
    { img: "images/product-hunt-tee.png",  title: "Hunt Tee",            tag: "Sold Out",  price: "$20.00", href: "merch.html#hunt" },
  ];

  return (
    <section className="section" id="products">
      <div className="wrap">
        <SectionHead
          num="N° 05"
          label="The collection"
          title="<em>Our</em> products."
        />

        <div className="products-grid">
          {products.map((p, i) => (
            <a href={p.href} key={i} className="product-card reveal">
              <div className="product-img bracket">
                <img src={p.img} alt={p.title} loading="lazy" decoding="async" />
                {p.tag !== "Pre-Order" && <span className="product-status">{p.tag}</span>}
                {p.tag === "Pre-Order" && <span className="product-status product-status--gold">{p.tag}</span>}
              </div>
              <div className="product-meta">
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>
                  N° 0{i + 1}
                </span>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, marginTop: 12 }}>
                  {p.title}
                </h3>
                <div className="product-price">
                  <span className="serif" style={{ fontSize: 18 }}>{p.price}</span>
                  <span className="arrow">→</span>
                </div>
              </div>
            </a>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 80 }}>
          <a href="merch.html" className="btn-ghost">View the full collection <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PODCAST PREVIEW
   ============================================================ */
function PodcastPreview() {
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead
          num="N° 06"
          label="On record · transmissions"
          title="<em>The</em> podcast."
        />

        <div className="podcast-grid">
          <div className="video-frame">
            <YTEmbed vid="CFLCFMVPu48" title="Get to Know Hunt" />
          </div>

          <div className="podcast-text reveal">
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>EPISODE · 01</p>
            <h3 className="serif" style={{ fontSize: 36, fontWeight: 300, lineHeight: 1.1, margin: "20px 0 28px" }}>
              Get to Know Hunt.
            </h3>
            <p className="body">
              I interview my son Hunt. We discuss his six-year battle with eye cancer, some of his
              favorite things, why God allowed it, his eye removal — and much more. He is strong
              and courageous. I cried. We hope it will inspire you. He is the reason for The 1 Percent.
            </p>
            <a href="podcast.html" className="btn-ghost" style={{ marginTop: 36 }}>
              All episodes <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="section newsletter">
      <div className="wrap">
        <div className="newsletter-card bracket">
          <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>
            CLASSIFIED · CORRESPONDENCE
          </p>
          <h3 className="serif" style={{ fontSize: "clamp(36px, 5vw, 64px)", fontWeight: 300, lineHeight: 1.05, margin: "20px 0 18px" }}>
            Receive the dossier.
          </h3>
          <p className="body" style={{ margin: "0 auto 40px", maxWidth: "44ch" }}>
            New films, episodes, and quiet notes from the road —
            sent only when there is something worth saying.
          </p>

          <form
            className="newsletter-form"
            onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}
          >
            <input
              type="email"
              required
              placeholder="your@address.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={sent}
            />
            <button type="submit" className="btn" disabled={sent}>
              <span>{sent ? "Received" : "Subscribe"}</span><span className="arrow">→</span>
            </button>
          </form>
          {sent && (
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)", marginTop: 22 }}>
              ✦ Transmission acknowledged
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply palette + typography as CSS vars on :root
  useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.martini;
    const r = document.documentElement.style;
    r.setProperty("--ink", p.ink);
    r.setProperty("--ink-2", p.ink2);
    r.setProperty("--ink-3", p.ink3);
    r.setProperty("--cream", p.cream);
    r.setProperty("--cream-dim", p.creamDim);
    r.setProperty("--cream-mute", `${p.cream}9e`);
    r.setProperty("--gold", p.gold);
    r.setProperty("--gold-soft", p.goldSoft);
  }, [t.palette]);

  useEffect(() => {
    const ty = TYPO[t.typography] || TYPO.cormorant;
    document.documentElement.style.setProperty("--serif", ty.serif);
  }, [t.typography]);

  return (
    <>
      <div className="grain" />
      <TopBar active="home" />
      <main>
        <Hero layout={t.heroLayout} />
        <Marquee items={["+1% Daily", "Pain → Progress", "Faith · Family · Fight", "The 1 Percent", "Est. 2024"]} />
        <HuntForHope />
        <About />
        <Origin />
        <ProductsPreview />
        <PodcastPreview />
        <Newsletter />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero layout" />
        <TweakRadio label="Layout" value={t.heroLayout}
          options={["cinematic", "split", "centered"]}
          onChange={(v) => setTweak("heroLayout", v)} />

        <TweakSection label="Palette" />
        <TweakRadio label="Mood" value={t.palette}
          options={["martini", "monochrome", "blood", "champagne"]}
          onChange={(v) => setTweak("palette", v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Serif" value={t.typography}
          options={["cormorant", "playfair", "caslon"]}
          onChange={(v) => setTweak("typography", v)} />
      </TweaksPanel>
    </>
  );
}

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