/* TELAK — Navigation + Hero */

const Nav = ({ theme, onToggleTheme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className="nav" style={{ boxShadow: scrolled ? "var(--shadow-md)" : "none" }}>
      <a href="#top" className="nav-brand">
        <span className="dot"></span>
        <span>TELAK</span>
      </a>
      <div className="nav-links">
        <a href="#sluzby" className="nav-link">Služby</a>
        <a href="#preco" className="nav-link">Prečo TELAK</a>
        <a href="#portfolio" className="nav-link">Portfólio</a>
        <a href="#proces" className="nav-link">Proces</a>
        <a href="#cennik" className="nav-link">Cenník</a>
        <a href="#faq" className="nav-link">FAQ</a>
      </div>
      <div className="nav-actions">
        <button
          className="theme-toggle"
          aria-label="Prepnúť režim"
          onClick={onToggleTheme}
          title={theme === "dark" ? "Svetlý režim" : "Tmavý režim"}
        >
          {theme === "dark" ? <IconSun /> : <IconMoon />}
        </button>
        <a href="#kontakt" className="btn btn-primary btn-sm">
          Konzultácia
          <IconArrowRight size={14} />
        </a>
      </div>
    </nav>
  );
};

/* ---------- Hero ---------- */

const HERO_TAGLINES = [
  {
    eyebrow: "Digitálna agentúra · Slovensko",
    title: <>Moderné weby a <span style={{color: "var(--accent)"}}>AI automatizácie</span> pre lokálne firmy.</>,
    sub: "Pomáhame reštauráciám, remeselníkom a živnostníkom získať viac zákazníkov vďaka modernému webu — bez zbytočných komplikácií a za férovú cenu."
  },
];

const Hero = () => {
  const t = HERO_TAGLINES[0];

  return (
    <section id="top" style={{ paddingTop: "140px", paddingBottom: "80px", overflow: "hidden" }}>
      <div className="grid-bg"></div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="reveal" style={{ marginBottom: 20 }}>
              <span className="eyebrow">{t.eyebrow}</span>
            </div>
            <h1 className="h-display reveal" style={{ transitionDelay: "0.05s" }}>
              {t.title}
            </h1>
            <p className="lead reveal" style={{ marginTop: 22, maxWidth: "52ch", transitionDelay: "0.1s" }}>
              {t.sub}
            </p>
            <div className="reveal hero-cta" style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap", transitionDelay: "0.15s" }}>
              <a href="#kontakt" className="btn btn-primary">
                Získaj bezplatnú konzultáciu
                <IconArrowRight />
              </a>
              <a href="#portfolio" className="btn btn-ghost">Pozrieť portfólio</a>
            </div>

            <div className="reveal hero-meta" style={{ marginTop: 40, display: "flex", gap: 28, flexWrap: "wrap", transitionDelay: "0.2s" }}>
              <HeroMeta value="14 dní" label="priemerný čas dodania" />
              <HeroMeta value="40+" label="lokálnych firiem" />
              <HeroMeta value="4,9 / 5" label="hodnotenie klientov" />
            </div>
          </div>

          <div className="hero-visual reveal" style={{ transitionDelay: "0.1s" }}>
            <DashboardMock />
          </div>
        </div>

        {/* Marquee of trust */}
        <div style={{ marginTop: 80 }}>
          <div className="muted-2" style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", textAlign: "center", marginBottom: 20 }}>
            Pomáhame rásť slovenským firmám
          </div>
          <div className="marquee">
            <div className="marquee-track">
              {[...Array(2)].flatMap((_, k) => [
                "Reštaurácia U Janka",
                "Stolárstvo Novák",
                "Kaderníctvo Estela",
                "AutoSlužby Kováč",
                "Pekáreň Domov",
                "Fitness Pulz",
                "Realitka Domino",
                "Kvety Lúka",
              ].map((n, i) => (
                <span key={`${k}-${i}`} className="marquee-item">
                  {n} <span className="sep">●</span>
                </span>
              )))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 60px;
          align-items: center;
        }
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr; gap: 48px; }
          .hero-visual { order: 2; }
        }
      `}</style>
    </section>
  );
};

const HeroMeta = ({ value, label }) => (
  <div>
    <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em" }}>{value}</div>
    <div className="muted-2" style={{ fontSize: 13, marginTop: 2 }}>{label}</div>
  </div>
);

/* ---------- Dashboard mock ---------- */

const DashboardMock = () => {
  return (
    <div className="dash-wrap">
      {/* floating chip 1 */}
      <div className="dash-float dash-float-1">
        <div className="dash-float-icon" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
          <IconSparkles />
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500 }}>AI rezervácia</div>
          <div className="muted-2" style={{ fontSize: 11 }}>+12 dnes</div>
        </div>
      </div>

      <div className="dash-float dash-float-2">
        <div className="dash-float-icon" style={{ background: "rgba(16,185,129,0.12)", color: "#10B981" }}>
          <IconCheck size={14} />
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500 }}>Web nasadený</div>
          <div className="muted-2" style={{ fontSize: 11 }}>pred 2 dňami</div>
        </div>
      </div>

      {/* Browser frame */}
      <div className="dash-browser">
        <div className="dash-browser-bar">
          <div className="dash-dots">
            <span></span><span></span><span></span>
          </div>
          <div className="dash-url">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{marginRight: 6}}>
              <rect x="5" y="11" width="14" height="10" rx="2"/>
              <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
            </svg>
            restauracia-janko.sk
          </div>
          <div style={{ width: 40 }}></div>
        </div>
        <div className="dash-content">
          <div className="dash-content-inner">
            <div className="dash-mini-nav">
              <div className="dash-logo-mark">
                <div className="dash-logo-square"></div>
                <span>Reštaurácia U Janka</span>
              </div>
              <div className="dash-mini-links">
                <span></span><span></span><span></span>
                <span className="dash-mini-cta"></span>
              </div>
            </div>

            <div className="dash-hero">
              <div className="dash-hero-tag">● Nové menu týždňa</div>
              <div className="dash-hero-h1">Domáca slovenská kuchyňa s láskou.</div>
              <div className="dash-hero-sub-line"></div>
              <div className="dash-hero-sub-line short"></div>
              <div className="dash-hero-buttons">
                <div className="dash-btn-fill">Rezervovať stôl</div>
                <div className="dash-btn-out">Menu</div>
              </div>
            </div>

            <div className="dash-stats">
              <div className="dash-stat">
                <div className="dash-stat-num">187</div>
                <div className="dash-stat-lbl">rezervácií / mes.</div>
              </div>
              <div className="dash-stat">
                <div className="dash-stat-num accent">+34%</div>
                <div className="dash-stat-lbl">nových hostí</div>
              </div>
              <div className="dash-stat">
                <div className="dash-stat-num">4,9 ★</div>
                <div className="dash-stat-lbl">Google rating</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .dash-wrap {
          position: relative;
          aspect-ratio: 5 / 4.2;
          width: 100%;
        }
        .dash-browser {
          position: absolute;
          inset: 0;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          box-shadow: var(--shadow-lg);
          overflow: hidden;
          transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
          transition: transform 0.6s var(--ease);
        }
        .dash-wrap:hover .dash-browser {
          transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
        }
        .dash-browser-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 10px 14px;
          background: var(--bg-elev);
          border-bottom: 1px solid var(--border);
        }
        .dash-dots { display: flex; gap: 5px; }
        .dash-dots span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: var(--border-strong);
        }
        .dash-url {
          flex: 1;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-3);
          background: var(--surface-2);
          border-radius: var(--r-full);
          padding: 5px 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .dash-content {
          padding: 18px;
          height: calc(100% - 41px);
          background: linear-gradient(180deg, var(--bg-elev) 0%, var(--surface) 100%);
        }
        .dash-content-inner {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          padding: 14px;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .dash-mini-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .dash-logo-mark {
          display: flex;
          align-items: center;
          gap: 7px;
          font-family: var(--font-display);
          font-size: 11px;
          font-weight: 600;
        }
        .dash-logo-square {
          width: 16px;
          height: 16px;
          border-radius: 4px;
          background: linear-gradient(135deg, var(--accent), var(--accent-hover));
        }
        .dash-mini-links { display: flex; gap: 8px; align-items: center; }
        .dash-mini-links span {
          width: 22px;
          height: 6px;
          background: var(--border);
          border-radius: 3px;
        }
        .dash-mini-cta {
          width: 38px !important;
          height: 18px !important;
          background: var(--accent) !important;
          border-radius: var(--r-full) !important;
        }
        .dash-hero {
          padding: 12px 6px 0;
        }
        .dash-hero-tag {
          display: inline-block;
          font-family: var(--font-mono);
          font-size: 9px;
          color: var(--accent);
          background: var(--accent-soft);
          padding: 3px 8px;
          border-radius: var(--r-full);
          margin-bottom: 10px;
        }
        .dash-hero-h1 {
          font-family: var(--font-display);
          font-size: clamp(15px, 1.6vw, 22px);
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.15;
          margin-bottom: 10px;
        }
        .dash-hero-sub-line {
          height: 5px;
          background: var(--border);
          border-radius: 3px;
          width: 80%;
          margin-bottom: 5px;
        }
        .dash-hero-sub-line.short { width: 50%; }
        .dash-hero-buttons {
          display: flex;
          gap: 8px;
          margin-top: 14px;
        }
        .dash-btn-fill {
          background: var(--accent);
          color: #001014;
          font-size: 10px;
          font-weight: 500;
          padding: 6px 12px;
          border-radius: var(--r-full);
        }
        .dash-btn-out {
          border: 1px solid var(--border-strong);
          color: var(--text-2);
          font-size: 10px;
          padding: 6px 12px;
          border-radius: var(--r-full);
        }
        .dash-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-top: auto;
        }
        .dash-stat {
          background: var(--bg-elev);
          border: 1px solid var(--border);
          border-radius: var(--r-sm);
          padding: 10px 12px;
        }
        .dash-stat-num {
          font-family: var(--font-display);
          font-size: 16px;
          font-weight: 600;
          letter-spacing: -0.02em;
        }
        .dash-stat-num.accent { color: var(--accent); }
        .dash-stat-lbl {
          font-size: 9px;
          color: var(--text-3);
          margin-top: 2px;
        }
        .dash-float {
          position: absolute;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          padding: 10px 14px;
          display: flex;
          align-items: center;
          gap: 10px;
          box-shadow: var(--shadow-md);
          z-index: 2;
          animation: float 6s var(--ease) infinite;
        }
        .dash-float-1 {
          top: -16px;
          right: -10px;
          animation-delay: 0s;
        }
        .dash-float-2 {
          bottom: 12%;
          left: -22px;
          animation-delay: 2s;
        }
        .dash-float-icon {
          width: 28px;
          height: 28px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        @media (max-width: 600px) {
          .dash-float-1 { top: -10px; right: 10px; }
          .dash-float-2 { left: 10px; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { Nav, Hero });
