// Variation 1 — EDITORIAL MAGAZINE
// Dense serif type, asymmetric grid, warm ivory + deep navy + gold.

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

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

  const palette = {
    bg: "#F8F6F2", fg: "#1a1814", ink: accent,
    muted: "#6a6256", line: "rgba(10,14,26,0.14)",
    highlight, dark: accent, ivory: "#F8F6F2",
  };
  const fontVars = {
    "--vw-display": `'${serifFont}', 'Cormorant Garamond', serif`,
    "--vw-body-font": "'Inter', sans-serif",
  };

  const L = (k) => ({
    pl: {
      scroll: "Przewiń", explore: "Zobacz prace",
      portfolio: "Portfolio", selected: "Wybrane realizacje",
      featured: "Wybrany projekt", about: "O mnie",
      services: "Usługi", clients: "Klienci",
      process: "Jak pracuję", contact: "Kontakt",
      filter_lead: "Kategoria —",
      intro_eyebrow: "— Manifest",
    },
    en: {
      scroll: "Scroll", explore: "See work",
      portfolio: "Portfolio", selected: "Selected work",
      featured: "Featured project", about: "About",
      services: "Services", clients: "Clients",
      process: "Process", contact: "Contact",
      filter_lead: "Category —",
      intro_eyebrow: "— Manifesto",
    }
  }[lang][k]);

  // Parallax hero
  const heroImgRef = useRef(null);
  useEffect(() => {
    const el = frameRef.current;
    if (!el) return;
    const onScroll = () => {
      const y = el.scrollTop;
      if (heroImgRef.current) {
        heroImgRef.current.style.transform = `translateY(${Math.min(y * 0.3, 300)}px) scale(${1 + Math.min(y * 0.0002, 0.08)})`;
      }
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <ProtoFrame
      cursorStyle={cursorStyle}
      accent={accent}
      palette={palette}
      fontVars={fontVars}
      className="vw-editorial"
      label="Editorial Magazine"
    >
      <style>{`
        .vw-editorial { --vw-accent: ${accent}; --vw-hl: ${highlight}; }
        .vw-editorial .vw-display { font-family: var(--vw-display); font-weight: 400; letter-spacing: -0.02em; }
        .vw-editorial .vw-display-it { font-family: var(--vw-display); font-weight: 300; font-style: italic; letter-spacing: -0.01em; }
        .vw-editorial .vw-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vw-muted); }
        .vw-editorial .vw-section { padding: 140px clamp(32px, 6vw, 100px); }
        .vw-editorial .vw-rule { height: 1px; background: var(--vw-line); }
        .vw-editorial .vw-chip { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--vw-line); border-radius: 999px; color: var(--vw-fg); background: transparent; cursor: pointer; transition: all .25s; }
        .vw-editorial .vw-chip:hover { border-color: var(--vw-accent); color: var(--vw-accent); }
        .vw-editorial .vw-chip[data-active="1"] { background: var(--vw-accent); color: #fff; border-color: var(--vw-accent); }
        .vw-editorial .vw-card-hover { cursor: pointer; transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s; }
        .vw-editorial .vw-card-hover:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 24px 56px rgba(10,14,26,0.22); }
        .vw-editorial .vw-card-hover .vw-card-meta { opacity: 0; transform: translateY(10px); transition: all .4s cubic-bezier(.2,.7,.3,1); }
        .vw-editorial .vw-card-hover:hover .vw-card-meta { opacity: 1; transform: translateY(0); }
        .vw-editorial .vw-card-hover .vw-ph img { transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s; }
        .vw-editorial .vw-card-hover:hover .vw-ph img { transform: scale(1.07); filter: brightness(1.06) saturate(1.08); }
        .vw-editorial .vw-link { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vw-fg); text-decoration: none; border-bottom: 1px solid var(--vw-fg); padding-bottom: 2px; transition: all .25s; }
        .vw-editorial .vw-link:hover { color: var(--vw-accent); border-color: var(--vw-accent); }
        .vw-editorial .vw-num { font-family: var(--vw-display); font-weight: 300; line-height: 1; }
        @media (max-width: 640px) {
          .vw-topbar { flex-wrap: wrap; gap: 12px !important; padding: 16px 20px !important; }
          .vw-topbar-logo { font-size: 9px !important; max-width: 120px; }
          .vw-topbar-nav { gap: 14px !important; flex-wrap: wrap; }
          .vw-topbar-copy { display: none !important; }
        }
      `}</style>

      {/* ============ HERO ============ */}
      <section
        ref={frameRef}
        style={{
          position:"relative",
          height: "100vh",
          minHeight: 720,
          overflow: "hidden",
          background: "var(--vw-ink)",
          color: "#fff",
        }}
      >
        <div ref={heroImgRef} style={{ position:"absolute", inset:"-5% -5% -15% -5%", willChange:"transform" }}>
          <video
            autoPlay muted loop playsInline
            style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center", display:"block" }}
          >
            <source src="/public/hero.webm" type="video/webm" />
            <source src="/public/hero.mp4" type="video/mp4" />
          </video>
          <div style={{
            position:"absolute", inset:0,
            background: "linear-gradient(180deg, rgba(10,14,26,0.3) 0%, rgba(10,14,26,0.55) 65%, rgba(10,14,26,0.85) 100%)",
          }}/>
        </div>

        {/* top bar */}
        <div className="vw-topbar" style={{
          position:"relative", display:"flex", alignItems:"center", justifyContent:"space-between",
          padding: "28px clamp(32px, 6vw, 100px)",
          color: "rgba(255,255,255,0.85)",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10, letterSpacing: "0.2em", textTransform:"uppercase",
        }}>
          <span className="vw-topbar-logo">VWP · PORTFOLIO</span>
          <span className="vw-topbar-nav" style={{display:"flex", gap:28}}>
            <a data-cursor="link" href="#portfolio-e" style={{color:"inherit", textDecoration:"none"}}>{L("portfolio")}</a>
            <a data-cursor="link" href="#about-e" style={{color:"inherit", textDecoration:"none"}}>{L("about")}</a>
            <a data-cursor="link" href="#contact-e" style={{color:"inherit", textDecoration:"none"}}>{L("contact")}</a>
          </span>
        </div>

        <div style={{
          position:"absolute", left:"clamp(32px, 6vw, 100px)", right:"clamp(32px, 6vw, 100px)",
          bottom: "12%",
        }}>
          <h1 className="vw-display" style={{
            margin: 0,
            fontSize: "clamp(56px, 10vw, 148px)",
            lineHeight: 0.92,
            letterSpacing: "-0.02em",
            color: "#fff",
          }}>
            <StaggerText text="Vanessa" stagger={45} />
            <br/>
            <span className="vw-display-it" style={{ color: "var(--vw-hl)" }}>
              <StaggerText text="Walczak-Pińska" stagger={30} delay={400} />
            </span>
          </h1>
          <div style={{
            marginTop: 40,
            display:"flex",
            alignItems:"center",
            justifyContent:"space-between",
            gap: 40,
            flexWrap:"wrap",
          }}>
            <p style={{
              margin:0, maxWidth: 440,
              fontFamily:"Inter, sans-serif", fontSize:14, lineHeight:1.6,
              color:"rgba(255,255,255,0.78)",
            }}>{PHOTOGRAPHER.hero_sub[lang]}. Agencja MoonKids Warsaw. Dostępna na sesje zdjęciowe i kampanie reklamowe.</p>
            <a
              href="#portfolio-e"
              data-cursor="explore"
              className="vw-eyebrow"
              style={{
                color:"var(--vw-hl)", textDecoration:"none",
                borderBottom:"1px solid var(--vw-hl)", paddingBottom:6,
              }}>{L("explore")} →</a>
          </div>
        </div>
      </section>

      {/* ============ INTRO STATEMENT ============ */}
      <section className="vw-section" style={{ background:"var(--vw-bg)", paddingTop:180, paddingBottom:180 }}>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 3fr", gap: 60, alignItems:"start" }}>
          <div className="vw-eyebrow">{L("intro_eyebrow")}</div>
          <div>
            <h2 className="vw-display" style={{
              margin: 0,
              fontSize: "clamp(40px, 5.4vw, 84px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
            }}>
              <StaggerText text={PHOTOGRAPHER.tagline[lang]} stagger={15} />
            </h2>
          </div>
        </div>
        <div className="vw-rule" style={{ marginTop: 100, marginBottom: 60 }} />
        <div style={{
          display:"grid",
          gridTemplateColumns:"repeat(3, 1fr)",
          gap: 60,
        }}>
          {PHOTOGRAPHER.counters.map((c, i) => (
            <InView key={i} delay={i * 120} rootRef={frameRef}>
              <div className="vw-num" style={{ fontSize: "clamp(64px, 9vw, 136px)", marginBottom: 12 }}>
                <CounterUp to={c.n} suffix={c.suffix} />
              </div>
              <div className="vw-eyebrow">{c.label[lang]}</div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ PORTFOLIO GRID ============ */}
      <section id="portfolio-e" className="vw-section" style={{ background:"var(--vw-bg)", paddingTop:40 }}>
        <div style={{ display:"flex", alignItems:"end", justifyContent:"space-between", marginBottom: 60, gap: 40, flexWrap:"wrap" }}>
          <div>
            <div className="vw-eyebrow" style={{ marginBottom: 16 }}>{L("portfolio")} / 2026</div>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(48px, 6vw, 96px)", lineHeight:1 }}>
              {L("selected")}
            </h2>
          </div>
          <div style={{ display:"flex", gap: 8, flexWrap:"wrap" }}>
            {CATEGORIES.map((c) => (
              <button
                key={c.id}
                data-cursor="filter"
                data-active={filter === c.id ? "1" : "0"}
                onClick={() => setFilter(c.id)}
                className="vw-chip"
              >{c[lang]}</button>
            ))}
          </div>
        </div>

        <div style={{
          columnCount: gridCols,
          columnGap: 20,
        }}>
          {filtered.map((item, i) => (
            <InView key={item.id} delay={Math.min(i % 8, 7) * 65} y={24}>
              <div
                className="vw-card-hover"
                data-cursor="view"
                onClick={() => setLightbox(i)}
                style={{ breakInside:"avoid", marginBottom: 20, position:"relative", overflow:"hidden", borderRadius: 2 }}
              >
                <Photo item={item} style="grad" />
                <div className="vw-card-meta" style={{
                  position:"absolute", left:0, right:0, bottom:0,
                  padding:"20px", color:"#fff",
                  background:"linear-gradient(180deg, transparent, rgba(10,14,26,0.88))",
                }}>
                  <div className="vw-display-it" style={{ fontSize: 22, marginBottom: 4 }}>{item.title[lang]}</div>
                  <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", opacity:0.75 }}>{item.client} · {item.id.toUpperCase()}</div>
                </div>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ ABOUT ============ */}
      <section id="about-e" className="vw-section" style={{ background:"var(--vw-bg)", paddingBottom: 40 }}>
        <div style={{ display:"grid", gridTemplateColumns:"5fr 6fr", gap: 100, alignItems:"start" }}>
          <InView rootRef={frameRef}>
            <Photo item={{ id:"VWP", title:{pl:"Vanessa Walczak-Pińska"}, client:"PORTRET", tone:"a", aspect:"4/5" }} style="grad" />
          </InView>
          <div>
            <div className="vw-eyebrow" style={{ marginBottom: 28 }}>{L("about")} / VWP</div>
            <h2 className="vw-display" style={{ margin: 0, fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1.05 }}>
              Mała modelka, <em className="vw-display-it">wielka</em> osobowość.
            </h2>
            <div className="vw-rule" style={{ margin: "48px 0" }}/>
            <p style={{ fontSize: 17, lineHeight: 1.7, color:"var(--vw-fg)", margin:0, maxWidth: 560 }}>
              {PHOTOGRAPHER.bio[lang]}
            </p>
            <div style={{ marginTop: 48, display:"grid", gap: 20 }}>
              <div>
                <div className="vw-eyebrow" style={{ marginBottom: 8 }}>Agencja</div>
                <a href={PHOTOGRAPHER.agency.url} target="_blank" rel="noopener" style={{ fontFamily:"var(--vw-display)", fontSize: 22, color:"var(--vw-fg)", textDecoration:"none" }}>
                  {PHOTOGRAPHER.agency.name}
                </a>
              </div>
              <div>
                <div className="vw-eyebrow" style={{ marginBottom: 8 }}>Instagram</div>
                <a href={PHOTOGRAPHER.agency.instagram} target="_blank" rel="noopener" style={{ fontFamily:"var(--vw-display)", fontSize: 18, color:"var(--vw-hl)", textDecoration:"none" }}>
                  @moonkids_warsaw
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ CLIENTS + TESTIMONIALS ============ */}
      <section style={{ background:"var(--vw-bg)", padding: "60px 0 100px" }}>
        <div className="vw-eyebrow" style={{ marginBottom: 24, textAlign:"center" }}>{L("clients")}</div>
        <Marquee
          items={CLIENT_LOGOS}
          speed={22}
          separator="◆"
          pauseOnHover
        />
        <div style={{ height: 80 }} />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 60 }}>
          {TESTIMONIALS.map((t, i) => (
            <InView key={i} rootRef={frameRef} delay={i*120}>
              <figure style={{ margin:0 }}>
                <div className="vw-display-it" style={{ fontSize: "clamp(64px, 6vw, 92px)", lineHeight: 0.6, color:"var(--vw-hl)" }}>“</div>
                <blockquote className="vw-display" style={{ margin:"10px 0 28px", fontSize: 22, lineHeight:1.4, fontStyle:"italic", fontWeight:300 }}>
                  {t.quote[lang]}
                </blockquote>
                <figcaption>
                  <div style={{ fontWeight: 500, fontSize: 13 }}>{t.name}</div>
                  <div className="vw-eyebrow" style={{ marginTop: 4 }}>{t.role[lang]}</div>
                </figcaption>
              </figure>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ CONTACT ============ */}
      <section id="contact-e" className="vw-section" style={{
        background: "#fff", color:"var(--vw-fg)", paddingTop: 160, paddingBottom: 60
      }}>
        <div style={{ display:"grid", gridTemplateColumns:"1fr", gap: 100, maxWidth: 680 }}>
          <div>
            <div className="vw-eyebrow" style={{ color:"var(--vw-muted)", marginBottom: 28 }}>
              {L("contact")} / 2026
            </div>
            <h2 className="vw-display" style={{ margin: 0, fontSize:"clamp(56px, 7vw, 120px)", lineHeight: 0.95 }}>
              Kontakt przez <em className="vw-display-it" style={{ color:"var(--vw-hl)" }}>agencję.</em>
            </h2>
            <div className="vw-rule" style={{ margin:"48px 0" }}/>
            <div style={{ display:"grid", gap: 24 }}>
              <div>
                <div className="vw-eyebrow" style={{ color:"var(--vw-muted)", marginBottom:6 }}>Agencja</div>
                <a href={PHOTOGRAPHER.agency.url} target="_blank" rel="noopener" className="vw-display" style={{ color:"var(--vw-fg)", fontSize: 28, textDecoration:"none" }}>{PHOTOGRAPHER.agency.name}</a>
              </div>
              <div>
                <div className="vw-eyebrow" style={{ color:"var(--vw-muted)", marginBottom:6 }}>Email</div>
                <a data-cursor="copy" href={`mailto:${PHOTOGRAPHER.email}`} className="vw-display-it" style={{ color:"var(--vw-hl)", fontSize: 24, textDecoration:"none" }}>{PHOTOGRAPHER.email}</a>
              </div>
              <div>
                <div className="vw-eyebrow" style={{ color:"var(--vw-muted)", marginBottom:6 }}>Instagram</div>
                <a href={PHOTOGRAPHER.agency.instagram} target="_blank" rel="noopener" style={{color:"var(--vw-fg)", textDecoration:"none", fontSize:14, letterSpacing:"0.14em"}}> @moonkids_warsaw ↗</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer style={{
        background:"#fff", color:"rgba(10,14,26,0.5)",
        padding:"40px clamp(32px, 6vw, 100px)",
        borderTop:"1px solid rgba(10,14,26,0.1)",
        display:"flex", justifyContent:"space-between", alignItems:"center",
        fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase",
      }}>
        <span>© 2026 Vanessa Walczak-Pińska</span>
        <a href={PHOTOGRAPHER.agency.url} target="_blank" rel="noopener" style={{ color:"rgba(10,14,26,0.5)", textDecoration:"none" }}>MoonKids Agency</a>
        <a data-cursor="top" href="#top" onClick={(e) => { e.preventDefault(); frameRef.current?.scrollTo({top:0, behavior:"smooth"}); document.querySelector(".vw-editorial")?.scrollTo({top:0, behavior:"smooth"}); }} style={{ color:"inherit", textDecoration:"none" }}>↑ Back to top</a>
      </footer>

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

window.VariationEditorial = VariationEditorial;