'use client'
import { motion, AnimatePresence } from 'framer-motion'
import { useState, useCallback, useEffect } from "react"

export default function Home() {

  const [openIndex, setOpenIndex] = useState<number | null>(null)

  const [activeSection, setActiveSection] = useState<string>("PrimeCode");

  useEffect(() => {
    const sections = document.querySelectorAll("section[id]");
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { rootMargin: "-50% 0px -50% 0px", threshold: 0 }
    );

    sections.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, []);

  const navItems = [
    { id: "PrimeCode", label: "O nas" },
    { id: "Sytuacje", label: "Sytuacje" },
    { id: "Partner", label: "Potrzebujesz partnera" },
    { id: "Model", label: "Model Prime Code" },
    { id: "CoPotrafimy", label: "Co potrafimy?" },
    { id: "JakDzialamy", label: "Jak działamy?" },
    { id: "PomogliśmyCaseStudies", label: "Pomogliśmy" },
  ];

  const caseStudies = [
    {
      title: "Firma kosmetyczna",
      short: "Nowa strategia detaliczna i transformacja doświadczenia klientek w salonach.",
      details: [
        "Opracowanie nowej strategii detalicznej, integrującej sprzedaż z usługami.",
        "Zaprojektowanie atmosfery sklepów oraz selekcja unikalnego asortymentu.",
        "Transformacja komunikacji – od eksperckiej wiedzy do relacji opartej na empatii.",
        "Redefinicja propozycji wartości – skupienie na doświadczeniu troski o zdrowie i piękno.",
        "Stworzenie concept store’u jako pełnego doświadczenia marki.",
        "Przejście z jednego formatu sklepu na trzy lepiej dopasowane formaty detaliczne.",
        "Zmiana podejścia operacyjnego: od 4P do 7P, z naciskiem na doświadczenie klientki."
      ]
    },
    {
      title: "Firma paliwowa",
      short: "Integracja doświadczenia na stacjach z tożsamością marki i branding sensoryczny.",
      details: [
        "Integracja strategii marki ze strategią doświadczeń klienta.",
        "Badania neuromarketingowe i ponad 100 rekomendacji optymalizacyjnych.",
        "Wielowarstwowa propozycja wartości – od tankowania po rozbudowane doświadczenie marki.",
        "Identyfikacja momentów prawdy i plan zarządzania nimi.",
        "Mapa ścieżek klienta z instrukcją optymalizacji.",
        "Projekt atmosfery stacji (kolorystyka, zapach, układ).",
        "Kompleksowy branding sensoryczny angażujący wszystkie zmysły.",
        "Standardy obsługi klienta odzwierciedlające wartości marki.",
        "Mapa wdrożenia z harmonogramem i wytycznymi operacyjnymi."
      ]
    },
    {
      title: "Firma technologiczna",
      short: "Nowa architektura marki, system kompetencji i kultura klientocentryczna.",
      details: [
        "Zaprojektowanie struktury organizacyjnej i systemu kompetencji.",
        "Redefinicja architektury marki (przejście z house of brands na branded house).",
        "System zarządzania wartością klienta – poziom strategiczny, operacyjny i personalny.",
        "„Playbooki” wdrażające pozycjonowanie do działań codziennych.",
        "Usługi o wysokiej wartości dodanej, zmieniające postrzeganie firmy.",
        "Model „high tech + high touch” łączący technologie z uważnością na klienta.",
        "Strategia CRM wspierająca długofalowe relacje i wzrost."
      ]
    }
  ]

  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

  // === NOWE tiles (podmień całą dotychczasową definicję) ===
  // === KAFELKI z jednolitym punktorowaniem ===
  const tiles = [
    {
      title: "Brand Daily Scan™ – diagnoza w rytmie codzienności",
      short: "Błyskawiczna analiza punktów styku, decyzji, procesów i sygnałów marki.",
      output: "Mapa luk, insighty, benchmarki, rekomendacje.",
      efekt:
        "Mapa luk i niespójności, insighty z rzeczywistego użycia marki, benchmarki branżowe oraz rekomendacje naprawcze i wzmacniające.",
      details: (
        <>
          <p >
            Nie patrzymy na markę z dystansu. Wchodzimy w jej codzienne tętno.
            Skupiamy się na tym, co naprawdę <strong>generuje doświadczenie klienta</strong>:
          </p>

          {/* stałe, eleganckie kropki */}
          <ul className="mt-1 space-y-1">
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              punkty styku (touchpointy),
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              mikrodecyzje zespołów,
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              automatyczne procesy i sygnały marki.
            </li>
          </ul>
        </>
      ),
    },
    {
      title: "Synchronizacja rytmu – faza pacingu",
      short: "Zgrywamy Twoje działania z logiką marki. Automatyzujemy. Personalizujemy.",
      output: "Roadmapa wdrożenia z KPI i zestawem eksperymentów.",
      efekt:
        "„Zgrane zegary” marki, marketingu, sprzedaży i obsługi; klarowne KPI oraz szybkie testy hipotez.",
      details: (
        <>
          <p>
            Integrujemy markę z codzienną dynamiką operacyjną. Nie robimy rewolucji —
            <strong> synchronizujemy rytm</strong>:
          </p>

          {/* stałe, eleganckie kropki */}
          <ul className="mt-1 space-y-1">
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              automatyzujemy to, co można,
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              personalizujemy to, co warto,
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              urealniamy to, co obiecujesz jako marka.
            </li>
          </ul>
        </>
      ),
    },
    {
      title: "Wdrożenie i skalowanie",
      short: "Marka w akcji: od call center i e-maili po pricing, CRM i fizyczną dostępność.",
      output: "Efektywność, zaangażowanie, lojalność.",
      efekt:
        "Wzrost efektywności działań marketingowych, wyższe zaangażowanie użytkowników, zwiększenie lojalności i retencji — zmierzone.",
      details: (
        <>
          <p >
            Marka przestaje być tylko deklaracją. Zaczyna
            <strong> działać w realnym czasie i miejscu</strong>:
          </p>

          {/* stałe, eleganckie kropki */}
          <ul className="mt-1 space-y-1">
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              w aplikacji i e-mailach,
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              w polityce cenowej i mechanizmach CRM,
            </li>
            <li className="relative pl-4 before:content-[''] before:absolute before:left-0 before:top-[0.55rem] before:w-1.5 before:h-1.5 before:rounded-full before:bg-cyan-600">
              w sklepie internetowym i na półce w punkcie sprzedaży.
            </li>
          </ul>
        </>
      ),
    },
  ];


  const scrollToIntegration = useCallback(() => {
    const section = document.getElementById('DlaczegoIntegracji')
    section?.scrollIntoView({ behavior: 'smooth' })
  }, [])

  return (



    <div className="relative min-h-screen text-gray-900 overflow-hidden">

      {/* ---- ESTETYCZNE, WIELOWARSTWOWE TŁO ---- */}
      <div className="fixed inset-0 -z-10 overflow-hidden">
        {/* Gradient bazowy */}
        <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-blue-100" />

        {/* Winieta dla lepszej głębi */}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_70%,rgba(0,0,0,0.05)_100%)] pointer-events-none" />

        {/* Duży, miękki blob lewy-górny */}
        <motion.div
          animate={{ scale: [1, 1.05, 1] }}
          transition={{ repeat: Infinity, duration: 15, ease: "easeInOut" }}
          className="absolute top-[-5%] left-[-15%] w-[900px] h-[900px]
               bg-gradient-to-tr from-cyan-200 via-blue-200 to-blue-300
               opacity-30 rounded-full blur-3xl"
        />

        {/* Duży, miękki blob prawy-dolny */}
        <motion.div
          animate={{ scale: [1, 1.07, 1] }}
          transition={{ repeat: Infinity, duration: 18, ease: "easeInOut" }}
          className="absolute bottom-[-5%] right-[-15%] w-[900px] h-[900px]
               bg-gradient-to-tr from-blue-200 via-cyan-100 to-blue-300
               opacity-25 rounded-full blur-3xl"
        />

        {/* Centralny blob dla balansu */}
        <motion.div
          animate={{ scale: [1, 1.08, 1] }}
          transition={{ repeat: Infinity, duration: 20, ease: "easeInOut" }}
          className="absolute top-[45%] left-[50%] translate-x-[-50%] w-[500px] h-[500px]
               bg-gradient-to-tr from-cyan-100 via-blue-100 to-blue-200
               opacity-15 rounded-full blur-2xl"
        />

        {/* Tekstura (grain) */}
        <div className="absolute inset-0 opacity-[0.04] mix-blend-overlay"
          style={{ backgroundImage: "url('/textures/noise.png')", backgroundSize: "200px 200px" }} />
      </div>

      {/* Sticky Navbar */}
      <nav className="fixed top-0 left-0 w-full z-50 bg-white/70 backdrop-blur-md shadow-sm border-b border-cyan-100">
        <div className="max-w-7xl mx-auto px-4 flex justify-between items-center py-4">

          <a href="#PrimeCode" className="flex items-center gap-3">
            <img src="/LogoPrimeCode-transparent.png" alt="Prime Code" className="h-8 w-auto" />

            <span className="sr-only">Prime Code — O nas</span>
          </a>

          <div className="md:hidden">
            <input type="checkbox" id="menu-toggle" className="peer hidden" />
            <label htmlFor="menu-toggle" className="cursor-pointer">
              <svg className="h-8 w-8 text-gray-700" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </label>
            <ul className="hidden peer-checked:flex absolute top-full left-0 w-full flex-col bg-white shadow-lg">
              {navItems.map((item) => (
                <li key={item.id}>
                  <a
                    href={`#${item.id}`}
                    className={`block px-4 py-2 transition hover:text-cyan-700 ${activeSection === item.id ? "text-cyan-700 border-l-4 border-cyan-700" : ""
                      }`}
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          <ul className="hidden md:flex gap-8 text-gray-700 font-semibold">
            {navItems.map((item) => (
              <li key={item.id}>
                <a
                  href={`#${item.id}`}
                  className={`transition hover:text-cyan-700 ${activeSection === item.id ? "text-cyan-700 border-b-2 border-cyan-700 pb-1" : ""
                    }`}
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </nav>




      {/* HERO - Nowoczesna, elegancka sekcja wprowadzająca */}
      <section
        id="PrimeCode"
        className="relative flex flex-col justify-center items-center min-h-screen px-6 py-16 md:py-24 text-center"
      >


        {/* Dynamiczne tło
        <div className="absolute inset-0">
          <div className="absolute -top-40 -left-40 w-96 h-96 bg-cyan-300 opacity-30 rounded-full blur-3xl animate-blob"></div>
          <div className="absolute -bottom-40 -right-40 w-[500px] h-[500px] bg-blue-300 opacity-30 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
        </div> */}

        {/* Główna treść */}
        <motion.h1
          initial={{ opacity: 0, y: 60 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          className=" bottom-10 z-10 text-7xl md:text-8xl lg:text-9xl font-extrabold text-cyan-900 drop-shadow-xl"
        >
          Prime Code
        </motion.h1>

        <motion.h2
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3, duration: 0.8 }}
          className="mt-2 z-10 text-3xl md:text-4xl font-semibold text-cyan-700"
        >
          Integrujemy markę w codziennych działaniach
        </motion.h2>

        {/* Tagline */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5, duration: 0.8 }}
          className="mt-4 z-10 text-xl md:text-2xl text-cyan-600"
        >
          Marka, która działa codziennie. W czasie rzeczywistym. W każdym punkcie styku.
        </motion.p>

        {/* Dekoracyjna linia */}
        <motion.div
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="mt-6 mb-6 w-32 h-1.5 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 origin-left z-10"
        />

        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.0, duration: 0.8 }}
          className="z-10 max-w-3xl text-lg md:text-xl text-gray-700 leading-relaxed"
        >
          W Prime Code integrujemy markę z tym, co najważniejsze – realnymi działaniami, danymi,
          technologią i zespołami. Nie tworzymy kampanii dla samej widoczności. Projektujemy
          <strong className="font-semibold"> mechanizmy wzrostu</strong>, w których marka staje się fundamentem
          operacyjnym: w komunikacji, sprzedaży, doświadczeniu klienta, polityce cenowej i kanałach dystrybucji.
        </motion.p>

        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.2, duration: 0.8 }}
          className="mt-4 z-10 max-w-3xl text-lg md:text-xl text-gray-700 leading-relaxed"
        >
          Bo marka <strong className="font-semibold">to nie tylko opowieść.</strong> To system. Aktywny,
          skalowalny, zsynchronizowany z organizacją.
        </motion.p>



        {/* Strzałka zachęcająca do przewinięcia */}
        <motion.div
          onClick={scrollToIntegration}
          animate={{ y: [0, 15, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-8 z-10 text-cyan-700 cursor-pointer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-10 w-10"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>

        </motion.div>

      </section>



      {/* Dlaczego integracja marki to konieczność */}
      <section
        id="DlaczegoIntegracji"
        className="relative flex flex-col justify-center items-center min-h-screen py-20 overflow-hidden"
      >
        <div className="relative max-w-4xl mx-auto px-6">
          {/* Nagłówek */}
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-4xl font-bold mb-4 text-center text-cyan-800"
          >
            Dlaczego integracja marki to konieczność?
          </motion.h2>
          <div className="mx-auto mb-10 h-1 w-20 bg-cyan-600" />

          {/* Karta treści */}
          <motion.div
            initial={{ opacity: 0, scale: 0.98 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="bg-white border border-cyan-100 rounded-none p-8 md:p-10 text-gray-800 space-y-6 shadow"
          >
            {/* Akapit 1 */}
            <div className="grid grid-cols-[16px_1fr] gap-3 items-start">
              <span
                className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
                aria-hidden="true"
              />
              <p>
                <strong className="text-cyan-800">76% konsumentów oczekuje</strong>, że marka będzie
                <strong className="text-cyan-800"> przewidywać ich potrzeby</strong>, nie tylko reagować
                <span className="text-gray-500"> (Salesforce, 2023)</span>.
              </p>
            </div>

            {/* Akapit 2 */}
            <div className="grid grid-cols-[16px_1fr] gap-3 items-start">
              <span
                className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
                aria-hidden="true"
              />
              <p>
                Pokolenie Z <strong className="text-cyan-800">nie buduje lojalności przez reklamy</strong>.
                Buduje ją przez <strong className="text-cyan-800">wartość, użyteczność i autentyczność</strong>.
                <span className="font-semibold text-gray-800"> Aż 65% młodych konsumentów</span> deklaruje,
                że lojalność wobec marki zależy od spójnych i realnych doświadczeń
                <span className="text-gray-500"> (McKinsey, 2023)</span>.
              </p>
            </div>

            {/* Punkt nadrzędny + podpunkty */}
            <div className="grid grid-cols-[16px_1fr] gap-3 items-start">
              {/* kropka poziomu 1 */}
              <span
                className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
                aria-hidden="true"
              />
              <div>
                <p>Marka nie żyje w kampaniach. Żyje w:</p>

                {/* podpunkty (poziom 2) */}
                <ul className="mt-2 space-y-2">
                  {[
                    'chatbotach, landingach, mailach i pushach,',
                    'procesach sprzedażowych i onboardingowych,',
                    'sposobie, w jaki działa Twój model cenowy, UX i obsługa klienta.',
                  ].map((txt, i) => (
                    <li key={i} className="grid grid-cols-[12px_1fr] gap-3 items-start">
                      {/* mniejsza kropka poziomu 2 */}
                      <span
                        className="mt-1 block w-2 h-2 rounded-full bg-cyan-500 shrink-0"
                        aria-hidden="true"
                      />
                      <span>{txt}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>


            {/* Akapit 4 */}
            <div className="grid grid-cols-[16px_1fr] gap-3 items-start">
              <span
                className="mt-1 block w-2.5 h-2.5 rounded-full bg-cyan-600 shrink-0"
                aria-hidden="true"
              />
              <p>
                Jeśli to wszystko nie gra razem, marka <strong className="text-cyan-800">traci moc</strong>.
                <br />
                <strong className="text-cyan-800">I traci klientów.</strong>
                <span className="text-gray-500"> Według badania PwC aż 32% klientów</span> porzuca markę po jednej
                złej interakcji, nawet jeśli wcześniej byli zadowoleni.
              </p>
            </div>
          </motion.div>
        </div>

        {/* Strzałka do kolejnej sekcji */}
        <motion.div
          onClick={() => document.getElementById('Sytuacje')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 15, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 z-10 text-cyan-700 cursor-pointer"
          aria-label="Przewiń do sekcji: Czy znasz te sytuacje?"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div>
      </section>









      {/* Czy znasz te sytuacje? */}
      <section id='Sytuacje' className="relative flex flex-col justify-center items-center min-h-screen py-24  overflow-hidden">
        <div className="max-w-6xl mx-auto px-6">
          {/* Dynamiczne tło */}
          {/* <div className="absolute inset-0">
            <div className="absolute -top-40 -left-40 w-96 h-96 bg-cyan-300 opacity-20 rounded-full blur-3xl animate-blob"></div>
            <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-blue-300 opacity-20 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
          </div> */}
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-4xl font-bold mb-14 text-center text-cyan-700 drop-shadow"
          >
            Czy znasz te sytuacje?
          </motion.h2>

          <div className="grid md:grid-cols-2 gap-8">
            {[
              {
                title: "1. Brak spójności w komunikacji",
                text: "Różne działy (np. marketing, sprzedaż, obsługa klienta) komunikują się w różnym tonie i z odmiennym przekazem."
              },
              {
                title: "2. Realizacja działań promocyjnych bez odniesienia do tożsamości marki",
                text: "Firma wdraża modne działania (np. TikTok, influencerzy, AI copywriting) bez filtrowania ich przez tożsamość i wartości marki."
              },
              {
                title: "3. Problemy w skalowaniu działań",
                text: "Przy szybkim wzroście lub ekspansji różne zespoły zaczynają prowadzić działania niespójne z tożsamością marki."
              },
              {
                title: "4. Zmiany w zespole / outsourcing marketingu",
                text: "Nowe osoby lub agencje marketingowe nie rozumieją w pełni marki i działają według własnych schematów."
              },
              {
                title: "5. Brak narzędzi lub procesów ułatwiających pracę z marką",
                text: "Pracownicy nie mają dostępu do aktualnych wytycznych (brand plan, key visuals, archetypy, kroki milowe)."
              },
              {
                title: "6. Brak mierzalnego modelu integracji marki",
                text: "Firma nie ma sposobu, by sprawdzić, czy kampania, post czy oferta są zgodne z marką."
              }
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15, duration: 0.7, ease: 'easeOut' }}
                className="p-6 bg-cyan-50/70 backdrop-blur-sm border border-cyan-100 rounded-none shadow hover:shadow-lg transition"
              >
                <h3 className="text-xl font-semibold text-cyan-700 mb-2">{item.title}</h3>
                <p className="text-gray-700">{item.text}</p>
              </motion.div>
            ))}
          </div>
        </div>
        {/* Strzałka do sekcji Partner */}
        <motion.div
          onClick={() => document.getElementById('Partner')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 15, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 z-10 text-cyan-700 cursor-pointer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-10 w-10"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div>
      </section>


      {/* Potrzebujesz partnera, który... */}
      <section
        id="Partner"
        className="relative flex flex-col justify-between items-center min-h-screen py-24 overflow-hidden"
      >
        {/* Tło dekoracyjne */}
        {/* <div className="absolute -top-20 -left-20 w-72 h-72 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
        <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse" /> */}

        <div className="relative z-10 max-w-5xl mx-auto px-6 w-full flex-grow flex flex-col justify-center items-center">
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-4xl font-bold mb-12 text-center text-cyan-800 drop-shadow"
          >
            Potrzebujesz partnera, który:
          </motion.h2>

          <motion.ul
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.9, ease: 'easeOut' }}
            className="space-y-6 text-lg leading-relaxed bg-white/70 backdrop-blur-lg border border-cyan-100 shadow-2xl rounded-none p-10 w-full"
          >
            {[
              "myśli procesami, nie kanałami?",
              "łączy branding z danymi, CX i automatyzacją?",
              "projektuje mechanizmy wzrostu, a nie tylko „fajny content”?",
              "wdraża AI w obsłudze marki, zamiast tylko mówić o trendach?",
              "testuje i optymalizuje, zamiast zgadywać?"
            ].map((item, i) => (
              <li key={i} className="flex items-start gap-4">
                <span className="w-5 h-5 flex-shrink-0 rounded-full bg-cyan-500 mt-1" />
                <span className="text-gray-800">
                  <strong>{item.split(" ")[0]}</strong> {item.replace(item.split(" ")[0], "")}
                </span>
              </li>
            ))}
          </motion.ul>

          {/* Nowa, wizualna dekoracja bez tekstu */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3, duration: 0.8 }}
            className="mt-16 flex justify-center items-center space-x-6"
          >
            <div className="w-24 h-24 bg-cyan-200 rounded-full blur-2xl animate-blob animation-delay-2000" />
            <div className="w-32 h-32 bg-blue-200 rounded-full blur-3xl animate-blob" />
            <div className="w-20 h-20 bg-cyan-100 rounded-full blur-xl animate-blob animation-delay-1000" />
          </motion.div>
        </div>

        {/* Animowany napis i strzałka przewijająca do Model */}
        <motion.div
          onClick={() => document.getElementById('Model')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
        >
          <span className="text-lg font-medium mb-2">Spójrz na model Prime Code</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-8 w-8"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div>
      </section>




      {/* Model Prime Code */}
      <motion.section
        id="Model"
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
      >
        {/* Dekoracyjne tło */}
        {/* <div className="absolute -top-20 -left-20 w-72 h-72 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
        <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse" /> */}

        <div className="relative z-10 max-w-6xl w-full mx-auto px-6 flex-grow flex flex-col justify-center items-center">
          <h2 className="-mt-4 text-3xl font-bold mb-4 text-cyan-800 text-center">
            Model Prime Code: marka jako system operacyjny
          </h2>
          <p className="-mt-2 text-gray-700 max-w-3xl mx-auto mb-12 text-center">
            W klasycznym ujęciu marka to obietnica. W dzisiejszej rzeczywistości to{' '}
            <strong>system działania</strong>. Prime Code traktuje markę jak{' '}
            <strong>system operacyjny</strong> firmy: regulujący rytm decyzji,
            komunikacji i doświadczeń klienta. Spójność przestaje być tylko
            kwestią estetyki a staje się{' '}
            <strong>mierzalnym źródłem przewagi</strong>.
          </p>

          {/* Siatka kafelków – bez shared layout na całej siatce */}
          <div className="grid md:grid-cols-3 gap-6 lg:gap-8 items-start">
            {tiles.map((tile, index) => (
              <Tile
                key={index}
                open={expandedIndex === index}
                onOpen={() => setExpandedIndex(index)}
                onClose={() => setExpandedIndex(null)}
                title={tile.title}
                short={tile.short}
                output={tile.output}
                efekt={tile.efekt}
                details={tile.details}
              />
            ))}
          </div>

        </div>

        {/* Strzałka przewijania do następnej sekcji */}
        <motion.div
          onClick={() => document.getElementById('CoPotrafimy')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
        >
          <span className="text-lg font-medium mb-2">Zobacz Co potrafimy?</span>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div>
      </motion.section>




      {/* Co potrafimy? */}
      <motion.section
        id="CoPotrafimy"
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8 }}
        className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
      >

        {/* Główna zawartość wyśrodkowana pionowo */}
        <div className="max-w-5xl w-full mx-auto px-6 flex-grow flex flex-col justify-center">
          <h2 className="text-4xl font-bold mb-14 text-center text-cyan-800 drop-shadow">
            Co potrafimy?
          </h2>

          <motion.ul
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.9, ease: 'easeOut' }}
            className="space-y-4 text-lg leading-relaxed bg-white/70 backdrop-blur-lg border border-cyan-100 shadow-2xl rounded-none p-10"
          >
            {[
              "Projektujemy marki, które rosną dzięki danym i doświadczeniu użytkownika",
              "Tworzymy systemy komunikacji, a nie tylko tone of voice",
              "Zarządzamy marką tak jak innowacyjnym produktem lub usługą: zwinnie, testy, feedback, iteracje",
              "Wdrażamy AI w miejscach, które mają znaczenie dla doświadczenia marki",
              "Projektujemy onboarding, optymalizujemy punkty styku z klientem i mechanizmy wzrostu",
              "Projektujemy szablony i piszemy playbooki dla marketingu, sprzedaży, HR i obsługi klienta z marką w centrum"
            ].map((item, i) => (
              <li key={i} className="flex items-start gap-4">
                <span className="w-2.5 h-2.5 mt-2 flex-shrink-0 rounded-full bg-cyan-600"></span>
                <span className="text-gray-800">{item}</span>
              </li>
            ))}
          </motion.ul>
        </div>

        {/* Strzałka przewijania do następnej sekcji */}
        <motion.div
          onClick={() => document.getElementById('JakDzialamy')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
        >
          <span className="text-lg font-medium mb-2">Zobacz, jak to działa</span>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div>
      </motion.section>




      {/* Zobacz, jak to działa bez ryzyka */}
      <motion.section
        id="JakDzialamy"
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8 }}
        className="relative flex flex-col justify-center items-center min-h-screen pt-12 pb-32 overflow-hidden"
      >
        {/* Dekoracje w tle */}
        {/* <div className="absolute -top-24 -left-24 w-96 h-96 bg-cyan-200 rounded-full blur-3xl opacity-30 animate-pulse" />
        <div className="absolute -bottom-24 -right-24 w-80 h-80 bg-blue-300 rounded-full blur-3xl opacity-30 animate-pulse" /> */}

        {/* Główna zawartość */}
        <div className="relative z-10 max-w-5xl w-full mx-auto px-6 flex-grow flex flex-col justify-center items-center text-center">
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-4xl font-bold mb-6 text-cyan-800 drop-shadow"
          >
            Zobacz, jak to działa bez ryzyka
          </motion.h2>
          <motion.h3
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2, duration: 0.8 }}
            className="text-2xl font-semibold mb-8 text-gray-800"
          >
            Brand Daily Test
          </motion.h3>
          <motion.p
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3, duration: 0.8 }}
            className="text-lg text-gray-700 max-w-2xl mb-12"
          >
            W 7 dni pokażemy Ci realne luki, szanse i jeden test do wdrożenia od ręki.
          </motion.p>

          <div className="grid md:grid-cols-2 gap-8 w-full">
            {[
              "mini-audyt doświadczeń i danych",
              "mapa punktów styku",
              "insighty do poprawy spójności i skuteczności",
              "1 eksperyment do wdrożenia natychmiast"
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15, duration: 0.6 }}
                className="flex items-start gap-4 bg-white/80 backdrop-blur-lg border border-cyan-100 rounded-none shadow-lg p-5 hover:shadow-xl transition h-full"
              >
                {/* kropka jak w sekcji "Potrzebujesz partnera" */}
                <span
                  className="w-5 h-5 flex-shrink-0 rounded-full bg-cyan-500 mt-1"
                  aria-hidden="true"
                />
                <span className="text-gray-800">{item}</span>
              </motion.div>
            ))}
          </div>


          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5, duration: 0.8 }}
            className="mt-12 text-lg text-gray-700"
          >
            <a href='#Kontakt' className="font-semibold underline decoration-cyan-600 underline-offset-4 hover:opacity-80">
              Efekty zanim podejmiesz decyzję o dalszej współpracy.
            </a>
          </motion.p>
        </div>

        {/* Strzałka przewijania do następnej sekcji
        <motion.div
          onClick={() => document.getElementById('PomogliśmyCaseStudies')?.scrollIntoView({ behavior: 'smooth' })}
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: 'easeInOut' }}
          className="absolute bottom-10 flex flex-col items-center text-cyan-700 cursor-pointer"
        >
          <span className="text-lg font-medium mb-2">Zobacz komu pomogliśmy</span>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </motion.div> */}
      </motion.section>




      {/* Połączona sekcja „Pomogliśmy” + „Case Studies” (STATYCZNIE) */}
      <motion.section
        id="PomogliśmyCaseStudies"
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8 }}
        className="py-24 relative overflow-visible min-h-screen"
      >
        <div className="max-w-6xl mx-auto px-6 text-center flex flex-col h-full">

          {/* Nagłówek „Pomogliśmy” */}
          <h2 className="text-4xl font-bold mb-10 text-cyan-800">
            Pomogliśmy
          </h2>

          {/* LISTA STATYCZNA — zamiast karuzel */}
          <div className="space-y-6">
            {/* wiersz 1 */}
            <div className="grid gap-6 md:grid-cols-2">
              {[
                "Ponad 20 firmom farmaceutycznym",
                "Ponad 20 firmom FMCG",
                "Ponad 15 firmom B2B",
                "10 firmom technologicznym i startupom",
              ].map((item, i) => (
                <div
                  key={`row1-${i}`}
                  className="flex items-start gap-4 p-5 bg-white/85 backdrop-blur-md border border-cyan-100 rounded-none shadow-sm hover:shadow-md transition text-left"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6 text-cyan-600 flex-shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth={2}
                    aria-hidden="true"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                  <p className="text-gray-800 text-base md:text-lg leading-relaxed text-left">
                    {item}
                  </p>
                </div>
              ))}
            </div>

            {/* wiersz 2 */}
            <div className="grid gap-6 md:grid-cols-2">
              {[
                "4 bankom i 3 firmom ubezpieczeniowym",
                "5 instytucjom edukacyjnym",
                "Firmom z branży rozrywkowej, modowej, przemysłowej, wydawniczej, rolniczej i wielu innych",
                "Globalnym centralom koncernów z USA, Kanady, Niemiec, Wielkiej Brytanii, Hiszpanii, Węgier i Polski",
              ].map((item, i) => (
                <div
                  key={`row2-${i}`}
                  className="flex items-start gap-4 p-5 bg-white/85 backdrop-blur-md border border-cyan-100 rounded-none shadow-sm hover:shadow-md transition text-left"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6 text-cyan-600 flex-shrink-0"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth={2}
                    aria-hidden="true"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                  <p className="text-gray-800 text-base md:text-lg leading-relaxed text-left">
                    {item}
                  </p>
                </div>
              ))}
            </div>
          </div>


          {/* Case Studies — bez zmian, korzysta z Twojego komponentu CaseCard */}
          <div className="max-w-6xl mx-auto px-6 mt-16">
            <h3 className="text-3xl font-bold mb-10 text-cyan-800">
              Case Studies
            </h3>

            <div className="grid md:grid-cols-3 gap-8 items-start">
              {caseStudies.map((study, index) => (
                <CaseCard
                  key={index}
                  index={index}
                  openIndex={openIndex}
                  setOpenIndex={setOpenIndex}
                  title={study.title}
                  short={study.short}
                  details={study.details}
                />
              ))}
            </div>
          </div>
        </div>
      </motion.section>











      {/* KONTAKT – wyeksponowany baner */}
      <section
        id="Kontakt"
        className="relative w-full bg-gradient-to-r from-cyan-700 via-cyan-600 to-blue-700 text-white py-14 md:py-20"
      >
        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.1fr_0.9fr] gap-10 items-center">
          {/* Tekst + CTA */}
          <div>
            <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
              Zacznij od eksperymentu
            </h2>
            <p className="mt-3 md:mt-4 text-lg text-cyan-100 max-w-xl">
              Zobacz, co marka może zrobić – w 7 dni.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-4">
              <a
                href="mailto:primecode@primecode.pl"
                className="inline-flex items-center justify-center px-6 h-12 bg-white text-cyan-700 font-semibold border border-white hover:opacity-90 transition rounded-none"
                aria-label="Napisz maila do Prime Code"
              >
                {/* mail icon */}
                <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    d="M4 4h16v16H4z M22 6l-10 7L2 6" />
                </svg>
                Napisz maila
              </a>
              <a
                href="tel:+48500133609"
                className="inline-flex items-center justify-center px-6 h-12 bg-transparent text-white font-semibold border border-white hover:bg-white/10 transition rounded-none"
                aria-label="Zadzwoń do Prime Code"
              >
                {/* phone icon */}
                <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
                 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.1 4.18
                 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.93.69 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.24-1.26a2 2 0 0 1 2.11-.45c.91.33 1.86.56 2.84.69A2 2 0 0 1 22 16.92z" />
                </svg>
                Zadzwoń
              </a>
            </div>
          </div>

          {/* Karta z osobą kontaktową */}
          <div className="bg-white text-gray-800 border border-cyan-100 shadow-xl p-6 md:p-7 rounded-none">
            <div className="flex items-center gap-4">
              <img
                src="/jacek.jpg"
                alt="Jacek Pogorzelski – Prime Code"
                className="w-16 h-16 object-cover rounded-full"
              />
              <div>
                <a
                  href="https://jacekpogorzelski.pl"
                  className="text-lg font-semibold text-cyan-700 underline underline-offset-4"
                >
                  Jacek Pogorzelski
                </a>
                <p className="text-sm text-gray-600 mt-0.5">Prime Code</p>
              </div>
            </div>

            <div className="mt-5 space-y-2">
              <a href="mailto:primecode@primecode.pl" className="flex items-center gap-2 group">
                <svg className="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    d="M4 4h16v16H4z M22 6l-10 7L2 6" />
                </svg>
                <span className="group-hover:underline">primecode@primecode.pl</span>
              </a>
              <a href="tel:+48500133609" className="flex items-center gap-2 group">
                <svg className="w-5 h-5 text-cyan-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
                 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.1 4.18
                 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.93.69 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.24-1.26a2 2 0 0 1 2.11-.45c.91.33 1.86.56 2.84.69A2 2 0 0 1 22 16.92z" />
                </svg>
                <span className="group-hover:underline">+48 500 133 609</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER – prosty i równy */}
      <footer className="bg-gradient-to-b from-cyan-100 to-blue-100 border-t border-cyan-200">
        <div className="max-w-6xl mx-auto px-6 py-8">
          <p className="text-center text-sm text-gray-500">© 2025 Prime Code</p>
        </div>
      </footer>


      {/* Quick contact bar */}
      <div
        aria-label="Szybki kontakt"
        className="fixed z-50 bottom-4 right-4 sm:right-6 flex items-center gap-3 bg-white/90 backdrop-blur-md border border-cyan-100 shadow-lg rounded-full px-3 py-2"
      >
        <img src="/jacek.jpg" alt="Jacek Pogorzelski" className="w-7 h-7 rounded-full object-cover" />
        <a href="mailto:primecode@primecode.pl" className="text-sm text-cyan-700 hover:underline">Email</a>
        <span className="text-gray-300">•</span>
        <a href="tel:+48500133609" className="text-sm text-cyan-700 hover:underline">Zadzwoń</a>
      </div>

    </div>
  )
}

function CaseCard({
  index,
  openIndex,
  setOpenIndex,
  title,
  short,
  details
}: {
  index: number
  openIndex: number | null
  setOpenIndex: (i: number | null) => void
  title: string
  short: string
  details: string[]
}) {
  const isOpen = openIndex === index

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6 }}
      whileHover={{ scale: 1.03 }}
      className="bg-white/80 backdrop-blur-lg shadow-xl border border-cyan-100 rounded-none 
                 p-6 flex flex-col justify-between min-h-[220px] max-w-[350px] mx-auto transition-all duration-300"
    >
      <div>
        <h3 className="text-2xl font-semibold text-cyan-700 mb-2">{title}</h3>
        <p className="text-gray-700 mb-4">{short}</p>
      </div>

      <button
        onClick={() => setOpenIndex(isOpen ? null : index)}
        className="mt-auto text-cyan-600 font-semibold hover:underline flex items-center gap-2 focus:outline-none"
      >
        {isOpen ? 'Zwiń' : 'Pokaż szczegóły'}
        <svg
          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : 'rotate-0'}`}
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.ul
            key="expanded"
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="mt-4 list-disc pl-5 text-left text-gray-700 space-y-2 text-sm">
            {details.map((d, idx) => (
              <li key={idx}>{d}</li>
            ))}
          </motion.ul>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

function Tile({
  open,
  onOpen,
  onClose,
  title,
  short,
  output,
  efekt,
  details,
}: {
  open: boolean;
  onOpen: () => void;
  onClose: () => void;
  title: string;
  short: string;
  output: string;
  efekt: string;
  details: React.ReactNode;
}) {
  return (
    <article
      className={
        "flex flex-col rounded-none border border-cyan-100 bg-white/90 transition-shadow duration-300 " +
        (open ? "shadow-xl ring-1 ring-cyan-100" : "shadow")
      }
    >
      {/* Górna, widoczna część – równa wysokość przy stanie zamkniętym */}
      <div className={`p-6 flex flex-col ${open ? "" : "min-h-[280px]"}`}>
        <div className="flex justify-between items-start">
          <h3 className="text-xl font-semibold text-cyan-700 mb-2">{title}</h3>

        </div>

        <p className="text-gray-700 mb-2 leading-relaxed text-justify">{short}</p>

        <p className="text-sm text-gray-700 leading-[1.65]">
          <span className="font-semibold text-cyan-800">Output:</span> {output}
        </p>


        {!open && (
          <div className="mt-auto pt-4 border-t border-cyan-100">
            <button
              type="button"
              onClick={onOpen}
              aria-expanded={open}
              className="text-cyan-600 font-semibold hover:underline cursor-pointer"
            >
              Zobacz więcej
            </button>
          </div>
        )}
      </div>

      {/* Rozwijana część – animujemy tylko wysokość tej sekcji */}
      <motion.div
        initial={false}
        animate={open ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 }}
        transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
        style={{ overflow: "hidden", willChange: "height", position: "relative", top: "-10px" }}
      >
        <div className="px-6 pt-0 pb-6 text-sm text-gray-700">
          {/* typografia: ten sam line-height i marginesy */}
          <div className="text-justify hyphens-auto leading-[1.65] [&>p]:mb-2 [&_ul]:my-2 [&_li]:leading-[1.65]">
            {details}
            <p className="mt-2">
              <span className="font-semibold text-cyan-800">Efekt:</span> {efekt}
            </p>
          </div>

          <div className="mt-4 pt-4 border-t border-cyan-100">
            <button
              type="button"
              onClick={onClose}
              className="text-cyan-600 font-semibold hover:underline cursor-pointer"
            >
              Zwiń
            </button>
          </div>
        </div>
      </motion.div>



    </article>
  );
}