// Variation 2 — DARK CINEMATIC
// Moody black background, gold highlight, large centered imagery, big serif hero.

function VariationCinematic({ lang = "pl", cursorStyle = "circle", accent = "#C9A96E", highlight = "#C9A96E", gridCols = 3, serifFont = "Fraunces", darkContactFirst = false }) {
  const [filter, setFilter] = useState("all");
  const [lightbox, setLightbox] = useState(null);
  const frameRef = useRef(null);
  const heroRef = useRef(null);

  const filtered = useMemo(() =>
    filter === "all" ? PORTFOLIO_ITEMS : PORTFOLIO_ITEMS.filter(p => p.cat === filter),
    [filter]
  );

  const palette = {
    bg: "#0a0a0a", fg: "rgba(255,255,255,0.92)", ink: "#0a0a0a",
    muted: "rgba(255,255,255,0.5)", line: "rgba(255,255,255,0.12)",
    highlight, dark: "#050505", ivory: "#1a1a1a",
  };
  const fontVars = {
    "--vw-display": `'${serifFont}', 'Fraunces', serif`,
    "--vw-body-font": "'Inter Tight', 'Inter', sans-serif",
  };

  const L = (k) => ({
    pl: { explore:"Zobacz portfolio", portfolio:"Portfolio", about:"O mnie", services:"Usługi", contact:"Kontakt", process:"Proces", clients:"Klienci", featured:"Realizacja", selected:"Wybór z archiwum" },
    en: { explore:"See portfolio", portfolio:"Portfolio", about:"About", services:"Services", contact:"Contact", process:"Process", clients:"Clients", featured:"Featured", selected:"From the archive" },
  }[lang][k]);

  // Parallax
  useEffect(() => {
    const el = frameRef.current;
    if (!el) return;
    const onScroll = () => {
      const y = el.scrollTop;
      if (heroRef.current) heroRef.current.style.transform = `translateY(${y * 0.4}px)`;
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <ProtoFrame
      cursorStyle={cursorStyle}
      accent={accent}
      palette={palette}
      fontVars={fontVars}
      className="vw-cinematic"
      label="Dark Cinematic"
    >
      <style>{`
        .vw-cinematic { --vw-hl: ${highlight}; }
        .vw-cinematic .vw-display { font-family: var(--vw-display); font-weight: 400; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; }
        .vw-cinematic .vw-display-it { font-family: var(--vw-display); font-weight: 300; font-style: italic; }
        .vw-cinematic .vw-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vw-hl); }
        .vw-cinematic .vw-section { padding: 160px clamp(32px, 6vw, 100px); }
        .vw-cinematic .vw-rule { height: 1px; background: var(--vw-line); }
        .vw-cinematic .vw-chip { font-family:'Inter Tight',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:12px 22px; border:1px solid var(--vw-line); border-radius:0; color:rgba(255,255,255,0.6); background:transparent; cursor:pointer; transition:all .3s; }
        .vw-cinematic .vw-chip:hover { color:#fff; border-color: var(--vw-hl); }
        .vw-cinematic .vw-chip[data-active="1"] { color:#0a0a0a; background: var(--vw-hl); border-color: var(--vw-hl); }
        .vw-cinematic .vw-card { position:relative; overflow:hidden; cursor:pointer; }
        .vw-cinematic .vw-card .vw-ph { transition: transform .9s cubic-bezier(.19,1,.22,1), filter .5s; }
        .vw-cinematic .vw-card:hover .vw-ph { transform: scale(1.06); filter: saturate(1.15) brightness(1.05); }
        .vw-cinematic .vw-card-meta { position:absolute; left:24px; bottom:24px; right:24px; color:#fff; opacity:0; transform:translateY(14px); transition: all .5s cubic-bezier(.2,.7,.3,1); z-index:2; }
        .vw-cinematic .vw-card:hover .vw-card-meta { opacity:1; transform: translateY(0); }
        .vw-cinematic .vw-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7)); opacity:0; transition:opacity .5s; z-index:1; }
        .vw-cinematic .vw-card:hover::after { opacity:1; }
      `}</style>

      {/* ============ HERO ============ */}
      <section style={{ position:"relative", height:"100vh", minHeight: 760, overflow:"hidden", background:"#000" }}>
        <div ref={heroRef} style={{ position:"absolute", inset:"-10% -5% -20% -5%", willChange:"transform" }}>
          <Photo item={{ id:"COVER", title:{pl:"Okładka"}, client:"", tone:"a" }} style="duotone" inset={{ width:"100%", height:"100%" }}/>
          <div style={{ position:"absolute", inset:0, background:"radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 90%)" }}/>
          <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.6))" }}/>
        </div>

        {/* Top nav */}
        <div style={{ position:"relative", display:"flex", justifyContent:"space-between", alignItems:"center",
          padding:"32px clamp(32px, 6vw, 100px)", color:"#fff" }}>
          <div className="vw-display" style={{ fontSize: 20, letterSpacing:"-0.01em" }}>
            V<span style={{color:"var(--vw-hl)"}}>·</span>W-P
          </div>
          <nav style={{ display:"flex", gap: 32, fontFamily:"'Inter Tight', sans-serif", fontSize:12, letterSpacing:"0.2em", textTransform:"uppercase" }}>
            <a data-cursor="link" href="#portfolio-c" style={{color:"inherit", textDecoration:"none"}}>{L("portfolio")}</a>
            <a data-cursor="link" href="#about-c" style={{color:"inherit", textDecoration:"none"}}>{L("about")}</a>
            <a data-cursor="link" href="#services-c" style={{color:"inherit", textDecoration:"none"}}>{L("services")}</a>
            <a data-cursor="link" href="#contact-c" style={{color:"inherit", textDecoration:"none"}}>{L("contact")}</a>
          </nav>
        </div>

        {/* Center title */}
        <div style={{
          position:"absolute", inset:0, display:"flex", flexDirection:"column",
          alignItems:"center", justifyContent:"center", textAlign:"center",
          color:"#fff", padding: "0 6vw",
        }}>
          <div style={{ display:"flex", alignItems:"center", gap: 20, marginBottom: 32 }}>
            <span style={{ width:48, height:1, background:"var(--vw-hl)"}}/>
            <span className="vw-eyebrow">Corporate Photography — {PHOTOGRAPHER.locations}</span>
            <span style={{ width:48, height:1, background:"var(--vw-hl)"}}/>
          </div>
          <h1 className="vw-display" style={{
            margin: 0,
            fontSize: "clamp(64px, 11vw, 180px)",
            lineHeight: 0.95,
            letterSpacing:"-0.03em",
          }}>
            <StaggerText text="Vanessa" stagger={50} />
          </h1>
          <h1 className="vw-display-it" style={{
            margin:"-0.05em 0 0", fontSize: "clamp(44px, 8vw, 128px)", color:"var(--vw-hl)",
            lineHeight: 1,
          }}>
            <StaggerText text="Walczak-Pińska" stagger={30} delay={500} />
          </h1>
          <p style={{ marginTop: 40, fontSize: 14, letterSpacing:"0.24em", textTransform:"uppercase", color:"rgba(255,255,255,0.6)" }}>
            Est. 2018 · 120+ clients · {lang==="pl" ? "Cała Europa":"Across Europe"}
          </p>
        </div>

        {/* Scroll hint */}
        <div style={{ position:"absolute", bottom: 40, left: "50%", transform:"translateX(-50%)", color:"rgba(255,255,255,0.6)",
          fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:"0.3em", textTransform:"uppercase" }}>
          ↓ {lang==="pl"?"Przewiń":"Scroll"} ↓
        </div>
      </section>

      {/* ============ INTRO STATEMENT ============ */}
      <section className="vw-section" style={{ paddingTop: 200, paddingBottom: 200, background:"#0a0a0a", textAlign:"center" }}>
        <div className="vw-eyebrow" style={{ marginBottom: 40 }}>— Manifest</div>
        <h2 className="vw-display" style={{
          margin: "0 auto", maxWidth: 1100,
          fontSize:"clamp(44px, 6vw, 96px)", lineHeight:1.08, letterSpacing:"-0.02em",
        }}>
          <StaggerText text={PHOTOGRAPHER.tagline[lang]} stagger={20} />
        </h2>
        <div style={{
          marginTop: 120, display:"grid", gridTemplateColumns:"repeat(3, 1fr)",
          gap: 60, maxWidth: 1000, marginLeft:"auto", marginRight:"auto",
        }}>
          {PHOTOGRAPHER.counters.map((c, i) => (
            <InView key={i} delay={i*120} rootRef={frameRef}>
              <div className="vw-display" style={{ fontSize:"clamp(64px, 8vw, 128px)", lineHeight:1, color:"var(--vw-hl)" }}>
                <CounterUp to={c.n} suffix={c.suffix}/>
              </div>
              <div className="vw-eyebrow" style={{ color:"rgba(255,255,255,0.55)", marginTop: 12 }}>{c.label[lang]}</div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ PORTFOLIO ============ */}
      <section id="portfolio-c" className="vw-section" style={{ paddingTop: 60 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"end", marginBottom: 60, flexWrap:"wrap", gap: 32 }}>
          <div>
            <div className="vw-eyebrow" style={{ marginBottom: 14 }}>{L("selected")}</div>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(44px, 5.5vw, 88px)", lineHeight:1 }}>
              {L("portfolio")}<span style={{color:"var(--vw-hl)"}}>.</span>
            </h2>
          </div>
          <div style={{ display:"flex", gap: 0 }}>
            {CATEGORIES.map((c) => (
              <button key={c.id} data-cursor="filter" className="vw-chip"
                      data-active={filter === c.id ? "1" : "0"}
                      onClick={() => setFilter(c.id)}
                      style={{ marginLeft:-1 }}>{c[lang]}</button>
            ))}
          </div>
        </div>

        <div style={{
          columnCount: gridCols, columnGap: 24,
        }}>
          {filtered.map((item, i) => (
            <div key={item.id} className="vw-card" data-cursor="view"
                 onClick={() => setLightbox(i)}
                 style={{ breakInside:"avoid", marginBottom: 24 }}>
              <Photo item={item} style="duotone" />
              <div className="vw-card-meta">
                <div className="vw-display-it" style={{ fontSize: 24 }}>{item.title[lang]}</div>
                <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:"0.24em", textTransform:"uppercase", color:"var(--vw-hl)", marginTop: 4 }}>{item.client}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ FEATURED ============ */}
      <section className="vw-section" style={{ background:"#050505", paddingTop: 140, paddingBottom: 140 }}>
        <div style={{ textAlign:"center", marginBottom: 80 }}>
          <div className="vw-eyebrow" style={{ marginBottom: 20 }}>{L("featured")} — {FEATURED_PROJECT.year}</div>
          <h2 className="vw-display" style={{ margin: 0, fontSize:"clamp(56px, 7vw, 120px)", lineHeight: 1 }}>
            {FEATURED_PROJECT.client}
          </h2>
        </div>
        <div style={{ display:"flex", gap: 20, overflowX:"auto", scrollSnapType:"x mandatory",
          margin:"0 -100px", paddingLeft:"clamp(32px, 6vw, 100px)", paddingRight:"clamp(32px, 6vw, 100px)" }}>
          {FEATURED_PROJECT.frames.map((f, i) => (
            <div key={f.id} style={{ flex:"0 0 auto", width: f.aspect==="16/9"?680:(f.aspect==="4/5"?400:560), scrollSnapAlign:"start" }}>
              <Photo item={{ ...f, title: f.label, client:"", tone:f.tone }} style="duotone" aspect={f.aspect}/>
            </div>
          ))}
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 80, marginTop: 80, maxWidth: 1100, marginLeft:"auto", marginRight:"auto" }}>
          <p style={{ fontSize:16, lineHeight:1.7, color:"rgba(255,255,255,0.75)" }}>{FEATURED_PROJECT.brief[lang]}</p>
          <p style={{ fontSize:16, lineHeight:1.7, color:"rgba(255,255,255,0.55)" }}><em className="vw-display-it" style={{color:"var(--vw-hl)"}}>Efekt — </em>{FEATURED_PROJECT.outcome[lang]}</p>
        </div>
      </section>

      {/* ============ ABOUT ============ */}
      <section id="about-c" className="vw-section">
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 80, alignItems:"center" }}>
          <InView rootRef={frameRef}>
            <Photo item={{ id:"VWP", title:{pl:"Autoportret"}, client:"VWP", tone:"a", aspect:"4/5" }} style="duotone"/>
          </InView>
          <div>
            <div className="vw-eyebrow" style={{ marginBottom: 24 }}>— {L("about")}</div>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(40px, 5vw, 84px)", lineHeight:1.02 }}>
              {lang==="pl" ? <>Widzę <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>człowieka</em>, zanim wycelujesz aparat.</> : <>I see the <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>person</em> before the camera focuses.</>}
            </h2>
            <div className="vw-rule" style={{ margin:"40px 0" }}/>
            <p style={{ fontSize: 17, lineHeight:1.7, color:"rgba(255,255,255,0.75)", margin:0 }}>
              {PHOTOGRAPHER.bio[lang]}
            </p>
          </div>
        </div>
      </section>

      {/* ============ SERVICES ============ */}
      <section id="services-c" className="vw-section" style={{ background:"#050505" }}>
        <div style={{ textAlign:"center", marginBottom: 80 }}>
          <div className="vw-eyebrow" style={{ marginBottom: 16 }}>— {L("services")}</div>
          <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(48px, 6vw, 96px)", lineHeight:1 }}>
            {lang==="pl" ? <>Trzy <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>pakiety</em>.</> : <>Three <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>packages</em>.</>}
          </h2>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 24 }}>
          {SERVICES.map((s, i) => (
            <InView key={i} rootRef={frameRef} delay={i*120}>
              <div
                data-cursor="select"
                style={{
                  border:`1px solid ${s.featured ? "var(--vw-hl)" : "var(--vw-line)"}`,
                  padding: "48px 32px",
                  transition:"all .4s",
                  cursor:"pointer", height: "100%",
                  display:"flex", flexDirection:"column",
                  background: s.featured ? "rgba(201,169,110,0.04)" : "transparent",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-8px)"; e.currentTarget.style.borderColor = "var(--vw-hl)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.borderColor = s.featured ? "var(--vw-hl)" : "var(--vw-line)"; }}
              >
                <div className="vw-eyebrow" style={{ marginBottom: 28 }}>0{i+1}{s.featured ? " · Flagship" : ""}</div>
                <h3 className="vw-display" style={{ fontSize: 36, margin: 0, lineHeight:1.05 }}>{s.name[lang]}</h3>
                <p style={{ marginTop: 18, marginBottom: 28, fontSize: 14, lineHeight:1.65, color:"rgba(255,255,255,0.65)" }}>{s.scope[lang]}</p>
                <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"grid", gap: 12 }}>
                  {s.bullets[lang].map((b, bi) => (
                    <li key={bi} style={{ fontSize:13, color:"rgba(255,255,255,0.85)", display:"flex", gap:10 }}>
                      <span style={{color:"var(--vw-hl)"}}>◆</span>{b}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop:"auto", paddingTop: 32, borderTop:"1px solid var(--vw-line)" }}>
                  <div className="vw-display" style={{ fontSize: 28, color:"var(--vw-hl)" }}>{s.price[lang]}</div>
                </div>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ CLIENTS MARQUEE + TESTIMONIALS ============ */}
      <section className="vw-section" style={{ paddingTop: 140 }}>
        <Marquee items={CLIENT_LOGOS} speed={60} separator="◆" className="vw-display" />
        <div style={{ height: 140 }}/>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 40 }}>
          {TESTIMONIALS.map((t, i) => (
            <InView key={i} rootRef={frameRef} delay={i*120}>
              <div style={{ border:"1px solid var(--vw-line)", padding: "40px 32px", height:"100%" }}>
                <div className="vw-display-it" style={{ fontSize:60, lineHeight:0.5, color:"var(--vw-hl)", marginBottom: 16 }}>“</div>
                <blockquote className="vw-display-it" style={{ margin:"0 0 32px", fontSize:20, lineHeight:1.45, color:"rgba(255,255,255,0.88)" }}>
                  {t.quote[lang]}
                </blockquote>
                <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 13, fontWeight:500 }}>{t.name}</div>
                <div className="vw-eyebrow" style={{ color:"rgba(255,255,255,0.5)", marginTop:4 }}>{t.role[lang]}</div>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ PROCESS ============ */}
      <section className="vw-section" style={{ background:"#050505" }}>
        <div style={{ textAlign:"center", marginBottom: 80 }}>
          <div className="vw-eyebrow" style={{ marginBottom: 16 }}>— {L("process")}</div>
          <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(44px, 5.5vw, 88px)", lineHeight:1 }}>
            {lang==="pl" ? "Pięć kroków." : "Five steps."}
          </h2>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap: 24 }}>
          {PROCESS_STEPS.map((step, i) => (
            <InView key={i} rootRef={frameRef} delay={i*80}>
              <div style={{ padding:"24px 0", borderTop:"1px solid var(--vw-hl)" }}>
                <div className="vw-display" style={{ fontSize: 48, color:"var(--vw-hl)", marginBottom: 20 }}>{step.n}</div>
                <h3 className="vw-display" style={{ margin:0, fontSize: 22, marginBottom: 12 }}>{step.title[lang]}</h3>
                <p style={{ margin:0, fontSize: 13, lineHeight: 1.6, color:"rgba(255,255,255,0.6)" }}>{step.desc[lang]}</p>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ CONTACT ============ */}
      <section id="contact-c" className="vw-section" style={{ paddingTop: 140 }}>
        <div style={{ textAlign:"center", marginBottom: 80 }}>
          <div className="vw-eyebrow" style={{ marginBottom: 20 }}>— {L("contact")}</div>
          <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(72px, 10vw, 180px)", lineHeight:0.92 }}>
            {lang==="pl" ? <>Pracujmy <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>razem.</em></> : <>Let's work <em className="vw-display-it" style={{color:"var(--vw-hl)"}}>together.</em></>}
          </h2>
        </div>
        <div style={{ maxWidth: 780, margin:"0 auto" }}>
          <ContactForm lang={lang} accent={highlight} tone="dark" />
        </div>
        <div style={{ textAlign:"center", marginTop: 80, display:"flex", gap: 48, justifyContent:"center", flexWrap:"wrap" }}>
          <a data-cursor="copy" href={`mailto:${PHOTOGRAPHER.email}`} className="vw-display-it" style={{color:"var(--vw-hl)", fontSize: 28, textDecoration:"none" }}>{PHOTOGRAPHER.email}</a>
          <span className="vw-display" style={{color:"rgba(255,255,255,0.8)", fontSize: 22}}>{PHOTOGRAPHER.locations}</span>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer style={{
        background:"#050505", borderTop:"1px solid var(--vw-line)",
        padding:"40px clamp(32px, 6vw, 100px)",
        display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap: 16,
        fontFamily:"'JetBrains Mono', monospace", fontSize: 10, letterSpacing:"0.24em", textTransform:"uppercase",
        color:"rgba(255,255,255,0.45)",
      }}>
        <span>© 2026 VWP · All rights reserved</span>
        <div style={{ display:"flex", gap: 32 }}>
          {PHOTOGRAPHER.social.map(s => <a data-cursor="external" key={s.label} href={s.href} style={{color:"inherit", textDecoration:"none"}}>{s.label}</a>)}
        </div>
      </footer>

      {lightbox != null && (
        <Lightbox
          items={filtered} index={lightbox}
          photoStyle="duotone" lang={lang}
          onClose={() => setLightbox(null)}
          onPrev={() => setLightbox((i) => (i - 1 + filtered.length) % filtered.length)}
          onNext={() => setLightbox((i) => (i + 1) % filtered.length)}
        />
      )}
    </ProtoFrame>
  );
}

window.VariationCinematic = VariationCinematic;