/* Fabrica Interiors — Website UI kit · Cover + Hero
   Cover: full-bleed photograph with a soft radial paper wash behind the
   centered logo, plus a scroll hint. Hero: editorial two-column intro. */
const { Button: HeroButton, Eyebrow: HeroEyebrow, Lead: HeroLead, StatBlock: HeroStat } =
  window.FabricaInteriorsDesignSystem_978348;

function Cover() {
  return (
    <section style={{ position: "relative", height: "100svh", minHeight: "560px", width: "100%", overflow: "hidden", display: "grid", placeItems: "center" }}>
      <img src="../../assets/cover.jpg" alt="Světlý interiér realizovaný studiem Fabrica Interiors"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "relative", zIndex: 2, padding: "0 var(--gutter)", display: "grid", placeItems: "center" }}>
        <div style={{ position: "absolute", inset: "-60% -30%", background: "var(--wash-paper)", zIndex: -1 }} />
        <img src="../../assets/logo.png" alt="Fabrica Interiors" style={{ width: "clamp(250px,42vw,640px)", height: "auto" }} />
      </div>
      <a href="#hero" aria-label="Posunout dolů" style={{
        position: "absolute", bottom: "30px", left: "50%", transform: "translateX(-50%)", zIndex: 2,
        display: "flex", flexDirection: "column", alignItems: "center", gap: "13px", color: "var(--ink)",
        fontFamily: "var(--font-body)", fontSize: "var(--fs-micro)", letterSpacing: ".24em", textTransform: "uppercase", fontWeight: 600,
      }}>
        <span>Prohlédnout</span>
        <span style={{ position: "relative", width: "1px", height: "48px", background: "rgba(33,28,22,.3)", overflow: "hidden" }}>
          <span className="kit-scrolldot" style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "45%", background: "var(--ink)" }} />
        </span>
      </a>
    </section>
  );
}

function Hero() {
  return (
    <section id="hero" style={{ position: "relative", paddingTop: "clamp(120px,17vh,180px)", paddingBottom: "clamp(40px,7vh,90px)" }}>
      <div className="kit-wrap">
        <div className="kit-hero-grid">
          <div style={{ paddingBottom: "clamp(8px,2vw,40px)" }}>
            <HeroEyebrow>Truhlářství &amp; interiéry na míru</HeroEyebrow>
            <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "var(--fs-display)", lineHeight: 1.04, letterSpacing: "-.01em", margin: "26px 0 0", color: "var(--ink)" }}>
              Řemeslo, které<br />dává prostoru <em>tvar.</em>
            </h1>
            <div style={{ marginTop: "30px", display: "flex", flexDirection: "column", gap: "26px", alignItems: "flex-start", maxWidth: "42ch" }}>
              <HeroLead>Navrhujeme a vyrábíme kuchyně, vestavěný nábytek a kompletní interiéry na míru — od prvního náčrtu po finální montáž.</HeroLead>
              <div style={{ display: "flex", gap: "14px", flexWrap: "wrap" }}>
                <HeroButton variant="ink" href="#galerie" arrow>Prohlédnout realizace</HeroButton>
                <HeroButton variant="ghost" href="#kontakt">Nezávazná konzultace</HeroButton>
              </div>
            </div>
            <div style={{ display: "flex", gap: "34px", flexWrap: "wrap", marginTop: "34px", paddingTop: "24px", borderTop: "1px solid var(--border-default)" }}>
              <HeroStat value="15+" label="let v řemesle" />
              <HeroStat value="200+" label="realizací" />
              <HeroStat value="100 %" label="na míru" />
            </div>
          </div>
          <figure style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", borderRadius: "var(--radius-xs)", margin: 0 }}>
            <img src="../../assets/IMG_8130.jpg" alt="Dubové schodiště s ocelovou konstrukcí a kuchyně na míru" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <figcaption style={{ position: "absolute", left: "18px", bottom: "16px", color: "#fff", fontFamily: "var(--font-body)", fontSize: "var(--fs-caption)", fontWeight: 500, letterSpacing: ".16em", textTransform: "uppercase", textShadow: "0 1px 12px rgba(0,0,0,.5)", display: "flex", alignItems: "center", gap: ".6em" }}>
              <span style={{ width: "18px", height: "1px", background: "rgba(255,255,255,.85)" }} />
              Schodiště &amp; kuchyně · realizace Fabrica
            </figcaption>
          </figure>
        </div>
      </div>
      <Marquee />
    </section>
  );
}

function Marquee() {
  const items = ["Kuchyně na míru", "Vestavěné skříně", "Vestavěný nábytek", "Police & truhlářské prvky", "Kompletní interiéry"];
  const row = items.concat(items);
  return (
    <div className="kit-marquee" aria-hidden="true" style={{ borderTop: "1px solid var(--border-default)", borderBottom: "1px solid var(--border-default)", padding: "18px 0", marginTop: "clamp(40px,7vh,90px)", overflow: "hidden", whiteSpace: "nowrap", WebkitMaskImage: "linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)", maskImage: "linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)" }}>
      <div className="kit-marquee-track" style={{ display: "inline-flex" }}>
        {row.map((t, i) => (
          <span key={i} style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(1.3rem,2.4vw,2rem)", fontWeight: 300, padding: "0 30px", display: "inline-flex", alignItems: "center", gap: "60px", color: "var(--ink)" }}>
            {t}<span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--oak)" }} />
          </span>
        ))}
      </div>
    </div>
  );
}

window.Cover = Cover;
window.Hero = Hero;