/* eslint-disable */
// ============================================================
// Peter Dziedzic Films — v2 screens
// ============================================================

const { useState, useEffect, useRef } = React;

// ============================================================
// HOME
// ============================================================
function HomeScreen({ go, tweaks, openFilm }) {
  return (
    <main data-screen-label="Home">
      <Hero variant={tweaks.hero} go={go} />

      {/* booking marquee */}
      <div className="marquee">
        <div className="marquee-track">
          <span>Now Booking</span><em>Autumn 2026</em>
          <span>Now Booking</span><em>Spring 2027</em>
          <span>Now Booking</span><em>Summer 2027</em>
          <span>Destination Inquiries</span><em>Open Worldwide</em>
          <span>Now Booking</span><em>Autumn 2026</em>
          <span>Now Booking</span><em>Spring 2027</em>
          <span>Now Booking</span><em>Summer 2027</em>
          <span>Destination Inquiries</span><em>Open Worldwide</em>
        </div>
      </div>

      {/* Intro */}
      <section className="section text-center">
        <div className="container-reading">
          <Reveal><div className="eyebrow">Cinematic Storytelling &mdash; NJ &amp; East Coast</div></Reveal>
          <Reveal delay={0.15}>
            <h2 className="display-md" style={{ marginTop: 24 }}>
              Films crafted like memories &mdash; warm, unhurried, true to how the day actually felt.
            </h2>
          </Reveal>
          <Reveal delay={0.3}>
            <p className="lede" style={{ marginTop: 28 }}>
              Where most wedding videos give you a recap, I craft a film. One you&rsquo;ll want to watch again on every anniversary &mdash; not just the first.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Featured films */}
      <section className="section section-deep">
        <div className="container-wide">
          <Reveal>
            <div className="text-center" style={{ marginBottom: 12 }}>
              <div className="eyebrow">Recent Work</div>
              <h2 className="display-md" style={{ marginTop: 16 }}>Three films, three lengths.</h2>
            </div>
          </Reveal>
          <div className="films-grid">
            {FILMS.slice(0, 3).map((f, i) => (
              <Reveal key={f.id} delay={i * 0.15}>
                <FilmCard film={f} onClick={() => openFilm(f)} />
              </Reveal>
            ))}
          </div>
          <div className="text-center" style={{ marginTop: 60 }}>
            <BtnText onClick={() => go("films")}>View All Films</BtnText>
          </div>
        </div>
      </section>

      {/* Husband-wife team CTA */}
      <TeamCta
        go={go}
        eyebrow="A Husband-Wife Team"
        headline={<>One shared timeline. No vendor friction.<br/>A photo and film team that moves as one.</>}
        body="Booking Danielle for photography? Most of our couples add film &mdash; because we already know each other&rsquo;s rhythm, and your day flows smoother because of it."
        primary={{ label: "Add Film to Your Booking", onClick: () => go("inquire") }}
        secondary={{ label: "Visit Danielle's Site", onClick: () => window.open("https://danielledziedzicphoto.com", "_blank") }}
      />

      {/* Process */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="text-center">
              <div className="eyebrow">The Experience</div>
              <h2 className="display-md" style={{ marginTop: 16 }}>How we work together.</h2>
            </div>
          </Reveal>
          <div className="process-grid">
            <Reveal><ProcessStep n="01" title="Inquire">Share a few details about your day. You&rsquo;ll hear back within 48 hours.</ProcessStep></Reveal>
            <Reveal delay={0.15}><ProcessStep n="02" title="Connect">A call to talk through vision, venue, and timeline &mdash; no pressure, just clarity.</ProcessStep></Reveal>
            <Reveal delay={0.3}><ProcessStep n="03" title="Film">Present, unobtrusive, intentional. We capture the day as it unfolds.</ProcessStep></Reveal>
            <Reveal delay={0.45}><ProcessStep n="04" title="Deliver">A film made to last generations &mdash; not lost in a folder you&rsquo;ll never open.</ProcessStep></Reveal>
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className={"section " + (tweaks.rhythm === "lively" ? "section-deeper" : "section-deep")}>
        <div className="container">
          <Reveal>
            <Testimonial
              quote="Danielle and Peter were absolutely amazing as our wedding photographer and videographer. We felt really cared for, not only as clients, but as people, which speaks to their hearts and character."
              author="— Kelly + Seth"
            />
          </Reveal>
        </div>
      </section>

      {/* Investment teaser */}
      <section className="section">
        <div className="container investment-teaser">
          <Reveal><div className="eyebrow">Investment</div></Reveal>
          <Reveal delay={0.15}>
            <h2 className="display-md">
              {tweaks.showPrices ? "Films starting at $3,800" : "Tailored investment for every day"}
            </h2>
          </Reveal>
          <Reveal delay={0.3}>
            <p className="lede">Three package tiers &mdash; designed around how much of your day you want preserved on film.</p>
          </Reveal>
          <Reveal delay={0.45}>
            <div style={{ marginTop: 36 }}>
              <BtnText onClick={() => go("investment")}>See Full Investment</BtnText>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Final dark CTA */}
      <section className="section section-dark text-center" style={{ position: "relative", overflow: "hidden" }}>
        <div className="team-cta-grain" />
        <div className="container" style={{ position: "relative" }}>
          <Reveal><div className="eyebrow-light">Let&rsquo;s Make Something Timeless</div></Reveal>
          <Reveal delay={0.15}>
            <h2 className="display-lg" style={{ marginTop: 24, color: "var(--cream)" }}>Tell me about your day.</h2>
          </Reveal>
          <Reveal delay={0.3}>
            <div style={{ marginTop: 40 }}>
              <Btn variant="light" onClick={() => go("inquire")}>Begin Your Inquiry</Btn>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// FILMS — grouped by tier, with chapter rail
// ============================================================
function FilmsScreen({ go, openFilm }) {
  const [filter, setFilter] = useState("all");
  const groups = [
    { key: "highlight",   label: "Highlight Films", marker: "01" },
    { key: "feature",     label: "Feature Films",   marker: "02" },
    { key: "documentary", label: "Documentary Films", marker: "03" },
  ];
  const filtered = filter === "all" ? FILMS : FILMS.filter(f => f.tier === filter);
  const visibleGroups = filter === "all"
    ? groups
    : groups.filter(g => g.key === filter);

  return (
    <main data-screen-label="Films">
      <PageHeader
        eyebrow="The Portfolio"
        title="Films"
        lede="A selection of recent work — from intimate elopements to full-day celebrations across New Jersey, the East Coast, and beyond."
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container-wide">
          <div className="films-rail">
            <span className={"rail-link" + (filter === "all" ? " active" : "")} onClick={() => setFilter("all")}>
              All Films <span className="rail-count">{FILMS.length}</span>
            </span>
            {groups.map(g => {
              const count = FILMS.filter(f => f.tier === g.key).length;
              return (
                <span key={g.key} className={"rail-link" + (filter === g.key ? " active" : "")} onClick={() => setFilter(g.key)}>
                  {TIER_LABEL[g.key]} <span className="rail-count">{count}</span>
                </span>
              );
            })}
          </div>

          {visibleGroups.map(g => {
            const films = FILMS.filter(f => f.tier === g.key);
            if (!films.length) return null;
            return (
              <div key={g.key}>
                <div className="films-group-label">
                  <span className="marker">{g.marker}</span>
                  <span className="label">{g.label}</span>
                  <span className="line" />
                </div>
                <div className="films-grid-large" style={{ marginBottom: 40 }}>
                  {films.map(f => (
                    <Reveal key={f.id}>
                      <FilmCard film={f} onClick={() => openFilm(f)} />
                    </Reveal>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section className="section section-dark text-center" style={{ position: "relative", overflow: "hidden" }}>
        <div className="team-cta-grain" />
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow-light">Ready to Begin?</div>
          <h2 className="display-md" style={{ marginTop: 24, color: "var(--cream)" }}>Let&rsquo;s create your film.</h2>
          <div style={{ marginTop: 40 }}>
            <Btn variant="light" onClick={() => go("inquire")}>Inquire Now</Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// EXPERIENCE — with sticky chapter rail
// ============================================================
function ExperienceScreen({ go }) {
  const [active, setActive] = useState(0);
  const refs = [useRef(null), useRef(null), useRef(null), useRef(null)];
  const chapters = ["About Peter", "What I Bring", "The Process", "Together"];

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const idx = refs.findIndex(r => r.current === e.target);
          if (idx >= 0) setActive(idx);
        }
      });
    }, { rootMargin: "-30% 0px -55% 0px" });
    refs.forEach(r => { if (r.current) obs.observe(r.current); });
    return () => obs.disconnect();
  }, []);

  const scrollTo = (i) => {
    refs[i].current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <main data-screen-label="Experience">
      <PageHeader
        eyebrow="Meet the Filmmaker"
        title="The Experience"
        lede="A calm, intentional approach to capturing your day — from the first inquiry to the final film."
      />

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 64 }}>
          <aside className="chapter-rail">
            <div className="chapter-eyebrow">Chapters</div>
            <ol>
              {chapters.map((c, i) => (
                <li key={c} className={active === i ? "active" : ""} onClick={() => scrollTo(i)}>{c}</li>
              ))}
            </ol>
          </aside>

          <div>
            <div ref={refs[0]}>
              <div className="about-layout" style={{ marginBottom: 40 }}>
                <Reveal>
                  <div className="about-portrait">
                    <img src={IMG.portrait} alt="Peter Dziedzic" />
                  </div>
                </Reveal>
                <Reveal delay={0.15}>
                  <div className="about-text">
                    <div className="eyebrow" style={{ marginBottom: 20 }}>About Peter</div>
                    <h2 className="display-md">Hi, I&rsquo;m Peter &mdash; and I make films you&rsquo;ll actually rewatch.</h2>
                    <p className="body-text">For years, I watched couples spend more on flowers than on the only record of their day they could actually press play on. That never sat right with me. A wedding film should be a film &mdash; not a thirty-minute highlight reel of jump cuts and pop songs you&rsquo;ll outgrow.</p>
                    <p className="body-text">My approach is built on the same principle Danielle brings to her photography: presence over performance. I move quietly through your day, capturing the moments most people miss &mdash; the laugh between toasts, the quiet hand-squeeze before the aisle, your grandfather watching from the back row.</p>
                    <p className="body-text">The result is a film that doesn&rsquo;t age. One your kids will watch one day and feel like they were there.</p>
                    <div className="about-signature">&mdash; Peter</div>

                    <div className="about-stats">
                      <div className="about-stat">
                        <div className="stat-num">120<span style={{ fontSize: "1.4rem", marginLeft: 4 }}>+</span></div>
                        <div className="stat-label">Weddings Filmed</div>
                      </div>
                      <div className="about-stat">
                        <div className="stat-num">8<span style={{ fontSize: "1.4rem", marginLeft: 4 }}>yrs</span></div>
                        <div className="stat-label">Behind the Camera</div>
                      </div>
                      <div className="about-stat">
                        <div className="stat-num">12<span style={{ fontSize: "1.4rem", marginLeft: 4 }}>wks</span></div>
                        <div className="stat-label">Avg. Delivery</div>
                      </div>
                    </div>
                  </div>
                </Reveal>
              </div>
            </div>

            <div ref={refs[1]} style={{ paddingTop: 80 }}>
              <Reveal>
                <div style={{ marginBottom: 40 }}>
                  <div className="eyebrow">What I Bring</div>
                  <h2 className="display-md" style={{ marginTop: 16 }}>Three things I promise.</h2>
                </div>
              </Reveal>
              <div className="values-grid">
                <Reveal><Value mark="i." title="Quiet Presence">You shouldn&rsquo;t notice the camera. I move with intention, never staging or interrupting &mdash; just documenting what&rsquo;s already unfolding.</Value></Reveal>
                <Reveal delay={0.15}><Value mark="ii." title="Cinematic Eye">Every frame is composed like a film, not a video. Color, light, and pacing all serve the story of your day &mdash; not a trend.</Value></Reveal>
                <Reveal delay={0.3}><Value mark="iii." title="Honest Edits">No manufactured drama. No over-saturated grades. Just your day, distilled into the moments that mattered most.</Value></Reveal>
              </div>
            </div>

            <div ref={refs[2]} style={{ paddingTop: 100 }}>
              <Reveal>
                <div style={{ marginBottom: 40 }}>
                  <div className="eyebrow">The Process</div>
                  <h2 className="display-md" style={{ marginTop: 16 }}>From inquiry to final film.</h2>
                </div>
              </Reveal>
              <div className="process-grid">
                <Reveal><ProcessStep n="01" title="Inquire">Send a few details about your day. I&rsquo;ll reply within 48 hours with availability and a starting point.</ProcessStep></Reveal>
                <Reveal delay={0.15}><ProcessStep n="02" title="Connect">A 30-minute call to talk through your vision, venue, and timeline. No pressure, no sales pitch.</ProcessStep></Reveal>
                <Reveal delay={0.3}><ProcessStep n="03" title="Plan">I coordinate with your photographer and venue to make sure film and photo flow seamlessly.</ProcessStep></Reveal>
                <Reveal delay={0.45}><ProcessStep n="04" title="Deliver">Your finished film arrives within 12 weeks &mdash; ready to watch, share, and treasure.</ProcessStep></Reveal>
              </div>
            </div>

            <div ref={refs[3]} style={{ paddingTop: 100, paddingBottom: 40 }}>
              <Reveal>
                <div style={{ marginBottom: 40 }}>
                  <div className="eyebrow">Together</div>
                  <h2 className="display-md" style={{ marginTop: 16 }}>One team, one rhythm.</h2>
                </div>
              </Reveal>
              <Reveal delay={0.15}>
                <p className="body-text" style={{ maxWidth: 640 }}>
                  Danielle photographs. I film. We&rsquo;ve spent years building a workflow where photo and video don&rsquo;t compete &mdash; they harmonize. Most of our couples book us together because the day simply flows better when the people behind the cameras are already in sync.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <div style={{ marginTop: 32, display: "flex", gap: 28, alignItems: "center", flexWrap: "wrap" }}>
                  <Btn variant="outline" onClick={() => window.open("https://danielledziedzicphoto.com", "_blank")}>Visit Danielle&rsquo;s Site</Btn>
                  <BtnText onClick={() => go("inquire")}>Inquire for Both</BtnText>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-deeper text-center">
        <div className="container">
          <Reveal><div className="eyebrow">Ready When You Are</div></Reveal>
          <Reveal delay={0.15}><h2 className="display-md" style={{ marginTop: 24 }}>Let&rsquo;s make something timeless.</h2></Reveal>
          <Reveal delay={0.3}>
            <div style={{ marginTop: 40 }}>
              <Btn variant="filled" onClick={() => go("inquire")}>Begin Your Inquiry</Btn>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// INVESTMENT — sticky bar follows you
// ============================================================
function InvestmentScreen({ go, tweaks, setInquiryPkg }) {
  const [stickyPkg, setStickyPkg] = useState(null);
  const [sticky, setSticky] = useState(false);
  const tiersRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      // show after scrolling past the page header
      setSticky(y > 600 && y < (document.body.scrollHeight - window.innerHeight - 400));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const faqs = [
    { q: "Do you offer custom packages?", a: "Yes. The three tiers cover most weddings, but if your day calls for something different — multi-day events, destination weddings, intimate elopements, or specific deliverables — just mention it in your inquiry and we'll build a quote that fits." },
    { q: "What if I'm also booking Danielle for photography?", a: "Couples who book photo and film together receive a coordinated package and a streamlined process. We share one timeline, one point of contact, and one rhythm on the day. Mention you're booking both when you inquire." },
    { q: "Is travel included?", a: "Travel within New Jersey and a 90-minute radius is included. For weddings further afield on the East Coast or destination weddings, we add a flat travel fee that covers transport and accommodations. No hidden costs." },
    { q: "Do you require a deposit?", a: "A 30% retainer holds your date. The remaining balance is due 30 days before your wedding. Payment plans are available on request." },
    { q: "When do we receive our film?", a: "Highlight and Feature films deliver within 12 weeks of your wedding. Documentary films deliver within 14 weeks. You'll receive a preview clip within 4 weeks so you have something to share while the full edit finishes." },
  ];

  const goWithPkg = (pkg) => {
    setInquiryPkg(pkg);
    go("inquire");
  };

  return (
    <main data-screen-label="Investment">
      <PageHeader
        eyebrow="Packages & Pricing"
        title="Investment"
        lede="Three tiers, built around how much of your day you want preserved on film. All packages include planning support, full editing, and a private online gallery."
      />
      <section className="section" style={{ paddingTop: 0 }} ref={tiersRef}>
        <div className="container-wide">
          <div className="tiers">
            <Reveal>
              <TierCard
                name="Highlight"
                tagline="Up to 6 hrs · 4–5 min film"
                price="$3,800"
                hidePrice={!tweaks.showPrices}
                includes={[
                  "One filmmaker, up to 6 hours of coverage",
                  "4–5 minute cinematic highlight film",
                  "Licensed cinematic soundtrack",
                  "Vows and toast audio integrated",
                  "Private online gallery, ready to share",
                  "Delivery within 12 weeks",
                ]}
                ctaLabel="Choose Highlight"
                onCta={() => { setStickyPkg({ name: "Highlight", price: "from $3,800", key: "highlight" }); goWithPkg("highlight"); }}
              />
            </Reveal>
            <Reveal delay={0.15}>
              <TierCard
                name="Feature"
                tagline="Up to 9 hrs · 10–14 min film"
                price="$5,400"
                badge="Most Popular"
                featured
                hidePrice={!tweaks.showPrices}
                includes={[
                  "Two filmmakers, up to 9 hours of coverage",
                  "10–14 minute feature film",
                  "3–5 minute highlight cut for sharing",
                  "Full ceremony and toast films",
                  "Licensed cinematic soundtrack",
                  "Private online gallery, ready to share",
                  "Delivery within 12 weeks",
                ]}
                ctaLabel="Choose Feature"
                onCta={() => { setStickyPkg({ name: "Feature", price: "from $5,400", key: "feature" }); goWithPkg("feature"); }}
              />
            </Reveal>
            <Reveal delay={0.3}>
              <TierCard
                name="Documentary"
                tagline="Full day · 25–40 min film"
                price="$8,200"
                hidePrice={!tweaks.showPrices}
                includes={[
                  "Two filmmakers, full-day coverage",
                  "25–40 minute documentary film",
                  "Feature cut (10–14 min) and highlight (4–5 min)",
                  "Full ceremony, toasts, and dance films",
                  "Drone aerials where permitted",
                  "Raw audio archive for keepsake",
                  "Private online gallery, ready to share",
                  "Delivery within 14 weeks",
                ]}
                ctaLabel="Choose Documentary"
                onCta={() => { setStickyPkg({ name: "Documentary", price: "from $8,200", key: "documentary" }); goWithPkg("documentary"); }}
              />
            </Reveal>
          </div>
          <p className="investment-note">
            Custom packages, destination travel, and photo+film bundles are quoted on request.
          </p>
        </div>
      </section>

      <section className="section section-deep">
        <div className="container-reading">
          <Reveal>
            <div className="text-center" style={{ marginBottom: 60 }}>
              <div className="eyebrow">Common Questions</div>
              <h2 className="display-md" style={{ marginTop: 16 }}>Things couples ask.</h2>
            </div>
          </Reveal>
          <Reveal>
            <FaqList items={faqs} />
          </Reveal>
        </div>
      </section>

      <section className="section section-dark text-center" style={{ position: "relative", overflow: "hidden" }}>
        <div className="team-cta-grain" />
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow-light">Still Have Questions?</div>
          <h2 className="display-md" style={{ marginTop: 24, color: "var(--cream)" }}>Let&rsquo;s talk about your day.</h2>
          <p className="lede" style={{ marginTop: 24, color: "var(--cream)", opacity: 0.8, maxWidth: 480, marginLeft: "auto", marginRight: "auto" }}>Every wedding is different. The best way to know what&rsquo;s right for yours is to start a conversation.</p>
          <div style={{ marginTop: 40 }}>
            <Btn variant="light" onClick={() => go("inquire")}>Begin Your Inquiry</Btn>
          </div>
        </div>
      </section>

      {stickyPkg && (
        <div className={"sticky-bar" + (sticky ? " visible" : "")}>
          <div className="sticky-meta">
            <span className="sticky-pkg">{stickyPkg.name}</span>
            {tweaks.showPrices && <span className="sticky-price">{stickyPkg.price}</span>}
          </div>
          <div className="sticky-actions">
            <a className="form-back" style={{ color: "var(--cream)", opacity: 0.7 }} onClick={() => setStickyPkg(null)}>Clear</a>
            <Btn variant="light" onClick={() => goWithPkg(stickyPkg.key)}>Add Film to Your Booking</Btn>
          </div>
        </div>
      )}
    </main>
  );
}

// ============================================================
// INQUIRE — multi-step
// ============================================================
function InquireScreen({ go, prefillPackage }) {
  const [submitted, setSubmitted] = useState(false);
  const onComplete = (data) => { setSubmitted(true); };
  return (
    <main data-screen-label="Inquire">
      <PageHeader
        eyebrow="Begin Your Inquiry"
        title="Tell me about your day."
        lede="Share a few details below and I'll reply within 48 hours with availability, a starting point, and a few questions to help us figure out if we're the right fit."
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="inquire-layout">
            <div className="inquire-intro">
              <div className="eyebrow" style={{ marginBottom: 20 }}>What Happens Next</div>
              <h2 className="display-md">No sales pitch. Just a real conversation.</h2>
              <p className="body-text">Once you send this form, you&rsquo;ll hear back from me personally within 48 hours &mdash; usually sooner. From there, we&rsquo;ll set up a 30-minute call to talk through your vision, your venue, and whether we&rsquo;re the right filmmaker for your day.</p>
              <p className="body-text">If we are, I&rsquo;ll send a custom proposal. If we&rsquo;re not, I&rsquo;ll happily point you toward someone who is. No pressure, no follow-up emails.</p>
              <div className="inquire-details">
                <dl>
                  <div><dt>Response Time</dt><dd>Within 48 hours</dd></div>
                  <div><dt>Service Area</dt><dd>NJ, East Coast &amp; destinations</dd></div>
                  <div><dt>Booking Window</dt><dd>Currently accepting 2026 &amp; 2027 dates</dd></div>
                  <div><dt>Direct Email</dt><dd><a href="mailto:hello@peterdziedzicfilms.com" style={{ borderBottom: "1px solid currentColor" }}>hello@peterdziedzicfilms.com</a></dd></div>
                </dl>
              </div>
            </div>

            <div className="inquire-form">
              {!submitted ? (
                <StepForm prefillPackage={prefillPackage} onComplete={onComplete} />
              ) : (
                <div className="form-success">
                  <h3>Thank you.</h3>
                  <p>Your inquiry is on its way. I&rsquo;ll be in touch within 48 hours &mdash; usually sooner. In the meantime, feel free to <a onClick={() => go("films")} style={{ borderBottom: "1px solid currentColor", cursor: "pointer" }}>browse more films</a>.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// TWEAKS PANEL
// ============================================================
function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Hero">
        <TweakSelect
          label="Treatment"
          value={tweaks.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "fullbleed", label: "Full-bleed dark" },
            { value: "letterbox", label: "Letterbox title-card" },
            { value: "split",     label: "Split image + text" },
            { value: "type",      label: "Type-only on cream" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Atmosphere">
        <TweakSlider
          label="Grain"
          value={tweaks.grain}
          min={0} max={0.2} step={0.01}
          onChange={(v) => setTweak("grain", v)}
        />
        <TweakRadio
          label="Rhythm"
          value={tweaks.rhythm}
          onChange={(v) => setTweak("rhythm", v)}
          options={[
            { value: "quiet",  label: "Quiet" },
            { value: "lively", label: "Lively" },
          ]}
        />
        <TweakToggle
          label="Scroll motion"
          value={tweaks.motion}
          onChange={(v) => setTweak("motion", v)}
        />
      </TweakSection>

      <TweakSection label="Investment">
        <TweakToggle
          label="Show prices"
          value={tweaks.showPrices}
          onChange={(v) => setTweak("showPrices", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ============================================================
// APP
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "fullbleed",
  "grain": 0.08,
  "rhythm": "quiet",
  "motion": true,
  "showPrices": true
}/*EDITMODE-END*/;

function App() {
  const [screen, setScreen] = useState("home");
  const [film, setFilm] = useState(null);
  const [prefillPackage, setPrefillPackage] = useState("");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply atmospheric tweaks
  useEffect(() => {
    document.documentElement.style.setProperty("--grain-opacity", tweaks.grain);
    document.body.classList.toggle("no-motion", !tweaks.motion);
  }, [tweaks.grain, tweaks.motion]);

  const go = (next) => {
    setScreen(next);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openFilm = (f) => setFilm(f);
  const closeFilm = () => setFilm(null);
  const prevFilm = () => {
    if (!film) return;
    const idx = FILMS.findIndex(f => f.id === film.id);
    setFilm(FILMS[(idx - 1 + FILMS.length) % FILMS.length]);
  };
  const nextFilm = () => {
    if (!film) return;
    const idx = FILMS.findIndex(f => f.id === film.id);
    setFilm(FILMS[(idx + 1) % FILMS.length]);
  };

  return (
    <>
      <Nav current={screen} go={go} />
      {screen === "home"       && <HomeScreen        go={go} tweaks={tweaks} openFilm={openFilm} />}
      {screen === "films"      && <FilmsScreen       go={go} openFilm={openFilm} />}
      {screen === "experience" && <ExperienceScreen  go={go} />}
      {screen === "investment" && <InvestmentScreen  go={go} tweaks={tweaks} setInquiryPkg={setPrefillPackage} />}
      {screen === "inquire"    && <InquireScreen     go={go} prefillPackage={prefillPackage} />}
      <Footer go={go} />
      <FilmModal film={film} onClose={closeFilm} onPrev={prevFilm} onNext={nextFilm} />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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