/* Motion · landing-page sections.
   Hero, PrimaryFeatures (interactive tabs + POS panel — the bit the user
   loved), SecondaryFeatures, ModulesGrid (all features), FinalCTA. */

const { useState: useLandState } = React;

/* ─── Hero ──────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="mpos-hero">
      <Container>
        <Reveal>
          <a href={url("#funkcje")} className="mpos-hero-eyebrow">
            <span className="mpos-eyebrow-dot"></span>
            Nowość · KSeF 2.0 dostępny od 1 lutego 2026
            <Icon name="arrowRight" size={12} />
          </a>
        </Reveal>
        <Reveal delay={40}>
          <h1 className="mpos-hero-headline">
            Kasa fiskalna, która{" "}
            <span className="mpos-hero-mark">
              <svg aria-hidden="true" viewBox="0 0 418 42" className="mpos-hero-underline" preserveAspectRatio="none">
                <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
              </svg>
              <span className="mpos-hero-mark-text">nie spowalnia kolejki</span>
            </span>
            .
          </h1>
        </Reveal>
        <Reveal delay={100}>
          <p className="mpos-hero-sub">
            Motion to nowoczesny system kasowy stworzony dla dynamicznych firm. Działa offline,
            synchronizuje się online, zarządza inteligentnie. Poczuj różnicę, jaką daje technologia
            jutra dostępna już dziś.
          </p>
        </Reveal>
        <Reveal delay={160}>
          <div className="mpos-hero-cta">
            <Button variant="primary" size="lg" as="a" href={url("kontakt.html")}>Bezpłatna prezentacja</Button>
            <Button variant="outline" size="lg" as="a" href="#funkcje">
              <Icon name="play" size={12} color="#0175e4" />
              <span>Zobacz, jak działa</span>
            </Button>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

/* ─── Primary features (interactive tabs + admin panel) ─────────────── */
const PFEATURES = [
  { key: "posApp",     icon: "creditCard", name: "Sprzedaż",         summary: "Aplikacja kasowa: koszyk, skróty klawiszowe, integracja z drukarką fiskalną i terminalem." },
  { key: "products",   icon: "package",    name: "Produkty",         summary: "Karta produktu ze zdjęciem, ceną promocyjną i historią Omnibus — wszystko w jednym widoku." },
  { key: "analytics",  icon: "trendingUp", name: "Analityka",        summary: "Sprzedaż wg lokalu, pracownika, grupy i czasu. Wykresy z dwiema osiami, eksport do Excela." },
  { key: "deliveries", icon: "truck",      name: "Przyjęcia dostaw", summary: "Dokumenty MM, PZ i PW z Insert GT — automatyczne, bez przepisywania." },
];

function PrimaryFeatures() {
  const [active, setActive] = useLandState(0);
  return (
    <section id="funkcje" className="mpos-pfeat">
      <Container>
        <Reveal>
          <div className="mpos-pfeat-head">
            <h2 className="mpos-pfeat-title">Jedno narzędzie. Wszystko, czego potrzebujesz, żeby otworzyć dzień.</h2>
            <p className="mpos-pfeat-sub">
              Wybierz moduł i zobacz, jak wygląda w prawdziwym panelu — bez ekranów demo,
              bez retuszowanych zrzutów.
            </p>
          </div>
        </Reveal>
        <div className="mpos-pfeat-tabs-row">
          {PFEATURES.map((f, i) => (
            <button
              key={f.key}
              onClick={() => setActive(i)}
              className={`mpos-pfeat-pill${i === active ? " is-active" : ""}`}
            >
              <span className="mpos-pfeat-pill-icon"><Icon name={f.icon} size={16} /></span>
              <span className="mpos-pfeat-pill-body">
                <span className="mpos-pfeat-pill-name">{f.name}</span>
                <span className="mpos-pfeat-pill-desc">{f.summary}</span>
              </span>
            </button>
          ))}
        </div>
        <div className="mpos-pfeat-panel-wide">
          <POSPanel variant={PFEATURES[active].key} />
        </div>
      </Container>
    </section>
  );
}

/* ─── Secondary features ──────────────────────────────────────────── */
const SFEATURES = [
  {
    icon: "wifiOff",
    name: "Działa offline",
    summary: "Internet pada? Sprzedaż się nie zatrzymuje.",
    description:
      "Motion działa lokalnie i synchronizuje się, kiedy Wi-Fi wróci. Żadnych zamrożonych ekranów w czasie godzin szczytu.",
  },
  {
    icon: "shieldCheck",
    name: "JPK_V7 i KSeF",
    summary: "Pliki JPK i faktury KSeF generujemy w tle.",
    description:
      "E-paragony, fiskalizacja, korekty, wysyłka faktur do KSeF 2.0. W cenie abonamentu — bez modułów premium.",
  },
  {
    icon: "store",
    name: "Jeden lokal czy sieć",
    summary: "Skaluj się bez zmiany systemu.",
    description:
      "Od kawiarni 6 m² do sieci z 12 lokalami — ten sam interfejs, te same skróty, raporty zbiorcze w panelu właściciela.",
  },
];

function SecondaryFeatures() {
  return (
    <section className="mpos-sfeat">
      <Container>
        <Reveal>
          <div className="mpos-sfeat-head">
            <h2 className="mpos-sfeat-title">Stworzone dla codziennej pracy.</h2>
            <p className="mpos-sfeat-sub">
              Każdy element systemu rozwiązuje konkretny problem, który widzieliśmy w prawdziwych
              lokalach — od niezawodnego trybu offline po szybkie podsumowania zmiany.
            </p>
          </div>
        </Reveal>
        <div className="mpos-sfeat-grid">
          {SFEATURES.map((f, i) => (
            <Reveal key={f.name} delay={i * 60}>
              <div className="mpos-sfeat-card">
                <div className="mpos-sfeat-icon"><Icon name={f.icon} size={22} color="#fff" /></div>
                <div className="mpos-sfeat-name">{f.name}</div>
                <div className="mpos-sfeat-card-title">{f.summary}</div>
                <p className="mpos-sfeat-card-desc">{f.description}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ─── All modules grid (the catalog page on the homepage) ─────────── */
function ModulesGrid() {
  const modules = FEATURES_BY_MODULE.filter((m) => m.features.length > 0);
  const [activeMod, setActiveMod] = useLandState(modules[0].id);
  const current = modules.find((m) => m.id === activeMod) || modules[0];
  return (
    <section id="moduly" className="mpos-modules">
      <Container>
        <div className="mpos-modules-head">
          <h2 className="mpos-modules-title">Cały panel administracyjny w jednym miejscu.</h2>
          <p className="mpos-modules-sub">
            Wybierz moduł po lewej — zobaczysz funkcje, które się w nim mieszczą.
            Każda funkcja to osobna strona z opisem, zrzutami i przykładami.
          </p>
        </div>
        <div className="mpos-modules-split">
          <nav className="mpos-modules-rail" aria-label="Moduły panelu">
            {modules.map((m) => {
              const isActive = m.id === activeMod;
              return (
                <button
                  key={m.id}
                  type="button"
                  onClick={() => setActiveMod(m.id)}
                  className={`mpos-modules-rail-item${isActive ? " is-active" : ""}`}
                  aria-pressed={isActive}
                >
                  <span className="mpos-modules-rail-icon"><Icon name={m.icon} size={18} /></span>
                  <span className="mpos-modules-rail-body">
                    <span className="mpos-modules-rail-name">{m.name}</span>
                    <span className="mpos-modules-rail-count">{m.features.length} funkcji</span>
                  </span>
                  <span className="mpos-modules-rail-chev" aria-hidden="true">
                    <Icon name="arrowRight" size={14} />
                  </span>
                </button>
              );
            })}
          </nav>
          <div className="mpos-modules-pane">
            <div className="mpos-modules-grid">
              {current.features.map((f) => (
                <a key={f.slug} href={featureHref(f.slug)} className="mpos-module-card">
                  <div className="mpos-module-icon"><Icon name={f.icon} size={20} /></div>
                  <h4 className="mpos-module-name">{f.name}</h4>
                  <p className="mpos-module-desc">{f.desc}</p>
                  <div className="mpos-module-arrow">
                    {f.built ? "Zobacz funkcję" : "Wkrótce"} <Icon name="arrowRight" size={14} />
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ─── Final CTA ──────────────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section className="mpos-cta">
      <Container>
        <div className="mpos-cta-inner">
          <h2 className="mpos-cta-title">Otwórz Motion przed kolejnym rankiem.</h2>
          <p className="mpos-cta-sub">
            14 dni za darmo. Bez karty kredytowej. Bez instalacji — wystarczy tablet i 5 minut.
          </p>
          <div className="mpos-cta-actions">
            <Button variant="white" size="lg" as="a" href={url("kontakt.html")}>Bezpłatna prezentacja</Button>
            <Button variant="outline-dark" size="lg" as="a" href={url("cennik.html")}>Zobacz cennik</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, PrimaryFeatures, SecondaryFeatures, ModulesGrid, FinalCTA });