/* TELAK — Services, Why, Portfolio sections */

/* ---------- Services ---------- */

const SERVICES = [
  {
    icon: <IconWeb />,
    tag: "Weby",
    title: "Moderné weby, ktoré predávajú",
    desc: "Navrhneme a postavíme web prispôsobený vašej firme — rýchly, na mobile dokonalý, optimalizovaný pre Google.",
    bullets: [
      "Vlastný dizajn na mieru, žiadne šablóny",
      "Editovateľný obsah cez jednoduchý CMS",
      "SEO základ + napojenie na Google Maps",
      "Hosting a SSL certifikát v cene"
    ],
    price: "od 890 €"
  },
  {
    icon: <IconApp />,
    tag: "Aplikácie",
    title: "Webové a mobilné aplikácie",
    desc: "Rezervačné systémy, objednávkové portály, interné nástroje — postavené tak, aby zamestnancom šetrili čas, nie ho kradli.",
    bullets: [
      "Rezervácie, objednávky, sklad",
      "Prihlasovanie pre zamestnancov",
      "Notifikácie e-mailom a SMS",
      "Funguje na mobile aj desktope"
    ],
    price: "od 2 400 €"
  },
  {
    icon: <IconAI />,
    tag: "AI automatizácie",
    title: "Umelá inteligencia pre denný chod",
    desc: "Zautomatizujeme rutinné úlohy — odpovedanie na otázky zákazníkov, písanie príspevkov, spracovanie objednávok.",
    bullets: [
      "AI chatbot pre web a Facebook",
      "Automatické odpovede na e-maily",
      "Generovanie príspevkov na sociálne siete",
      "Spracovanie faktúr a dokladov"
    ],
    price: "od 490 € / mesiac"
  }
];

const Services = () => (
  <section id="sluzby">
    <div className="container">
      <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
        <span className="eyebrow" style={{ marginBottom: 16 }}>Služby</span>
        <h2 className="h1" style={{ marginTop: 14 }}>Tri spôsoby, ako vám pomôžeme rásť.</h2>
        <p className="lead" style={{ marginTop: 18 }}>
          Každá služba je samostatná, ale dohromady tvoria jeden systém — prepojený, jednoduchý na používanie a navrhnutý pre slovenské lokálne biznisy.
        </p>
      </div>

      <div className="services-grid">
        {SERVICES.map((s, i) => (
          <article key={i} className="card is-hoverable reveal service-card" style={{ transitionDelay: `${i * 0.08}s` }}>
            <div className="service-glow"></div>
            <div className="service-icon-wrap">
              {s.icon}
            </div>
            <span className="tag is-accent" style={{ marginBottom: 14 }}>{s.tag}</span>
            <h3 className="h2" style={{ fontSize: 24, marginBottom: 10 }}>{s.title}</h3>
            <p className="muted" style={{ fontSize: 15, marginBottom: 22 }}>{s.desc}</p>
            <ul className="service-list">
              {s.bullets.map((b, j) => (
                <li key={j}>
                  <span className="service-check"><IconCheck size={12} /></span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <div className="service-foot">
              <div>
                <div className="muted-2" style={{ fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Investícia</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, marginTop: 4 }}>{s.price}</div>
              </div>
              <a href="#kontakt" className="service-link">Mám záujem <IconArrowRight size={14} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>

    <style>{`
      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      @media (max-width: 920px) {
        .services-grid { grid-template-columns: 1fr; }
      }
      .service-card {
        padding: 32px;
        display: flex;
        flex-direction: column;
      }
      .service-glow {
        position: absolute;
        top: -40%;
        left: -40%;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle, var(--accent-soft), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s var(--ease);
        pointer-events: none;
      }
      .service-card:hover .service-glow { opacity: 1; }
      .service-icon-wrap {
        width: 56px;
        height: 56px;
        border-radius: var(--r-md);
        background: var(--surface-2);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        margin-bottom: 20px;
        transition: transform 0.3s var(--ease), background 0.3s var(--ease);
      }
      .service-card:hover .service-icon-wrap {
        transform: rotate(-4deg) scale(1.05);
        background: var(--accent-soft);
      }
      .service-list {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .service-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: var(--text-2);
      }
      .service-check {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
      }
      .service-foot {
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .service-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 500;
        color: var(--accent);
        transition: gap 0.2s var(--ease);
      }
      .service-link:hover { gap: 10px; }
    `}</style>
  </section>
);

/* ---------- Why TELAK ---------- */

const WHY = [
  {
    icon: <IconBolt />,
    title: "Rýchle dodanie",
    desc: "Web hotový do 14 dní, aplikácie do 6 týždňov. Bez vymýšľania, bez prieťahov."
  },
  {
    icon: <IconLayers />,
    title: "Najnovšie technológie",
    desc: "Stavíme na overených moderných nástrojoch — React, Next.js, AI od OpenAI a Anthropic."
  },
  {
    icon: <IconHeart />,
    title: "Férová cena",
    desc: "Žiadne skryté poplatky. Pevná suma, splátky možné. Vidíte presne, za čo platíte."
  },
  {
    icon: <IconShield />,
    title: "Podpora po odovzdaní",
    desc: "Sme s vami aj rok po spustení. Drobné úpravy, konzultácie a aktualizácie sú v cene."
  }
];

const Why = () => (
  <section id="preco" style={{ background: "var(--bg-elev)" }}>
    <div className="container">
      <div className="why-head reveal">
        <div>
          <span className="eyebrow" style={{ marginBottom: 16 }}>Prečo TELAK</span>
          <h2 className="h1" style={{ marginTop: 14, maxWidth: "16ch" }}>
            Robíme to inak ako veľké agentúry.
          </h2>
        </div>
        <p className="lead" style={{ maxWidth: "44ch" }}>
          Sme malý tím, ktorý rozumie tomu, ako fungujú slovenské živnosti. Hovoríme po slovensky, telefonujeme bez ticketov a máme čas vás vypočuť.
        </p>
      </div>

      <div className="why-grid">
        {WHY.map((w, i) => (
          <div key={i} className="why-box card is-hoverable reveal" style={{ transitionDelay: `${i * 0.06}s` }}>
            <div className="why-icon">{w.icon}</div>
            <h3 className="h3" style={{ marginBottom: 8 }}>{w.title}</h3>
            <p className="muted" style={{ fontSize: 14, margin: 0 }}>{w.desc}</p>
            <div className="why-num">{String(i + 1).padStart(2, "0")}</div>
          </div>
        ))}
      </div>
    </div>

    <style>{`
      .why-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: end;
        margin-bottom: 56px;
      }
      @media (max-width: 820px) { .why-head { grid-template-columns: 1fr; gap: 24px; } }
      .why-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      @media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } }
      .why-box {
        position: relative;
        padding: 28px 24px;
      }
      .why-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--r-sm);
        background: var(--accent-soft);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
      }
      .why-num {
        position: absolute;
        top: 22px;
        right: 22px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-3);
        letter-spacing: 0.08em;
      }
    `}</style>
  </section>
);

/* ---------- Portfolio ---------- */

const PORTFOLIO = [
  {
    name: "Reštaurácia U Janka",
    type: "Web + rezervačný systém",
    desc: "Z papierového kalendára na online rezervácie. Dvojnásobok hostí v slabších dňoch.",
    tags: ["Next.js", "Stripe", "AI chat"],
    color: "linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%)",
    glyph: "UJ"
  },
  {
    name: "Stolárstvo Novák",
    type: "Web + galéria prác",
    desc: "Portfólio s vyše 200 realizáciami. Klienti si robia cenovú kalkuláciu sami.",
    tags: ["React", "CMS", "SEO"],
    color: "linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%)",
    glyph: "SN"
  },
  {
    name: "Kaderníctvo Estela",
    type: "Rezervačná appka",
    desc: "Klienti si rezervujú termíny 24/7. Automatické pripomienky cez SMS.",
    tags: ["PWA", "Twilio", "Calendar"],
    color: "linear-gradient(135deg, #EC4899 0%, #06B6D4 100%)",
    glyph: "KE"
  },
  {
    name: "AutoSlužby Kováč",
    type: "AI automatizácia",
    desc: "AI prijíma objednávky cez Facebook a vypĺňa zákazku v systéme — bez ľudského zásahu.",
    tags: ["Claude", "Make.com", "API"],
    color: "linear-gradient(135deg, #10B981 0%, #06B6D4 100%)",
    glyph: "AK"
  },
  {
    name: "Pekáreň Domov",
    type: "E-shop pre lokálnu pekáreň",
    desc: "Predobjednávky chleba na druhý deň. Notifikácia, keď je objednávka pripravená.",
    tags: ["Shopify", "Stripe", "SMS"],
    color: "linear-gradient(135deg, #F59E0B 0%, #06B6D4 100%)",
    glyph: "PD"
  },
  {
    name: "Realitka Domino",
    type: "Web + CRM napojenie",
    desc: "Inzeráty sa automaticky publikujú z CRM. Klienti vidia novinky o pár sekúnd skôr.",
    tags: ["Webflow", "Zapier", "API"],
    color: "linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%)",
    glyph: "RD"
  }
];

const Portfolio = () => (
  <section id="portfolio">
    <div className="container">
      <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
        <div>
          <span className="eyebrow" style={{ marginBottom: 16 }}>Portfólio</span>
          <h2 className="h1" style={{ marginTop: 14 }}>Posledné realizácie.</h2>
        </div>
        <p className="lead" style={{ maxWidth: "42ch", margin: 0 }}>
          Výber z práce, ktorú sme nedávno dokončili pre slovenské firmy. Každý projekt si meriame podľa toho, či klientovi reálne priniesol viac práce.
        </p>
      </div>

      <div className="portfolio-grid">
        {PORTFOLIO.map((p, i) => (
          <article key={i} className="port-card reveal" style={{ transitionDelay: `${i * 0.05}s` }}>
            <div className="port-thumb" style={{ background: p.color }}>
              <div className="port-thumb-glyph">{p.glyph}</div>
              <div className="port-thumb-grid"></div>
              <div className="port-thumb-overlay">
                <span className="btn btn-primary btn-sm">Pozrieť projekt <IconArrowRight size={14} /></span>
              </div>
            </div>
            <div className="port-body">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
                <h3 className="h3" style={{ fontSize: 18 }}>{p.name}</h3>
                <span className="muted-2" style={{ fontSize: 12, fontFamily: "var(--font-mono)" }}>2025</span>
              </div>
              <div className="muted-2" style={{ fontSize: 13, marginBottom: 10 }}>{p.type}</div>
              <p className="muted" style={{ fontSize: 14, margin: 0, marginBottom: 16 }}>{p.desc}</p>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {p.tags.map((t, j) => <span key={j} className="tag">{t}</span>)}
              </div>
            </div>
          </article>
        ))}
      </div>

      <div className="reveal" style={{ textAlign: "center", marginTop: 48 }}>
        <a href="#kontakt" className="btn btn-ghost">
          Chcem podobný projekt <IconArrowRight />
        </a>
      </div>
    </div>

    <style>{`
      .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      @media (max-width: 980px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 620px) { .portfolio-grid { grid-template-columns: 1fr; } }
      .port-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
      }
      .port-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-lg);
      }
      .port-thumb {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .port-thumb-glyph {
        font-family: var(--font-display);
        font-size: 64px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: -0.04em;
        z-index: 2;
        text-shadow: 0 4px 30px rgba(0,0,0,0.2);
      }
      .port-thumb-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
        background-size: 32px 32px;
        mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
        -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
      }
      .port-thumb-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 12, 16, 0.5);
        opacity: 0;
        transition: opacity 0.3s var(--ease);
        z-index: 3;
      }
      .port-card:hover .port-thumb-overlay { opacity: 1; }
      .port-body { padding: 22px; }
    `}</style>
  </section>
);

Object.assign(window, { Services, Why, Portfolio });