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

const { useState, useEffect, useRef, useCallback } = React;

// ---------- Imagery ----------
const IMG = {
  hero:     "https://images.unsplash.com/photo-1519741497674-611481863552?w=1800&q=80&auto=format&fit=crop",
  heroAlt:  "https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=1800&q=80&auto=format&fit=crop",
  portrait: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&q=80&auto=format&fit=crop",
  still1: "https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=900&q=80&auto=format&fit=crop",
  still2: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=900&q=80&auto=format&fit=crop",
  still3: "https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=900&q=80&auto=format&fit=crop",
  still4: "https://images.unsplash.com/photo-1525772764200-be829a350797?w=900&q=80&auto=format&fit=crop",
  still5: "https://images.unsplash.com/photo-1532712938310-34cb3982ef74?w=900&q=80&auto=format&fit=crop",
  still6: "https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=900&q=80&auto=format&fit=crop",
};

const FILMS = [
  { id: 1, couple: "Kelly & Ethan",    venue: "Crystal Springs Resort", location: "Hamburg, NJ",      season: "Autumn 2025", tier: "highlight",    runtime: "4 min",  thumb: IMG.still1 },
  { id: 2, couple: "Zhenya & Preston", venue: "Hudson Valley estate",   location: "Garrison, NY",     season: "Summer 2025", tier: "feature",      runtime: "12 min", thumb: IMG.still2 },
  { id: 3, couple: "Ksenia & David",   venue: "Mountain elopement",     location: "Stowe, Vermont",   season: "Winter 2025", tier: "documentary",  runtime: "35 min", thumb: IMG.still3 },
  { id: 4, couple: "Mary & Kory",      venue: "Beachside ceremony",     location: "Cape May, NJ",     season: "Summer 2025", tier: "feature",      runtime: "10 min", thumb: IMG.still4 },
  { id: 5, couple: "Sarah & Ryan",     venue: "Liberty House",          location: "Jersey City, NJ",  season: "Autumn 2024", tier: "highlight",    runtime: "5 min",  thumb: IMG.still5 },
  { id: 6, couple: "Chloe & Chad",     venue: "Mountain retreat",       location: "Greenville, SC",   season: "Spring 2025", tier: "feature",      runtime: "14 min", thumb: IMG.still6 },
];

const TIER_LABEL = { highlight: "Highlight", feature: "Feature", documentary: "Documentary" };

// ============================================================
// ATOMS
// ============================================================
function Eyebrow({ children, light, className = "", style }) {
  return <div className={(light ? "eyebrow-light " : "eyebrow ") + className} style={style}>{children}</div>;
}

function Btn({ children, variant = "outline", onClick, type, style, className = "" }) {
  const cls = "btn" + (variant === "light" ? " btn-light" : variant === "filled" ? " btn-filled" : "");
  return (
    <a className={cls + " " + className} onClick={onClick} style={style} type={type}>
      {children}<span>&rarr;</span>
    </a>
  );
}

function BtnText({ children, onClick, light, className = "" }) {
  const cls = "btn-text" + (light ? " btn-text-light" : "");
  return <a className={cls + " " + className} onClick={onClick}>{children}<span>&rarr;</span></a>;
}

function Reveal({ delay = 0, children, className = "" }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current || seen) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [seen]);
  return (
    <div ref={ref} className={"reveal " + (seen ? "visible " : "") + className} style={{ transitionDelay: `${delay}s` }}>
      {children}
    </div>
  );
}

// ============================================================
// NAV + FOOTER
// ============================================================
function Nav({ current, go }) {
  const [shrunk, setShrunk] = useState(false);
  useEffect(() => {
    const onScroll = () => setShrunk(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const link = (key, label) => (
    <li><a className={current === key ? "active" : ""} onClick={() => go(key)}>{label}</a></li>
  );
  return (
    <nav className={"nav" + (shrunk ? " shrunk" : "")}>
      <div className="nav-inner">
        <a className="nav-brand" onClick={() => go("home")}>Peter Dziedzic Films</a>
        <ul className="nav-links">
          {link("films", "Films")}
          {link("experience", "Experience")}
          {link("investment", "Investment")}
          {link("inquire", "Inquire")}
        </ul>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div>
            <div className="footer-brand">Peter Dziedzic Films</div>
            <p className="footer-tagline">Cinematic wedding films for couples who want to relive the day, not just remember it. Based in New Jersey, serving the East Coast and destinations beyond.</p>
          </div>
          <div className="footer-col">
            <h4>Explore</h4>
            <ul>
              <li><a onClick={() => go("films")}>Films</a></li>
              <li><a onClick={() => go("experience")}>Experience</a></li>
              <li><a onClick={() => go("investment")}>Investment</a></li>
              <li><a onClick={() => go("inquire")}>Inquire</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Connect</h4>
            <ul>
              <li><a href="mailto:hello@peterdziedzicfilms.com">Email</a></li>
              <li><a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="https://danielledziedzicphoto.com" target="_blank" rel="noopener">Danielle Dziedzic Photo</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Peter Dziedzic Films</span>
          <span>NJ &middot; East Coast &middot; Destinations</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// HERO VARIANTS (tweakable)
// ============================================================
function HeroFullBleed({ go }) {
  return (
    <section className="hero">
      <img className="hero-image" src={IMG.hero} alt="" />
      <div className="hero-overlay" />
      <div className="hero-grain" />
      <div className="hero-content">
        <div className="hero-eyebrow">Cinematic Wedding Films &middot; NJ &amp; East Coast</div>
        <h1 className="hero-title">Relive your day,<br/>not just remember it</h1>
        <div className="hero-cta">
          <Btn variant="light" onClick={() => go("films")}>Watch the Reel</Btn>
        </div>
      </div>
      <div className="hero-scroll">
        <span>Scroll</span>
        <div className="hero-scroll-line" />
      </div>
    </section>
  );
}

function HeroLetterbox({ go }) {
  return (
    <section className="hero hero-letterbox">
      <img className="hero-image" src={IMG.hero} alt="" style={{ opacity: 0.45 }} />
      <div className="hero-overlay" />
      <div className="hero-grain" />
      <div className="hero-bars top" />
      <div className="hero-bars bot" />
      <div className="hero-titlecard">
        <div className="credit">A Peter Dziedzic Film</div>
        <h1 className="titlecard-title">Relive your day,<br/>not just remember it</h1>
        <div className="titlecard-sub">Cinematic Wedding Films &middot; NJ &middot; East Coast &middot; Destinations</div>
        <div className="titlecard-cta">
          <Btn variant="light" onClick={() => go("films")}>Watch the Reel</Btn>
        </div>
      </div>
      <div className="hero-scroll" style={{ zIndex: 5 }}>
        <span>Scroll</span>
        <div className="hero-scroll-line" />
      </div>
    </section>
  );
}

function HeroSplit({ go }) {
  return (
    <section className="hero-split">
      <div className="hero-split-img">
        <img src={IMG.hero} alt="" />
        <div className="grain" />
      </div>
      <div className="hero-split-text">
        <div className="eyebrow">Cinematic Wedding Films</div>
        <h1>Films you&rsquo;ll actually rewatch &mdash; warm, unhurried, true to how the day felt.</h1>
        <div className="actions">
          <Btn variant="filled" onClick={() => go("films")}>Watch the Reel</Btn>
          <BtnText onClick={() => go("inquire")}>Begin Inquiry</BtnText>
        </div>
      </div>
    </section>
  );
}

function HeroType({ go }) {
  return (
    <section className="hero-type">
      <div className="hero-type-inner">
        <div className="hero-type-eyebrow">Peter Dziedzic Films &middot; Est. 2018</div>
        <h1>Relive your day,<br/>not just remember it.</h1>
        <div className="hero-type-cta">
          <Btn variant="filled" onClick={() => go("films")}>Watch the Reel</Btn>
        </div>
        <div className="hero-type-meta">
          <span>Cinematic Wedding Films</span>
          <span>NJ &middot; East Coast</span>
          <span>Destinations Worldwide</span>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant = "fullbleed", go }) {
  if (variant === "letterbox") return <HeroLetterbox go={go} />;
  if (variant === "split")     return <HeroSplit go={go} />;
  if (variant === "type")      return <HeroType go={go} />;
  return <HeroFullBleed go={go} />;
}

// ============================================================
// PAGE HEADER
// ============================================================
function PageHeader({ eyebrow, title, lede }) {
  return (
    <header className="page-header">
      <div className="eyebrow">{eyebrow}</div>
      <h1 className="display-lg">{title}</h1>
      {lede && <p className="lede">{lede}</p>}
    </header>
  );
}

// ============================================================
// FILM CARD + MODAL
// ============================================================
function FilmCard({ film, onClick }) {
  return (
    <a className="film-card" data-tier={film.tier} onClick={onClick}>
      <div className="film-thumb">
        <img src={film.thumb} alt={film.couple} />
        <div className="film-play" />
        <div className="film-tier">{TIER_LABEL[film.tier]} &middot; {film.runtime}</div>
      </div>
      <div className="film-couple">{film.couple}</div>
      <div className="film-meta">{film.venue} &middot; {film.location}</div>
    </a>
  );
}

function FilmModal({ film, onClose, onPrev, onNext }) {
  useEffect(() => {
    if (!film) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [film, onClose, onPrev, onNext]);
  return (
    <div className={"film-modal" + (film ? " open" : "")} onClick={onClose}>
      <div className="film-modal-inner" onClick={(e) => e.stopPropagation()}>
        <div className="film-modal-close" onClick={onClose}>Close <span>&times;</span></div>
        <div className="film-modal-nav prev" onClick={onPrev}>&larr; Prev</div>
        <div className="film-modal-nav next" onClick={onNext}>Next &rarr;</div>
        <div className="film-modal-frame">
          {film && <img src={film.thumb} alt={film.couple} />}
          <div className="film-modal-play" />
        </div>
        {film && (
          <div className="film-modal-meta">
            <div className="couple">{film.couple}</div>
            <dl><dt>Venue</dt><dd>{film.venue}</dd></dl>
            <dl><dt>Season</dt><dd>{film.season}</dd></dl>
            <dl><dt>Length</dt><dd>{TIER_LABEL[film.tier]} &middot; {film.runtime}</dd></dl>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// PROCESS / VALUE / TESTIMONIAL
// ============================================================
function ProcessStep({ n, title, children }) {
  return (
    <div className="process-step">
      <span className="process-number">{n}</span>
      <div className="process-divider" />
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}

function Value({ mark, title, children }) {
  return (
    <div className="value">
      <div className="value-mark">{mark}</div>
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}

function Testimonial({ quote, author }) {
  return (
    <div className="testimonial">
      <div className="testimonial-mark">&ldquo;</div>
      <p className="testimonial-quote">{quote}</p>
      <div className="testimonial-author">{author}</div>
    </div>
  );
}

// ============================================================
// TIER CARD (with price-hiding support)
// ============================================================
function TierCard({ name, tagline, price, badge, featured, includes, ctaLabel = "Inquire", onCta, hidePrice }) {
  return (
    <div className={"tier" + (featured ? " tier-featured" : "")}>
      {badge && <div className="tier-badge">{badge}</div>}
      <div className="tier-name">{name}</div>
      <div className="tier-tagline">{tagline}</div>
      {hidePrice ? (
        <>
          <div className="tier-price" style={{ fontSize: '1.15rem' }}>Investment shared upon inquiry</div>
          <div className="tier-price-note">&nbsp;</div>
        </>
      ) : (
        <>
          <div className="tier-price">{price}</div>
          <div className="tier-price-note">Starting Investment</div>
        </>
      )}
      <div className="tier-divider" />
      <div className="tier-includes">
        <h4>Includes</h4>
        <ul>{includes.map((line, i) => <li key={i}>{line}</li>)}</ul>
      </div>
      <div className="tier-cta">
        <Btn variant={featured ? "light" : "outline"} onClick={onCta}>{ctaLabel}</Btn>
      </div>
    </div>
  );
}

// ============================================================
// FAQ ACCORDION
// ============================================================
function FaqList({ items }) {
  const [open, setOpen] = useState(0); // first open by default
  return (
    <div className="faq-accordion">
      {items.map((it, i) => (
        <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-row">
            <h4>{it.q}</h4>
            <div className="faq-toggle">+</div>
          </div>
          <div className="faq-body">
            <div className="faq-body-inner">
              <p>{it.a}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============================================================
// TEAM CTA
// ============================================================
function TeamCta({ go, eyebrow, headline, body, primary, secondary }) {
  return (
    <section className="team-cta">
      <div className="team-cta-grain" />
      <div className="container">
        <Reveal><div className="team-cta-eyebrow">{eyebrow}</div></Reveal>
        <Reveal delay={0.15}><h2 className="team-cta-headline">{headline}</h2></Reveal>
        <Reveal delay={0.3}><p className="team-cta-body">{body}</p></Reveal>
        <Reveal delay={0.45}>
          <div className="team-cta-actions">
            {primary && <Btn variant="light" onClick={primary.onClick}>{primary.label}</Btn>}
            {secondary && <BtnText light onClick={secondary.onClick}>{secondary.label}</BtnText>}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// MULTI-STEP INQUIRY FORM
// ============================================================
function StepForm({ onComplete, prefillPackage }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    you: "", partner: "", email: "", date: "", venue: "",
    pkg: prefillPackage || "", referral: "", note: "",
  });
  useEffect(() => {
    if (prefillPackage) setData(d => ({ ...d, pkg: prefillPackage }));
  }, [prefillPackage]);
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const next = () => setStep(s => Math.min(s + 1, 2));
  const back = () => setStep(s => Math.max(s - 1, 0));
  const submit = (e) => { e.preventDefault(); onComplete(data); };

  const canAdvance0 = data.you && data.partner && data.email;
  const canAdvance1 = data.date;

  const steps = [
    { n: "01", label: "About You" },
    { n: "02", label: "The Day" },
    { n: "03", label: "Your Vision" },
  ];

  return (
    <form onSubmit={submit}>
      <div className="form-progress">
        {steps.map((s, i) => (
          <React.Fragment key={s.n}>
            <div className={"step" + (step === i ? " active" : step > i ? " done" : "")}>
              <span className="step-num">{s.n}</span>
              <span>{s.label}</span>
            </div>
            {i < steps.length - 1 && <div className="step-line" />}
          </React.Fragment>
        ))}
      </div>

      {step === 0 && (
        <div className="form-step">
          <h3>First, the basics.</h3>
          <p className="step-sub">Just so I know who to write back to.</p>
          <div className="form-row">
            <div className="form-field">
              <label>Your Name <span className="required">*</span></label>
              <input type="text" placeholder="First and last" value={data.you} onChange={(e) => set("you", e.target.value)} required />
            </div>
            <div className="form-field">
              <label>Partner&rsquo;s Name <span className="required">*</span></label>
              <input type="text" placeholder="First and last" value={data.partner} onChange={(e) => set("partner", e.target.value)} required />
            </div>
          </div>
          <div className="form-field">
            <label>Email <span className="required">*</span></label>
            <input type="email" placeholder="you@email.com" value={data.email} onChange={(e) => set("email", e.target.value)} required />
          </div>
          <div className="form-actions">
            <a className="form-back hidden">&larr; Back</a>
            <a className={"btn btn-filled" + (canAdvance0 ? "" : " disabled")} onClick={() => canAdvance0 && next()} style={{ opacity: canAdvance0 ? 1 : 0.4, cursor: canAdvance0 ? "pointer" : "not-allowed" }}>
              Continue<span>&rarr;</span>
            </a>
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="form-step">
          <h3>Tell me about the day.</h3>
          <p className="step-sub">A few details so I can check availability.</p>
          <div className="form-field">
            <label>Wedding Date <span className="required">*</span></label>
            <input type="date" value={data.date} onChange={(e) => set("date", e.target.value)} required />
          </div>
          <div className="form-field">
            <label>Venue or Location</label>
            <input type="text" placeholder="If known &mdash; or just a city" value={data.venue} onChange={(e) => set("venue", e.target.value)} />
          </div>
          <div className="form-field">
            <label>Package Interest</label>
            <div className="choice-grid">
              {[
                ["highlight",   "Highlight",   "Up to 6 hrs · 4–5 min"],
                ["feature",     "Feature",     "Up to 9 hrs · 10–14 min"],
                ["documentary", "Documentary", "Full day · 25–40 min"],
                ["bundle",      "Photo + Film", "with Danielle"],
              ].map(([k, label, meta]) => (
                <div key={k} className={"choice" + (data.pkg === k ? " selected" : "")} onClick={() => set("pkg", k)}>
                  <div className="choice-label">{label}</div>
                  <div className="choice-meta">{meta}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="form-actions">
            <a className="form-back" onClick={back}><span className="arrow">&rarr;</span> Back</a>
            <a className={"btn btn-filled"} onClick={() => canAdvance1 && next()} style={{ opacity: canAdvance1 ? 1 : 0.4, cursor: canAdvance1 ? "pointer" : "not-allowed" }}>
              Continue<span>&rarr;</span>
            </a>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="form-step">
          <h3>Now the good part.</h3>
          <p className="step-sub">The more you share, the better I can tailor the conversation.</p>
          <div className="form-field">
            <label>Tell Me About Your Day</label>
            <textarea rows="5" placeholder="The kind of wedding you&rsquo;re planning, what&rsquo;s important to you, what films you&rsquo;ve loved &mdash; anything at all." value={data.note} onChange={(e) => set("note", e.target.value)} />
          </div>
          <div className="form-field">
            <label>How Did You Hear About Me?</label>
            <input type="text" placeholder="Instagram, Danielle, a friend, search..." value={data.referral} onChange={(e) => set("referral", e.target.value)} />
          </div>
          <div className="form-actions">
            <a className="form-back" onClick={back}><span className="arrow">&rarr;</span> Back</a>
            <button type="submit" className="btn btn-filled">Send Inquiry<span>&rarr;</span></button>
          </div>
        </div>
      )}
    </form>
  );
}

// ============================================================
// EXPORT TO GLOBAL
// ============================================================
Object.assign(window, {
  React, IMG, FILMS, TIER_LABEL,
  Eyebrow, Btn, BtnText, Reveal,
  Nav, Footer,
  Hero, HeroFullBleed, HeroLetterbox, HeroSplit, HeroType,
  PageHeader, FilmCard, FilmModal,
  ProcessStep, Value, TierCard, FaqList, Testimonial, TeamCta,
  StepForm,
});