// Variation 3 — SWISS ARCHITECTURAL
// Strict grid, monospace accents, clinical whitespace, graphite accent.

function VariationSwiss({ lang = "pl", cursorStyle = "crosshair", accent = "#1C1C1E", highlight = "#C9A96E", gridCols = 4, serifFont = "Fraunces", 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: "#ffffff", fg: "#1C1C1E", ink: "#1C1C1E",
    muted: "#6e6e73", line: "rgba(0,0,0,0.1)",
    highlight, dark: "#1C1C1E", ivory: "#f5f5f5",
  };
  const fontVars = {
    "--vw-display": `'${serifFont}', serif`,
    "--vw-body-font": "'Inter Tight', 'Inter', sans-serif",
    "--vw-mono": "'JetBrains Mono', monospace",
  };

  const L = (k) => ({
    pl: { portfolio:"Portfolio", about:"Biogram", services:"Usługi", contact:"Kontakt", process:"Metoda", clients:"Klienci", featured:"Case study", selected:"Indeks prac" },
    en: { portfolio:"Portfolio", about:"Biography", services:"Services", contact:"Contact", process:"Method", clients:"Clients", featured:"Case study", selected:"Index" },
  }[lang][k]);

  return (
    <ProtoFrame
      cursorStyle={cursorStyle}
      accent={accent}
      palette={palette}
      fontVars={fontVars}
      className="vw-swiss"
      label="Swiss Architectural"
    >
      <style>{`
        .vw-swiss { --vw-hl:${highlight}; }
        .vw-swiss .vw-display { font-family: var(--vw-display); font-weight: 400; letter-spacing: -0.015em; }
        .vw-swiss .vw-mono { font-family: var(--vw-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
        .vw-swiss .vw-section { padding: 120px clamp(24px, 4vw, 72px); border-top: 1px solid var(--vw-line); }
        .vw-swiss .vw-grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
        .vw-swiss .vw-chip { appearance:none; border:0; background:transparent; padding: 6px 12px; font-family: var(--vw-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor:pointer; color: var(--vw-muted); border-left: 2px solid transparent; transition: all .2s; }
        .vw-swiss .vw-chip:hover { color: var(--vw-fg); }
        .vw-swiss .vw-chip[data-active="1"] { color: var(--vw-fg); border-left-color: var(--vw-hl); background: rgba(0,0,0,0.03); }
        .vw-swiss .vw-card { position:relative; cursor:pointer; }
        .vw-swiss .vw-card .vw-ph { transition: opacity .4s; }
        .vw-swiss .vw-card:hover .vw-ph { opacity: 0.85; }
        .vw-swiss .vw-hline { height:1px; background: var(--vw-line); width:100%; }
      `}</style>

      {/* ============ TOP BAR ============ */}
      <header style={{
        display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap: 24,
        padding:"24px clamp(24px, 4vw, 72px)",
        alignItems:"center", borderBottom:"1px solid var(--vw-line)",
      }}>
        <div className="vw-mono" style={{ gridColumn:"span 3"}}>VWP — INDEX / 2026</div>
        <div style={{ gridColumn:"span 6", display:"flex", gap: 28, justifyContent:"center" }} className="vw-mono">
          <a data-cursor="link" href="#portfolio-s" style={{color:"inherit", textDecoration:"none"}}>01 · {L("portfolio")}</a>
          <a data-cursor="link" href="#about-s"   style={{color:"inherit", textDecoration:"none"}}>02 · {L("about")}</a>
          <a data-cursor="link" href="#services-s" style={{color:"inherit", textDecoration:"none"}}>03 · {L("services")}</a>
          <a data-cursor="link" href="#contact-s" style={{color:"inherit", textDecoration:"none"}}>04 · {L("contact")}</a>
        </div>
        <div className="vw-mono" style={{ gridColumn:"span 3", textAlign:"right" }}>{PHOTOGRAPHER.locations}</div>
      </header>

      {/* ============ HERO ============ */}
      <section style={{ padding:"60px clamp(24px, 4vw, 72px) 80px" }}>
        <div className="vw-grid12">
          <div style={{ gridColumn:"span 2" }} className="vw-mono">§ 00 / HERO</div>
          <div style={{ gridColumn:"span 10" }}>
            <h1 className="vw-display" style={{
              margin: 0,
              fontSize:"clamp(72px, 12vw, 200px)",
              lineHeight: 0.9,
              letterSpacing:"-0.035em",
            }}>
              <StaggerText text="Vanessa" stagger={40} />
            </h1>
            <h1 className="vw-display" style={{
              margin: "-0.04em 0 0", fontSize:"clamp(72px, 12vw, 200px)", lineHeight: 0.9,
              letterSpacing:"-0.035em", color: "var(--vw-muted)"
            }}>
              <StaggerText text="Walczak-Pińska." stagger={30} delay={450}/>
            </h1>
          </div>
        </div>

        <div className="vw-hline" style={{ marginTop: 80, marginBottom: 32 }}/>

        <div className="vw-grid12">
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 00.1</div>
          <div style={{ gridColumn:"span 4"}}>
            <p className="vw-mono" style={{ margin:0 }}>DISCIPLINE</p>
            <p className="vw-display" style={{ margin:"8px 0 0", fontSize: 22, lineHeight:1.3 }}>Corporate photography · C-suite headshots · Campaign imagery</p>
          </div>
          <div style={{ gridColumn:"span 3"}}>
            <p className="vw-mono" style={{ margin:0 }}>YEARS</p>
            <p className="vw-display" style={{ margin:"8px 0 0", fontSize: 22 }}>Est. 2018</p>
          </div>
          <div style={{ gridColumn:"span 3"}}>
            <p className="vw-mono" style={{ margin:0 }}>CLIENTS</p>
            <p className="vw-display" style={{ margin:"8px 0 0", fontSize: 22 }}>120+ across Europe</p>
          </div>
        </div>

        <div className="vw-hline" style={{ marginTop: 48, marginBottom: 24 }}/>

        {/* Hero image band */}
        <div style={{ marginTop: 40 }}>
          <Photo item={{ id:"HERO", title:{pl:"Banner"}, client:"", tone:"a" }} style="striped" aspect="21/9"/>
        </div>
      </section>

      {/* ============ INTRO STATEMENT + COUNTERS ============ */}
      <section className="vw-section">
        <div className="vw-grid12" style={{ alignItems:"start" }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 01 / STATEMENT</div>
          <div style={{ gridColumn:"span 10"}}>
            <h2 className="vw-display" style={{
              margin: 0,
              fontSize:"clamp(44px, 5.5vw, 88px)",
              lineHeight: 1.05,
              letterSpacing:"-0.02em",
              maxWidth: 1100,
            }}>
              <StaggerText text={PHOTOGRAPHER.tagline[lang]} stagger={15}/>
            </h2>
          </div>
        </div>

        <div className="vw-hline" style={{ marginTop: 80, marginBottom: 48 }}/>

        <div className="vw-grid12">
          {PHOTOGRAPHER.counters.map((c, i) => (
            <InView key={i} rootRef={frameRef} delay={i*100} style={{ gridColumn:"span 4" }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
                <div className="vw-mono" style={{ color:"var(--vw-muted)" }}>0{i+1}</div>
                <div className="vw-mono" style={{ color:"var(--vw-muted)" }}>{c.label[lang].toUpperCase()}</div>
              </div>
              <div className="vw-display" style={{ fontSize:"clamp(64px, 9vw, 144px)", lineHeight: 1, marginTop: 20 }}>
                <CounterUp to={c.n} suffix={c.suffix}/>
              </div>
              <div className="vw-hline" style={{ marginTop: 20 }}/>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ PORTFOLIO ============ */}
      <section id="portfolio-s" className="vw-section">
        <div className="vw-grid12" style={{ marginBottom: 40 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 02 / INDEX</div>
          <div style={{ gridColumn:"span 6"}}>
            <h2 className="vw-display" style={{ margin: 0, fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1 }}>
              {L("selected")}
            </h2>
          </div>
          <div style={{ gridColumn:"span 4", display:"flex", flexDirection:"column", gap: 2 }}>
            {CATEGORIES.map((c) => (
              <button key={c.id} className="vw-chip" data-cursor="filter"
                      data-active={filter === c.id ? "1" : "0"}
                      onClick={() => setFilter(c.id)}
                      style={{ textAlign:"left" }}>{c[lang]} <span style={{opacity:0.5}}> — {c.id==="all"?PORTFOLIO_ITEMS.length:PORTFOLIO_ITEMS.filter(p=>p.cat===c.id).length}</span></button>
            ))}
          </div>
        </div>

        <div className="vw-hline" style={{ marginBottom: 32 }}/>

        <div style={{ display:"grid", gridTemplateColumns:`repeat(${gridCols}, 1fr)`, gap: 24 }}>
          {filtered.map((item, i) => (
            <div key={item.id} className="vw-card" data-cursor="view"
                 onClick={() => setLightbox(i)}>
              <div style={{ display:"flex", justifyContent:"space-between", marginBottom: 10 }}>
                <span className="vw-mono">№ {String(i+1).padStart(3,"0")}</span>
                <span className="vw-mono" style={{color:"var(--vw-muted)"}}>{item.id.toUpperCase()}</span>
              </div>
              <Photo item={item} style="striped" aspect="4/5"/>
              <div style={{ marginTop: 12, display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
                <div className="vw-display" style={{ fontSize: 16 }}>{item.title[lang]}</div>
              </div>
              <div className="vw-mono" style={{color:"var(--vw-muted)", marginTop:4}}>
                {item.client} / {CATEGORIES.find(c=>c.id===item.cat)?.[lang]}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ FEATURED ============ */}
      <section className="vw-section" style={{ background: "#fafafa" }}>
        <div className="vw-grid12" style={{ marginBottom: 40 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 03 / CASE STUDY</div>
          <div style={{ gridColumn:"span 6"}}>
            <div className="vw-mono" style={{ color:"var(--vw-muted)", marginBottom: 12 }}>{FEATURED_PROJECT.year} · CLIENT</div>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(48px, 6vw, 88px)", lineHeight: 1 }}>
              {FEATURED_PROJECT.client}
            </h2>
          </div>
          <div style={{ gridColumn:"span 4"}}>
            <p style={{ margin:0, fontSize:14, lineHeight:1.65, color:"var(--vw-muted)" }}>
              {FEATURED_PROJECT.brief[lang]}
            </p>
          </div>
        </div>

        <div className="vw-hline" style={{ marginBottom: 32 }}/>

        <div style={{ display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gap: 16 }}>
          {FEATURED_PROJECT.frames.map((f, i) => (
            <div key={f.id} style={{ gridColumn: i === 5 ? "span 6" : (i % 3 === 0 ? "span 2" : "span 2") }}>
              <Photo item={{ ...f, title:f.label, client:"", tone:f.tone }} style="striped" aspect={i===5?"16/9":"4/5"}/>
              <div className="vw-mono" style={{ marginTop: 10, color:"var(--vw-muted)" }}>{f.label[lang]}</div>
            </div>
          ))}
        </div>

        <div className="vw-grid12" style={{ marginTop: 64 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 03.1 / OUTCOME</div>
          <div style={{ gridColumn:"span 8"}}>
            <p className="vw-display" style={{ fontSize: 22, lineHeight: 1.45, margin: 0 }}>
              {FEATURED_PROJECT.outcome[lang]}
            </p>
          </div>
        </div>
      </section>

      {/* ============ ABOUT ============ */}
      <section id="about-s" className="vw-section">
        <div className="vw-grid12">
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 04 / BIO</div>
          <div style={{ gridColumn:"span 4"}}>
            <Photo item={{ id:"VWP", title:{pl:"Autoportret"}, client:"VWP", tone:"a", aspect:"4/5" }} style="striped"/>
          </div>
          <div style={{ gridColumn:"span 6"}}>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(36px, 4.5vw, 64px)", lineHeight:1.05 }}>
              {PHOTOGRAPHER.name}
            </h2>
            <div className="vw-mono" style={{ color:"var(--vw-muted)", marginTop: 10 }}>Photographer · Est. 2018 · {PHOTOGRAPHER.locations}</div>
            <div className="vw-hline" style={{ marginTop: 32, marginBottom: 32 }}/>
            <p style={{ margin: 0, fontSize: 16, lineHeight:1.7, color:"var(--vw-fg)" }}>
              {PHOTOGRAPHER.bio[lang]}
            </p>
            <div style={{ marginTop: 40, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 16 }}>
              <div>
                <div className="vw-mono" style={{color:"var(--vw-muted)"}}>LANGUAGES</div>
                <div className="vw-display" style={{ fontSize: 18, marginTop: 6 }}>PL · EN · DE</div>
              </div>
              <div>
                <div className="vw-mono" style={{color:"var(--vw-muted)"}}>FOCUS</div>
                <div className="vw-display" style={{ fontSize: 18, marginTop: 6 }}>B2B · C-Suite</div>
              </div>
              <div>
                <div className="vw-mono" style={{color:"var(--vw-muted)"}}>DELIVERY</div>
                <div className="vw-display" style={{ fontSize: 18, marginTop: 6 }}>≤ 10 days</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ SERVICES ============ */}
      <section id="services-s" className="vw-section">
        <div className="vw-grid12" style={{ marginBottom: 40 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 05 / SERVICES</div>
          <div style={{ gridColumn:"span 10"}}>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1 }}>
              {L("services")}
            </h2>
          </div>
        </div>
        <div className="vw-hline" style={{ marginBottom: 0 }}/>
        {SERVICES.map((s, i) => (
          <div key={i} style={{ borderBottom:"1px solid var(--vw-line)" }}>
            <div className="vw-grid12" style={{ padding:"48px 0", alignItems:"start" }}>
              <div style={{ gridColumn:"span 2"}} className="vw-mono">0{i+1}</div>
              <div style={{ gridColumn:"span 4"}}>
                <h3 className="vw-display" style={{ margin:0, fontSize: 36, lineHeight: 1.05 }}>{s.name[lang]}</h3>
                <p style={{ margin:"14px 0 0", fontSize: 14, lineHeight: 1.6, color:"var(--vw-muted)" }}>
                  {s.scope[lang]}
                </p>
              </div>
              <div style={{ gridColumn:"span 4"}}>
                <ul style={{ listStyle:"none", padding:0, margin:0, display:"grid", gap: 10 }}>
                  {s.bullets[lang].map((b, bi) => (
                    <li key={bi} style={{ display:"grid", gridTemplateColumns:"auto 1fr", gap: 14, fontSize: 14 }}>
                      <span className="vw-mono" style={{color:"var(--vw-hl)"}}>—</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ gridColumn:"span 2", textAlign:"right" }}>
                <div className="vw-mono" style={{color:"var(--vw-muted)"}}>PRICE</div>
                <div className="vw-display" style={{ fontSize: 22, marginTop: 6 }}>{s.price[lang]}</div>
                <a data-cursor="arrow" href="#contact-s" className="vw-mono" style={{display:"inline-block", marginTop:16, color:"var(--vw-fg)", textDecoration:"none", borderBottom:"1px solid var(--vw-fg)", paddingBottom:2}}>ENQUIRE →</a>
              </div>
            </div>
          </div>
        ))}
      </section>

      {/* ============ CLIENTS + TESTIMONIALS ============ */}
      <section className="vw-section" style={{ background:"#fafafa" }}>
        <div className="vw-grid12" style={{ marginBottom: 40 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 06 / CLIENTS</div>
          <div style={{ gridColumn:"span 10"}}>
            <Marquee items={CLIENT_LOGOS} speed={50} separator="—" className="vw-display" />
          </div>
        </div>
        <div className="vw-hline" style={{ marginBottom: 48 }}/>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 32 }}>
          {TESTIMONIALS.map((t, i) => (
            <InView key={i} rootRef={frameRef} delay={i*120}>
              <div>
                <div className="vw-mono" style={{color:"var(--vw-muted)", marginBottom: 20}}>Ref / 0{i+1}</div>
                <blockquote className="vw-display" style={{ margin:0, fontSize: 20, lineHeight: 1.45 }}>
                  {t.quote[lang]}
                </blockquote>
                <div className="vw-hline" style={{margin:"28px 0 16px"}}/>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{t.name}</div>
                <div className="vw-mono" style={{color:"var(--vw-muted)", marginTop: 4}}>{t.role[lang]}</div>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* ============ PROCESS ============ */}
      <section className="vw-section">
        <div className="vw-grid12" style={{ marginBottom: 32 }}>
          <div style={{ gridColumn:"span 2"}} className="vw-mono">§ 07 / METHOD</div>
          <div style={{ gridColumn:"span 10"}}>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1 }}>{L("process")}</h2>
          </div>
        </div>
        <div className="vw-hline"/>
        {PROCESS_STEPS.map((step, i) => (
          <div key={i} style={{ borderBottom:"1px solid var(--vw-line)" }}>
            <div className="vw-grid12" style={{ padding:"32px 0", alignItems:"center" }}>
              <div style={{ gridColumn:"span 2"}} className="vw-mono">{step.n}</div>
              <div style={{ gridColumn:"span 4"}}>
                <h3 className="vw-display" style={{margin:0, fontSize: 28, lineHeight:1.1 }}>{step.title[lang]}</h3>
              </div>
              <div style={{ gridColumn:"span 6"}}>
                <p style={{ margin:0, fontSize: 14, color:"var(--vw-muted)", lineHeight: 1.65 }}>
                  {step.desc[lang]}
                </p>
              </div>
            </div>
          </div>
        ))}
      </section>

      {/* ============ CONTACT ============ */}
      <section id="contact-s" className="vw-section" style={{ background:"#1C1C1E", color:"#fff", borderTop:"none" }}>
        <div className="vw-grid12">
          <div className="vw-mono" style={{ gridColumn:"span 2", color:"var(--vw-hl)"}}>§ 08 / CONTACT</div>
          <div style={{ gridColumn:"span 6"}}>
            <h2 className="vw-display" style={{ margin:0, fontSize:"clamp(56px, 7vw, 120px)", lineHeight:0.95 }}>
              {lang==="pl"?"Pracujmy razem.":"Let's work together."}
            </h2>
            <div className="vw-mono" style={{ color:"rgba(255,255,255,0.5)", marginTop: 24 }}>RESPONSE · WITHIN 24H · NO AUTOMATIONS</div>
            <div style={{ marginTop: 60, display:"grid", gap: 20 }}>
              <div>
                <div className="vw-mono" style={{color:"rgba(255,255,255,0.5)"}}>EMAIL</div>
                <a data-cursor="copy" href={`mailto:${PHOTOGRAPHER.email}`} className="vw-display" style={{color:"var(--vw-hl)", fontSize: 24, textDecoration:"none", display:"block", marginTop: 6}}>{PHOTOGRAPHER.email}</a>
              </div>
              <div>
                <div className="vw-mono" style={{color:"rgba(255,255,255,0.5)"}}>PHONE</div>
                <div className="vw-display" style={{fontSize: 20, marginTop: 6}}>{PHOTOGRAPHER.phone}</div>
              </div>
              <div>
                <div className="vw-mono" style={{color:"rgba(255,255,255,0.5)"}}>BASE</div>
                <div className="vw-display" style={{fontSize: 20, marginTop: 6}}>{PHOTOGRAPHER.locations}</div>
              </div>
            </div>
          </div>
          <div style={{ gridColumn:"span 4"}}>
            <ContactForm lang={lang} accent={highlight} tone="dark" />
          </div>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer style={{
        background:"#1C1C1E", color:"rgba(255,255,255,0.5)",
        borderTop:"1px solid rgba(255,255,255,0.12)",
        padding:"28px clamp(24px, 4vw, 72px)",
        display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap: 24, alignItems:"center",
      }}>
        <div className="vw-mono" style={{gridColumn:"span 4"}}>© 2026 · VWP STUDIO</div>
        <div className="vw-mono" style={{gridColumn:"span 4", textAlign:"center", display:"flex", gap:20, justifyContent:"center"}}>
          {PHOTOGRAPHER.social.map(s => <a data-cursor="external" key={s.label} href={s.href} style={{color:"inherit", textDecoration:"none"}}>{s.label.toUpperCase()}</a>)}
        </div>
        <div className="vw-mono" style={{gridColumn:"span 4", textAlign:"right"}}>
          <a data-cursor="top" href="#top" onClick={(e)=>{e.preventDefault(); frameRef.current?.scrollTo({top:0,behavior:"smooth"}); document.querySelector(".vw-swiss")?.scrollTo({top:0,behavior:"smooth"});}} style={{color:"inherit", textDecoration:"none"}}>↑ TOP</a>
        </div>
      </footer>

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

window.VariationSwiss = VariationSwiss;