/* ============================================================
   home.jsx — Home page sections + mount.
   ============================================================ */
const DS = window.MateuszBieleckiDesignSystem_2fa813 || {};
const { VideoPlayer, HeroSection, Sparkles } = DS;

const img = (seed, w = 800, h = 600) => `https://picsum.photos/seed/${seed}/${w}/${h}`;

/* ---------- content ---------- */
const HOME = {
  heroEyebrow: { pl: "Wideo · Branding · Marketing", en: "Video · Branding · Marketing" },
  heroLine1: { pl: "Od pomysłu", en: "From idea" },
  heroLine2: { pl: "do efektu.", en: "to impact." },
  heroSub: {
    pl: "Jestem Mateusz — twórca i przedsiębiorca. Robię foto, film, montaż i social media dla marek. I prowadzę indywidualne szkolenia 1:1 z AI i automatyzacji.",
    en: "I'm Mateusz — a creator and entrepreneur. I do photo, film, editing and social media for brands. And I run 1:1 training in AI and automation.",
  },
  heroTitle: { pl: "Od pomysłu do efektu.", en: "From idea to impact." },
  heroCta: { pl: "Porozmawiajmy", en: "Let's talk" },
  heroGhost: { pl: "Zobacz usługi", en: "See services" },
  clientsLabel: { pl: "Zaufali mi", en: "Trusted by" },
  clients: ["NORDA", "LUMEN STUDIO", "KAVA", "ATLAS", "PÓŁNOC", "VELA", "RDZEŃ"],
  reelLabel: { pl: "Showreel 2026", en: "Showreel 2026" },
  reelDesc: { pl: "90 sekund z ostatniego roku — komercyjne, marka, social.", en: "90 seconds from the last year — commercial, brand, social." },

  proofEyebrow: { pl: "Zaufali mi", en: "Trusted by" },
  stats: [
    { n: "20+", l: { pl: "zrealizowanych projektów", en: "projects delivered" } },
    { n: "2", l: { pl: "rynki — UK i Polska", en: "markets — UK & Poland" } },
    { n: "1:1", l: { pl: "format każdego szkolenia", en: "every training, one-to-one" } },
    { n: "8", l: { pl: "lat za kamerą i przy marce", en: "years behind camera & brand" } },
  ],

  pathsEyebrow: { pl: "Trzy drogi", en: "Three paths" },
  pathsTitle: { pl: "Po co tu jesteś?", en: "Why are you here?" },
  paths: [
    { n: "01", href: "agencja.html", tag: { pl: "Dla firm", en: "For companies" },
      title: { pl: "Pracuj ze mną", en: "Work with me" },
      desc: { pl: "Foto, film, montaż i social media dla marek, które chcą rosnąć. Od pomysłu po gotowy materiał.", en: "Photo, film, editing and social media for brands that want to grow. From idea to finished asset." },
      cta: { pl: "Zobacz usługi", en: "See services" } },
    { n: "02", href: "szkolenia.html", tag: { pl: "Dla twórców i firm", en: "For creators & teams" },
      title: { pl: "Ucz się ode mnie", en: "Learn from me" },
      desc: { pl: "Indywidualne szkolenia 1:1 z AI i automatyzacji. Uczysz się dokładnie tego, czego potrzebujesz w swojej pracy.", en: "1:1 training in AI and automation. You learn exactly what you need for your own work." },
      cta: { pl: "Szkolenia 1:1", en: "1:1 training" } },
    { n: "03", href: "audyt.html", tag: { pl: "Za darmo", en: "Free" },
      title: { pl: "Sprawdź swoją markę", en: "Audit your brand" },
      desc: { pl: "Bezpłatny audyt w 10 pytań — spójność, social i przekaz. Wynik i rekomendacje od ręki.", en: "A free 10-question audit — consistency, social and message. Score and recommendations on the spot." },
      cta: { pl: "Zrób audyt", en: "Take the audit" } },
  ],

  workEyebrow: { pl: "Wybrane realizacje", en: "Selected work" },
  workTitle: { pl: "Praca, która sprzedaje", en: "Work that sells" },
  work: [
    { seed: "mbwork1", cat: { pl: "Film marki", en: "Brand film" }, name: { pl: "Premium Brand Film", en: "Premium Brand Film" }, client: "AURA" },
    { seed: "mbwork2", cat: { pl: "Rebranding", en: "Rebrand" }, name: { pl: "Rebranding firmy usługowej", en: "Service Company Rebrand" }, client: "NORDFLOW" },
    { seed: "mbwork3", cat: { pl: "Social + wzrost", en: "Social + growth" }, name: { pl: "12 miesięcy wzrostu w social", en: "12 Months of Social Growth" }, client: "KRAFT" },
  ],
  workLink: { pl: "Wszystkie realizacje", en: "All work" },

  aboutEyebrow: { pl: "Kim jestem", en: "Who I am" },
  aboutTitle: { pl: "Rzemieślnik, nie korporacja.", en: "A craftsman, not a corporation." },
  aboutBody: {
    pl: "Pracuję między Wielką Brytanią a Polską. Robię foto, film, montaż i social media dla marek, a także prowadzę indywidualne szkolenia 1:1 z AI i automatyzacji. Łączę obraz, słowo i strategię, żeby firmy lepiej się komunikowały i więcej sprzedawały.",
    en: "I work between the UK and Poland. I do photo, film, editing and social media for brands, and I run 1:1 training in AI and automation. I combine image, words and strategy so businesses communicate better and sell more.",
  },
  aboutCta: { pl: "Poznaj moją historię", en: "Read my story" },

  trainingEyebrow: { pl: "Szkolenia 1:1", en: "1:1 training" },
  trainingName: { pl: "Indywidualne szkolenia 1:1 z AI i automatyzacji", en: "1:1 training in AI & automation" },
  trainingPromise: {
    pl: "Uczę Cię 1:1 — pod Twój cel, Twoje narzędzia i Twoją branżę. Wdrażasz AI i automatyzacje, które realnie oszczędzają czas. Online lub na miejscu.",
    en: "I teach you 1:1 — around your goal, your tools and your industry. You implement AI and automations that genuinely save time. Online or in person.",
  },
  trainingPrice: { pl: "Wycena 1:1", en: "1:1 quote" },
  trainingMeta: { pl: "Online lub na miejscu · pod Twój cel · elastyczne terminy", en: "Online or in person · tailored to you · flexible dates" },
  trainingCta: { pl: "Umów szkolenie", en: "Book a session" },

  finalTitle: { pl: "Masz pomysł? Zróbmy z niego efekt.", en: "Got an idea? Let's turn it into impact." },
  finalSub: { pl: "Kamera, marka, sprzedaż — w jednym miejscu.", en: "Camera, brand, sales — in one place." },
  finalCta: { pl: "Rozpocznij współpracę", en: "Start a project" },
};

/* ---------- Hero media: real golf video, with photo-reel fallback ---------- */
function HeroMedia() {
  const ref = useRef(null);
  const [failed, setFailed] = useState(false);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.muted = true;
    v.defaultMuted = true;
    const p = v.play();
    if (p && p.catch) p.catch(() => {});
  }, []);
  if (failed) return <HeroReel />;
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "#0e141f" }}>
      <video ref={ref} autoPlay muted loop playsInline preload="auto" poster="assets/photos/event.jpg"
        onError={() => setFailed(true)}
        style={{ width: "100%", height: "100%", objectFit: "cover" }}>
        <source src="assets/video/golf-hero.mp4" type="video/mp4" />
      </video>
    </div>
  );
}

/* ---------- Hero showreel (crossfading cinematic stills + Ken Burns) ----------
   NOTE: the preview sandbox blocks external <video> (CSP media-src), so we use an
   animated reel of cinematic stills. To use a real film, drop an MP4 in the
   project and swap this for <video autoPlay muted loop playsInline src="...">. */
function HeroReel() {
  const shots = ["assets/photos/event.jpg", "assets/photos/podcast.jpg", "assets/photos/golf-swing.jpg", "assets/photos/portrait-hero.png"];
  const pos = ["center 30%", "center 30%", "center 25%", "center 18%"];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % shots.length), 3600);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "#0e141f" }}>
      {shots.map((s, i) => (
        <div key={i} className="mb-reel-shot" style={{ position: "absolute", inset: 0, backgroundImage: `url(${s})`, backgroundSize: "cover", backgroundPosition: pos[i], opacity: i === idx ? 1 : 0, transition: "opacity 1.3s ease" }} />
      ))}
      {/* cinematic grain + vignette */}
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 100% at 50% 0%, transparent 50%, rgba(14,20,31,0.5))", pointerEvents: "none" }} />
      {/* mobile legibility scrim — fades the reel toward the page bg so the centered headline stays readable in both themes */}
      <div className="mb-reel-scrim" style={{ position: "absolute", inset: 0, background: "var(--background)", pointerEvents: "none" }} />
      {/* showreel badge */}
      <div style={{ position: "absolute", left: 16, bottom: 16, display: "flex", alignItems: "center", gap: 8, padding: "0.4rem 0.8rem", borderRadius: 999, background: "rgba(19,26,40,0.55)", backdropFilter: "blur(6px)", color: "#F4F1EA", fontFamily: "var(--font-mono)", fontSize: "0.66rem", letterSpacing: "0.12em", textTransform: "uppercase" }}>
        <span style={{ width: 18, height: 18, borderRadius: 999, background: "var(--primary)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <svg width="9" height="9" viewBox="0 0 24 24" fill="#1A2233"><path d="M8 5v14l11-7z" /></svg>
        </span>
        Showreel 2026
      </div>
    </div>
  );
}

/* ---------- Client logos (real client marks, unified grayscale) ---------- */
const LOGOS = [
  { src: "assets/logos/hillcross.webp", name: "Hillcross Dental", h: 46 },
  { src: "assets/logos/oaklaw.jpg", name: "Oaklaw", h: 26 },
  { src: "assets/logos/pkg-training.png", name: "PKG Training", h: 44 },
  { src: "assets/logos/sabc.webp", name: "Scottish Asian Business Chamber", h: 40 },
  { src: "assets/logos/knowvate.svg", name: "Knowvate Hub", h: 40 },
  { src: "assets/logos/skillab.webp", name: "SkilLAB Social", h: 34 },
];
function ClientLogos() {
  const tx = useTx();
  const row = [...LOGOS, ...LOGOS, ...LOGOS];
  return (
    <section style={{ borderBottom: "1px solid var(--border)", background: "var(--background)" }}>
      <div className="mb-wrap mb-logos-wrap" style={{ paddingTop: "1.8rem", paddingBottom: "1.8rem" }}>
        <span className="mb-logos-label">{tx(HOME.clientsLabel)}</span>
        <div className="mb-logos-fade">
          <div className="mb-logos-track">
            {row.map((l, i) => (
              <span key={i} className="mb-logo-item" title={l.name}>
                <img src={l.src} alt={l.name} style={{ height: l.h, width: "auto", maxWidth: 160, objectFit: "contain" }} />
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Hero (design-system HeroSection, header hidden under our Nav) ---------- */
function Hero() {
  const tx = useTx();
  if (!HeroSection) return null;
  return (
    <div className="mb-hs-host">
      <HeroSection
        eyebrow={tx(HOME.heroEyebrow)}
        title={tx(HOME.heroTitle)}
        subtitle={tx(HOME.heroSub)}
        primaryCta={tx(HOME.heroCta)}
        secondaryCta={tx(HOME.heroGhost)}
        clients={HOME.clients}
        clientsLabel={tx(HOME.clientsLabel)}
        media={<HeroMedia />}
      />
    </div>
  );
}

/* ---------- Social proof ---------- */
function Proof() {
  const tx = useTx();
  return (
    <section style={{ background: "var(--muted)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="mb-wrap" style={{ paddingTop: "3.5rem", paddingBottom: "3.5rem" }}>
        <FadeIn><div style={{ textAlign: "center", marginBottom: "2.4rem" }}><Eyebrow>{tx(HOME.proofEyebrow)}</Eyebrow></div></FadeIn>
        <div className="mb-stats-grid">
          {HOME.stats.map((s, i) => (
            <FadeIn key={i} delay={i * 0.07} className="text-center">
              <div className="mb-numeral" style={{ fontSize: "clamp(2.6rem,5vw,4rem)" }}><CountUp value={s.n} /></div>
              <div style={{ color: "var(--muted-foreground)", fontFamily: "var(--font-mono)", fontSize: "0.78rem", textTransform: "uppercase", letterSpacing: "0.08em", marginTop: "0.6rem", lineHeight: 1.4 }}>{tx(s.l)}</div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Three paths ---------- */
function Paths() {
  const tx = useTx();
  return (
    <section className="mb-wrap" style={{ paddingTop: "clamp(4rem,8vw,7rem)", paddingBottom: "clamp(4rem,8vw,7rem)" }}>
      <FadeIn className="flex items-end justify-between flex-wrap" style={{ gap: "1rem", marginBottom: "3rem" }}>
        <div>
          <Eyebrow>{tx(HOME.pathsEyebrow)}</Eyebrow>
          <Display as="h2" style={{ fontSize: "clamp(2.4rem,5vw,4rem)", marginTop: "0.8rem" }}>{tx(HOME.pathsTitle)}</Display>
        </div>
      </FadeIn>
      <div className="mb-paths-grid">
        {HOME.paths.map((p, i) => (
          <FadeIn key={p.n} delay={i * 0.08}>
            <a href={p.href} className="mb-card" style={{ display: "flex", flexDirection: "column", padding: "2rem", height: "100%", textDecoration: "none", color: "var(--foreground)" }}>
              <div className="flex items-start justify-between">
                <span className="mb-numeral" style={{ fontSize: "3.2rem" }}>{p.n}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.68rem", textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--muted-foreground)", paddingTop: "0.6rem" }}>{tx(p.tag)}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "1.7rem", letterSpacing: "-0.01em", marginTop: "1.4rem" }}>{tx(p.title)}</h3>
              <p style={{ color: "var(--muted-foreground)", lineHeight: 1.6, marginTop: "0.8rem", flex: 1 }}>{tx(p.desc)}</p>
              <span className="mb-arrow inline-flex items-center" style={{ marginTop: "1.6rem", color: "var(--primary)", fontWeight: 600, fontSize: "0.92rem" }}>
                {tx(p.cta)} <span className="mb-arrow-glyph" style={{ marginLeft: 6, transition: "transform .2s var(--ease)" }}>→</span>
              </span>
            </a>
          </FadeIn>
        ))}
      </div>
    </section>
  );
}

/* ---------- Featured work ---------- */
function FeaturedWork() {
  const tx = useTx();
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--brand-navy)", color: "#F4F1EA", borderRadius: "clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0" }}>
      {Sparkles ? (
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 460, pointerEvents: "none", WebkitMaskImage: "radial-gradient(70% 100% at 50% 0%, #000 0%, transparent 75%)", maskImage: "radial-gradient(70% 100% at 50% 0%, #000 0%, transparent 75%)" }}>
          <Sparkles color="#F5841C" background="transparent" density={520} speed={1.3} size={2.4} opacity={1} minOpacity={0.25} />
        </div>
      ) : null}
      <div className="mb-wrap" style={{ position: "relative", paddingTop: "clamp(4rem,8vw,7rem)", paddingBottom: "clamp(4rem,8vw,7rem)" }}>
        <FadeIn className="flex items-end justify-between flex-wrap" style={{ gap: "1rem", marginBottom: "3rem" }}>
          <div>
            <Eyebrow>{tx(HOME.workEyebrow)}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: "clamp(2.4rem,5vw,4rem)", color: "#F4F1EA", marginTop: "0.8rem" }}>{tx(HOME.workTitle)}</h2>
          </div>
          <ArrowLink href="portfolio.html" style={{ color: "#F4F1EA" }}>{tx(HOME.workLink)}</ArrowLink>
        </FadeIn>
        <div className="mb-work-grid">
          {HOME.work.map((w, i) => (
            <FadeIn key={w.seed} delay={i * 0.08}>
              {VideoPlayer ? (
                <VideoPlayer title={tx(w.name)} description={`${tx(w.cat)} · ${w.client}`} thumbnailUrl={img(w.seed, 800, 1000)} aspectRatio="4/3" style={{ width: "100%" }} />
              ) : null}
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- About teaser ---------- */
function AboutTeaser() {
  const tx = useTx();
  return (
    <section className="mb-wrap" style={{ paddingTop: "clamp(4rem,8vw,7rem)", paddingBottom: "clamp(4rem,8vw,7rem)" }}>
      <div className="mb-about-grid">
        <FadeIn className="mb-about-photo">
          <Magnet padding={90} strength={6}>
            <img src="assets/photos/portrait-hero.png" alt="Mateusz Bielecki" style={{ width: "100%", borderRadius: "var(--radius-xl)", border: "1px solid var(--border)", aspectRatio: "4/5", objectFit: "cover", objectPosition: "center 18%" }} />
          </Magnet>
        </FadeIn>
        <div>
          <FadeIn><Eyebrow>{tx(HOME.aboutEyebrow)}</Eyebrow></FadeIn>
          <FadeIn delay={0.06}><Display as="h2" style={{ fontSize: "clamp(2.2rem,4.5vw,3.4rem)", marginTop: "0.9rem" }}>{tx(HOME.aboutTitle)}</Display></FadeIn>
          <FadeIn delay={0.12}><p style={{ color: "var(--muted-foreground)", fontSize: "1.12rem", lineHeight: 1.7, marginTop: "1.4rem", maxWidth: 520 }}>{tx(HOME.aboutBody)}</p></FadeIn>
          <FadeIn delay={0.18} style={{ marginTop: "2rem" }}><GhostButton href="o-mnie.html">{tx(HOME.aboutCta)}</GhostButton></FadeIn>
        </div>
      </div>
    </section>
  );
}

/* ---------- Featured training ---------- */
function FeaturedTraining() {
  const tx = useTx();
  return (
    <section style={{ background: "var(--muted)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="mb-wrap" style={{ paddingTop: "clamp(4rem,7vw,6rem)", paddingBottom: "clamp(4rem,7vw,6rem)" }}>
        <FadeIn className="flex items-end justify-between flex-wrap" style={{ gap: "1rem", marginBottom: "1.8rem" }}>
          <Eyebrow>{tx(HOME.trainingEyebrow)}</Eyebrow>
          <ArrowLink href="szkolenia.html">{tx({ pl: "Więcej szkoleń", en: "More training" })}</ArrowLink>
        </FadeIn>
        <FadeIn className="mb-train-card mb-card" style={{ padding: "clamp(1.8rem,3vw,3rem)" }}>
          <div className="mb-train-inner">
            <div>
              <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(1.9rem,3.5vw,2.8rem)", letterSpacing: "-0.015em", marginTop: 0 }}>{tx(HOME.trainingName)}</h3>
              <p style={{ color: "var(--muted-foreground)", lineHeight: 1.7, marginTop: "1rem", maxWidth: 540, fontSize: "1.05rem" }}>{tx(HOME.trainingPromise)}</p>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "0.78rem", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted-foreground)", marginTop: "1.4rem" }}>{tx(HOME.trainingMeta)}</div>
            </div>
            <div className="mb-train-side">
              <div style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(2.4rem,5vw,3.4rem)", color: "var(--foreground)", letterSpacing: "-0.02em" }}>{tx(HOME.trainingPrice)}</div>
              <PrimaryButton href="szkolenia.html" style={{ marginTop: "1.2rem" }}>{tx(HOME.trainingCta)}</PrimaryButton>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  const tx = useTx();
  return (
    <section className="mb-wrap" style={{ paddingTop: "clamp(5rem,9vw,8rem)", paddingBottom: "clamp(5rem,9vw,8rem)", textAlign: "center" }}>
      <FadeIn><Eyebrow>{tx(HOME.finalSub)}</Eyebrow></FadeIn>
      <FadeIn delay={0.06}><Display as="h2" style={{ fontSize: "clamp(2.6rem,7vw,5.4rem)", marginTop: "1.2rem", maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>{tx(HOME.finalTitle)}</Display></FadeIn>
      <FadeIn delay={0.14} style={{ marginTop: "2.4rem" }}><PrimaryButton href="kontakt.html">{tx(HOME.finalCta)}</PrimaryButton></FadeIn>
    </section>
  );
}

function App() {
  return (
    <div className="mb-app">
      <Nav />
      <Hero />
      <ClientLogos />
      <Proof />
      <Paths />
      <AboutTeaser />
      <FeaturedTraining />
      <FinalCTA />
      <SiteFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);