.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */import { useState, useEffect, useRef, useCallback } from "react";
import {
  AlertCircle,
  ClipboardList,
  Clock,
  ArrowRight,
  ChevronDown,
  Check,
  Gauge,
  Lock,
  Sparkles,
  LayoutDashboard,
  Eye,
  FileSpreadsheet,
  BookOpen,
  CalendarDays,
  BarChart3,
  Square,
} from "lucide-react";

/* ─── Scroll fade-in hook ─── */
function useFadeIn() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { el.classList.add("visible"); obs.unobserve(el); } },
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

function FadeIn({ children, className = "", delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
  const ref = useFadeIn();
  return (
    <div ref={ref} className={`fade-in-section ${className}`} style={{ transitionDelay: `${delay}s` }}>
      {children}
    </div>
  );
}

/* ─── FAQ Accordion ─── */
function FAQ({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <FadeIn>
      <div className="bg-card rounded-xl border border-border overflow-hidden mb-3">
        <button
          onClick={() => setOpen(!open)}
          className="w-full flex items-center justify-between px-6 py-5 text-left font-body font-semibold text-foreground text-[1.05rem]"
        >
          <span>{q}</span>
          <ChevronDown
            size={20}
            strokeWidth={1.8}
            strokeLinecap="round"
            className={`shrink-0 ml-4 text-gold-dark transition-transform duration-300 ${open ? "rotate-180" : ""}`}
          />
        </button>
        <div
          className={`overflow-hidden transition-all duration-300 ${open ? "max-h-[600px] opacity-100" : "max-h-0 opacity-0"}`}
        >
          <div className="px-6 pb-5 text-foreground/70 font-body text-[0.95rem] leading-relaxed" dangerouslySetInnerHTML={{ __html: a }} />
        </div>
      </div>
    </FadeIn>
  );
}

/* ─── CTA Button ─── */
function CtaButton({ label = "Megrendelem a FelújításTervet — 4 990 Ft", full = false }: { label?: string; full?: boolean }) {
  return (
    <a
      href="#"
      className={`inline-flex items-center justify-center gap-2 bg-gold text-dark font-body font-bold text-[1rem] rounded-lg px-10 py-[18px] shadow-lg hover:bg-gold-dark hover:text-primary-foreground hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 ${full ? "w-full" : ""}`}
    >
      {label}
      <ArrowRight size={18} strokeWidth={1.8} strokeLinecap="round" />
    </a>
  );
}

/* ─── Mockup SVG ─── */
function MockupSVG() {
  return (
    <div className="mx-auto max-w-[740px] rounded-xl overflow-hidden shadow-2xl border-2 border-forest-mid/40 bg-dark">
      {/* Toolbar */}
      <div className="flex items-center gap-2 px-4 py-3 bg-dark">
        <span className="w-3 h-3 rounded-full bg-alert inline-block" />
        <span className="w-3 h-3 rounded-full bg-gold inline-block" />
        <span className="w-3 h-3 rounded-full bg-sage inline-block" />
        <span className="ml-3 text-primary-foreground/50 font-body text-xs">FelújításTerv_V2_3.xlsx</span>
      </div>
      <svg viewBox="0 0 700 380" className="w-full" xmlns="http://www.w3.org/2000/svg">
        {/* Header bar */}
        <rect x="0" y="0" width="700" height="38" fill="#1B4332" />
        <text x="24" y="25" fill="#E9C46A" fontFamily="Playfair Display, serif" fontSize="14" fontWeight="700">IRÁNYÍTÓPULT</text>

        {/* 4 KPI cards */}
        <rect x="16" y="50" width="160" height="64" rx="8" fill="#1a2e24" />
        <text x="28" y="72" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="9">Összkeret</text>
        <text x="28" y="96" fill="#fff" fontFamily="Plus Jakarta Sans" fontSize="16" fontWeight="700">3 000 000 Ft</text>

        <rect x="188" y="50" width="160" height="64" rx="8" fill="#1a2e24" />
        <text x="200" y="72" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="9">Eddigi kiadás</text>
        <text x="200" y="96" fill="#D62828" fontFamily="Plus Jakarta Sans" fontSize="16" fontWeight="700">1 847 200 Ft</text>

        <rect x="360" y="50" width="160" height="64" rx="8" fill="#1a2e24" />
        <text x="372" y="72" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="9">Maradvány</text>
        <text x="372" y="96" fill="#95D5B2" fontFamily="Plus Jakarta Sans" fontSize="16" fontWeight="700">1 152 800 Ft</text>

        <rect x="532" y="50" width="152" height="64" rx="8" fill="#1a3d28" />
        <text x="544" y="72" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="9">50-50% arány</text>
        <text x="544" y="96" fill="#95D5B2" fontFamily="Plus Jakarta Sans" fontSize="16" fontWeight="700">48% – 52% ✓</text>

        {/* Progress bar */}
        <text x="16" y="140" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="9">Költségvetés felhasználás</text>
        <rect x="16" y="148" width="668" height="12" rx="6" fill="#1a2e24" />
        <rect x="16" y="148" width="407" height="12" rx="6" fill="#2D6A4F" />
        <text x="430" y="158" fill="#ffffff80" fontFamily="Plus Jakarta Sans" fontSize="10">61%</text>

        {/* Room breakdown table */}
        <text x="16" y="186" fill="#ffffffcc" fontFamily="Plus Jakarta Sans" fontSize="10" fontWeight="600">Szobánkénti bontás</text>
        {[
          { name: "Konyha", pct: 78, w: 370 },
          { name: "Fürdőszoba", pct: 65, w: 308 },
          { name: "Nappali", pct: 40, w: 190 },
          { name: "Gyerekszoba", pct: 20, w: 95 },
        ].map((r, i) => (
          <g key={r.name}>
            <text x="24" y={212 + i * 30} fill="#ffffffaa" fontFamily="Plus Jakarta Sans" fontSize="10">{r.name}</text>
            <rect x="130" y={200 + i * 30} width={474} height={10} rx="5" fill="#1a2e24" />
            <rect x="130" y={200 + i * 30} width={r.w} height={10} rx="5" fill="#2D6A4F" />
            <text x={140 + r.w} y={210 + i * 30} fill="#ffffffaa" fontFamily="Plus Jakarta Sans" fontSize="9">{r.pct}%</text>
          </g>
        ))}

        {/* Tab bar */}
        <rect x="0" y="340" width="700" height="40" fill="#0F1A12" />
        {["Irányítópult", "Kiadásnapló", "Költségterv", "50-50%", "LAKTAM", "Ütemterv", "Beszállítók", "Beállítások"].map((t, i) => (
          <text key={t} x={16 + i * 86} y={365} fill={i === 0 ? "#E9C46A" : "#ffffff55"} fontFamily="Plus Jakarta Sans" fontSize="8.5" fontWeight={i === 0 ? "700" : "400"}>{t}</text>
        ))}
      </svg>
    </div>
  );
}

/* ═══════════════════════════════════════════════
   MAIN PAGE
   ═══════════════════════════════════════════════ */
export default function Index() {
  /* Hero stagger */
  const [show, setShow] = useState([false, false, false, false]);
  useEffect(() => {
    show.forEach((_, i) => {
      setTimeout(() => setShow(prev => { const n = [...prev]; n[i] = true; return n; }), 200 + i * 200);
    });
  }, []);

  return (
    <div className="font-body text-foreground">
      {/* ════════ 1. HERO ════════ */}
      <section className="relative bg-forest overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{
          background: "radial-gradient(ellipse 50% 50% at 85% 15%, hsla(153,31%,28%,0.5) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 15% 85%, hsla(153,31%,28%,0.4) 0%, transparent 70%)"
        }} />
        <div className="relative max-w-[780px] mx-auto px-5 py-20 md:py-28 text-center">
          <p className={`font-body text-[0.8rem] font-semibold uppercase tracking-[0.12em] text-gold mb-6 transition-all duration-700 ${show[0] ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}>
            Vidéki Otthonfelújítási Program 2025–2026
          </p>
          <h1 className={`font-display font-extrabold text-primary-foreground leading-[1.15] mb-6 transition-all duration-700 ${show[1] ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`} style={{ fontSize: "clamp(2rem, 5.5vw, 3.2rem)" }}>
            15 számla, 3 ÁFA-kulcs, 10 szoba —{" "}
            <em className="text-gold">és mindezt a fejedben tartod?</em>
          </h1>
          <p className={`font-body text-primary-foreground/80 leading-relaxed mb-10 transition-all duration-700 ${show[2] ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`} style={{ fontSize: "clamp(1.05rem, 2.2vw, 1.2rem)" }}>
            A felújításod legnagyobb kockázata nem a költség. Hanem az, hogy nincs rendszered — és egyetlen adminisztrációs hiba akár a teljes támogatásba kerülhet.
          </p>
          <div className={`transition-all duration-700 ${show[3] ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}>
            <CtaButton />
            <p className="mt-4 text-primary-foreground/50 text-[0.82rem] font-body">
              Egyszeri díj · Azonnali letöltés · Supporttal
            </p>
          </div>
        </div>
      </section>

      {/* ════════ 2. SOCIAL PROOF BAR ════════ */}
      <section className="bg-dark py-5">
        <div className="max-w-[960px] mx-auto px-5 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-center">
          {[
            ["4 148", "képlet"],
            ["9", "munkalap"],
            ["31", "LAKTAM kategória"],
            ["0", "hiba"],
            ["5", "verzió"],
          ].map(([num, label]) => (
            <div key={label} className="flex items-baseline gap-2">
              <span className="font-display font-bold text-gold text-xl">{num}</span>
              <span className="text-primary-foreground/50 font-body text-sm">{label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ════════ 3. PAIN POINTS ════════ */}
      <section className="bg-cream py-16 md:py-24">
        <div className="max-w-[780px] mx-auto px-5">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3 text-center">A valóság</p>
            <h2 className="font-display font-bold text-foreground text-center text-3xl md:text-4xl mb-4">Ismered ezt az érzést?</h2>
            <p className="text-foreground/70 text-center max-w-[640px] mx-auto mb-12 leading-relaxed">
              Megkaptátok a jogosultsági papírt a MÁK-tól. Az öröm hatalmas — akár 3 millió forint támogatás. De aztán elkezdődik a valódi kihívás.
            </p>
          </FadeIn>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                icon: <AlertCircle size={22} strokeWidth={1.8} strokeLinecap="round" />,
                title: "Az 50-50% szabály, amit mindenki rosszul ért",
                text: "Az anyagköltség és a munkadíj arányának az összköltségre kell stimmelnie — nem az egyes számlákon. Ezt sokan túl későn értik meg. Az eredmény: százezres nagyságrendű veszteség a támogatásból, ami megelőzhető lett volna.",
              },
              {
                icon: <ClipboardList size={22} strokeWidth={1.8} strokeLinecap="round" />,
                title: "Cetlik, telefonos jegyzetek, üres Excel",
                text: "30 számla, 3 féle ÁFA-kulcs, 10 szoba, árajánlatok három különböző kivitelezőtől — és mindezt cetlikre írod, vagy egy üres Excel fájlba próbálod begyömöszölni. A kérdés nem az, hogy hibázol-e. Hanem az, hogy mikor.",
              },
              {
                icon: <Clock size={22} strokeWidth={1.8} strokeLinecap="round" />,
                title: "A LAKTAM nyomtatvány, ami fél napot visz el",
                text: "A MÁK számlaösszesítő formanyomtatványát kézzel kitölteni — 30 számla esetén — nem feladat, hanem rémálom. Egyetlen elírás hiánypótlást jelent: +30 nap várakozás, vagy egyenesen elutasítás.",
              },
            ].map((c, i) => (
              <FadeIn key={i} delay={i * 0.15}>
                <div className="bg-card rounded-xl border border-border p-6 hover:shadow-lg transition-shadow duration-300 h-full">
                  <div className="w-11 h-11 rounded-lg bg-alert/10 text-alert flex items-center justify-center mb-4">
                    {c.icon}
                  </div>
                  <h3 className="font-display font-bold text-foreground text-lg mb-2">{c.title}</h3>
                  <p className="font-body text-foreground/65 text-[0.92rem] leading-relaxed">{c.text}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ 4. QUOTE 1 ════════ */}
      <section className="bg-forest py-14 md:py-20">
        <FadeIn>
          <div className="max-w-[720px] mx-auto px-5 text-center relative">
            <span className="absolute -top-4 left-4 md:left-0 text-gold/30 font-display text-[5rem] leading-none select-none">„</span>
            <blockquote className="font-display italic text-primary-foreground text-xl md:text-2xl leading-relaxed mb-4">
              „Éjszaka arra ébredek, hogy mi van, ha az anyagköltség-munkadíj arány nem stimmel, és visszakérik a támogatást."
            </blockquote>
            <cite className="font-body text-primary-foreground/50 text-sm not-italic">
              — Tipikus gondolat a felújítók Facebook-csoportjaiból
            </cite>
          </div>
        </FadeIn>
      </section>

      {/* ════════ 5. STAKES ════════ */}
      <section className="bg-card py-16 md:py-24">
        <div className="max-w-[780px] mx-auto px-5">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3 text-center">A tét</p>
            <h2 className="font-display font-bold text-foreground text-center text-3xl md:text-4xl mb-4">Ennyibe kerül, ha nincs rendszered</h2>
            <p className="text-foreground/70 text-center max-w-[640px] mx-auto mb-12 leading-relaxed">
              Nem elméleti kockázatokról beszélünk. Ezek a helyzetek naponta történnek a felújítók Facebook-csoportjaiban.
            </p>
          </FadeIn>
          <div className="space-y-4">
            {[
              { text: 'Az 50-50% arány <strong class="text-alert">70-30-ra billen</strong> — és ez nem a végén derül ki, hanem a MÁK-nál. Eredmény: a támogatásból akár 600 000 Ft-tal kevesebbet kapsz vissza. Ha előre láttad volna a számot, másképp osztottad volna el a költségeket.' },
              { text: 'A számlaösszesítőben <strong class="text-alert">elírsz egy ÁFA-kulcsot</strong> — a MÁK hiánypótlást kér. Ez 30+ nappal meghosszabbítja az elbírálást, miközben a kivitelező a pénzre vár, és te közben fizetni próbálsz két irányba.' },
              { text: 'Az eredeti <strong class="text-alert">4 milliós költségvetés elszalad 5,5 millióra</strong> — mert a rejtett költségek (sitt, konténer, váratlan csere) nincsenek tervezve. Iparági tapasztalat: a felújítások 90%-ánál 20-30%-os túlköltekezés az átlag.' },
              { text: 'Az 5%-os ÁFA-val kiállított számlát <strong class="text-alert">jóhiszeműen benyújtod</strong> — holott a 389/2024 rendelet §7(2) alapján az 5%-os tételek nem elszámolhatók. Ezt nem írják a számlára. Ezt neked kell tudnod — vagy a rendszerednek kell kiszűrnie.' },
            ].map((item, i) => (
              <FadeIn key={i} delay={i * 0.1}>
                <div className="flex gap-4 items-start rounded-r-xl border-l-[3px] border-alert p-5" style={{ backgroundColor: "#FFF8F0" }}>
                  <span className="shrink-0 w-8 h-8 rounded-full bg-alert text-primary-foreground flex items-center justify-center font-body font-bold text-sm">{i + 1}</span>
                  <p className="font-body text-foreground/80 text-[0.95rem] leading-relaxed" dangerouslySetInnerHTML={{ __html: item.text }} />
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ 6. BRIDGE ════════ */}
      <section className="bg-cream py-16 md:py-24">
        <div className="max-w-[660px] mx-auto px-5 text-center">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3">A felismerés</p>
            <h2 className="font-display font-bold text-foreground text-3xl md:text-4xl mb-6">A probléma nem az, hogy nincs elég információ</h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-foreground/70 leading-relaxed mb-4">
              Az ott van a MÁK honlapján, a kormany.hu-n, a Facebook-csoportokban. Száz poszt, ezer komment, tucatnyi cikk.
            </p>
            <p className="text-foreground/70 leading-relaxed mb-4">
              A probléma az, hogy nincs rendszered, ami a saját adataidat nyilvántartja, kiszámolja az arányokat, és figyelmeztet, mielőtt baj lenne.
            </p>
            <p className="text-foreground font-semibold leading-relaxed mb-8">
              Nem jobb cetli kell. <strong>Rendszer kell.</strong>
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="inline-block bg-forest text-gold font-display italic text-lg px-8 py-4 rounded-lg">
              Nem tanácsot ad — kiszámolja, amit beírsz.
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ════════ 7. PRODUCT REVEAL ════════ */}
      <section className="bg-forest py-16 md:py-24">
        <div className="max-w-[960px] mx-auto px-5">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold mb-3 text-center">A megoldás</p>
            <h2 className="font-display font-bold text-primary-foreground text-center text-3xl md:text-4xl mb-4">
              Bemutatjuk a <em className="text-gold">FelújításTervet</em>
            </h2>
            <p className="text-primary-foreground/70 text-center max-w-[700px] mx-auto mb-12 leading-relaxed">
              A felújításod műszerfala — egyetlen táblázat, ami automatikusan számol, rendszerez és figyelmeztet, miközben te csak beírod a számláidat.
            </p>
          </FadeIn>
          <FadeIn delay={0.15}>
            <MockupSVG />
          </FadeIn>
          <div className="grid md:grid-cols-3 gap-6 mt-12 max-w-[780px] mx-auto">
            {[
              { icon: <Gauge size={22} strokeWidth={1.8} strokeLinecap="round" />, title: "Sebesség", text: "A kiadásaid üteme — látod, milyen tempóban fogyasztod a keretet" },
              { icon: <Lock size={22} strokeWidth={1.8} strokeLinecap="round" />, title: "Üzemanyag", text: "A maradék keret — mindig tudod, mennyi van még hátra" },
              { icon: <Sparkles size={22} strokeWidth={1.8} strokeLinecap="round" />, title: "Motorfény", text: "Az 50-50% arány figyelmeztetés — ha felbillen, azonnal látod" },
            ].map((c, i) => (
              <FadeIn key={i} delay={0.2 + i * 0.1}>
                <div className="border border-primary-foreground/20 rounded-xl p-6 bg-primary-foreground/5">
                  <div className="text-gold mb-3">{c.icon}</div>
                  <h3 className="font-display font-bold text-primary-foreground text-lg mb-1">{c.title}</h3>
                  <p className="font-body text-primary-foreground/60 text-[0.9rem] leading-relaxed">{c.text}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ 8. FEATURES ════════ */}
      <section className="bg-card py-16 md:py-24">
        <div className="max-w-[780px] mx-auto px-5">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3 text-center">Mit kapsz</p>
            <h2 className="font-display font-bold text-foreground text-center text-3xl md:text-4xl mb-4">9 munkalap, egyetlen rendszer</h2>
            <p className="text-foreground/70 text-center max-w-[640px] mx-auto mb-12 leading-relaxed">
              Minden, amire a felújítás pénzügyi oldalának kezeléséhez szükséged van — egyetlen fájlban, automatizálva.
            </p>
          </FadeIn>
          <div className="divide-y divide-border">
            {[
              {
                icon: <LayoutDashboard size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "Irányítópult",
                text: "Egy képernyő, teljes kép. Keret, kiadás, maradvány, Ft/m², szobánkénti bontás, hátralévő napok — mind automatikusan frissül, ahogy rögzíted a számláidat.",
              },
              {
                icon: <Eye size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "50-50% Figyelő",
                text: "Valós idejű anyag/munkadíj arányszámítás. Nem a végén derül ki, hogy elbillent — hanem azonnal, minden egyes számla rögzítése után. Ha probléma van, figyelmeztetés jelenik meg.",
                tag: "AUTOMATIKUS",
              },
              {
                icon: <FileSpreadsheet size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "LAKTAM Export",
                text: "A számlaösszesítő automatikusan generálódik a kiadásnapló adataiból — LAKTAM-formátumban, anyag/munkadíj bontással. Ami kézzel fél nap, az itt 0 perc. Az 5%-os ÁFA-val kiállított tételek automatikusan kiszűrve.",
                tag: "AUTOMATIKUS",
              },
              {
                icon: <BookOpen size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "300 soros Kiadásnapló",
                text: "Automatikus ÁFA-kezelés (27%/5%/0%/Nincs számla), dátum, szoba, kategória, beszállító — legördülő listákból választasz, a rendszer számol. 31 LAKTAM tevékenységi kategória a teljes §6 lista alapján.",
              },
              {
                icon: <BarChart3 size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "Költségterv + Összehasonlítás",
                text: "Szobánként tervezheted az anyag- és munkadíjat — és menet közben összevetheted a tervezett vs. tényleges számokat. 10 szobahely (6 előre kitöltött + 4 üres, átnevezhető).",
              },
              {
                icon: <CalendarDays size={24} strokeWidth={1.8} strokeLinecap="round" />,
                title: "Ütemterv + Beszállítók",
                text: "Fázisonkénti tervezés dátumokkal, és a beszállítóid adatainak rendszerezett nyilvántartása — egy helyen, nem hat különböző cetlin.",
              },
            ].map((f, i) => (
              <FadeIn key={i} delay={i * 0.08}>
                <div className="flex gap-5 py-6 items-start">
                  <div className="shrink-0 w-14 h-14 rounded-xl bg-mint text-forest flex items-center justify-center">
                    {f.icon}
                  </div>
                  <div>
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className="font-display font-bold text-foreground text-lg">{f.title}</h3>
                      {f.tag && (
                        <span className="bg-mint text-forest-mid font-body text-[0.7rem] font-semibold px-2 py-0.5 rounded-full">{f.tag}</span>
                      )}
                    </div>
                    <p className="font-body text-foreground/65 text-[0.92rem] leading-relaxed">{f.text}</p>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ 9. HOW IT WORKS ════════ */}
      <section className="bg-cream py-16 md:py-24">
        <div className="max-w-[780px] mx-auto px-5 text-center">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3">Hogyan működik</p>
            <h2 className="font-display font-bold text-foreground text-3xl md:text-4xl mb-12">Három lépés — és kézben van a felújítás</h2>
          </FadeIn>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                num: "1",
                title: "Töltsd le, nyisd meg",
                text: "A vásárlás után azonnal letöltöd a fájlt. Megnyitod Google Sheetsben vagy Excelben. A Beállítások lapon kitöltöd az alapadatokat — 15 perc az egész.",
              },
              {
                num: "2",
                title: "Írd be a számláidat",
                text: "A sárga cellákba írsz: nevet, összeget, választasz legördülőből. A rendszer automatikusan számolja az ÁFA-t, az arányokat, az összesítőket. Egy számla = 2 perc.",
              },
              {
                num: "3",
                title: "Nézd az Irányítópultot",
                text: "Minden szám egy helyen: keret, kiadás, maradvány, 50-50% arány, szobánkénti bontás. Ha valami nem stimmel, a rendszer figyelmeztet — nem te keresgélsz.",
              },
            ].map((s, i) => (
              <FadeIn key={i} delay={i * 0.15}>
                <div className="flex flex-col items-center text-center">
                  <div className="w-14 h-14 rounded-full bg-forest text-gold font-display font-bold text-2xl flex items-center justify-center mb-4">
                    {s.num}
                  </div>
                  <h3 className="font-display font-bold text-foreground text-lg mb-2">{s.title}</h3>
                  <p className="font-body text-foreground/65 text-[0.92rem] leading-relaxed">{s.text}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ 10. QUOTE 2 ════════ */}
      <section className="bg-forest py-14 md:py-20">
        <FadeIn>
          <div className="max-w-[720px] mx-auto px-5 text-center relative">
            <span className="absolute -top-4 left-4 md:left-0 text-gold/30 font-display text-[5rem] leading-none select-none">„</span>
            <blockquote className="font-display italic text-primary-foreground text-xl md:text-2xl leading-relaxed mb-4">
              „Nem vagyok könyvelő, nem vagyok építész — de ÉN felelek a családom pénzéért."
            </blockquote>
            <cite className="font-body text-primary-foreground/50 text-sm not-italic">
              — Ennek a rendszernek pontosan ez az oka
            </cite>
          </div>
        </FadeIn>
      </section>

      {/* ════════ 11. TRANSPARENCY ════════ */}
      <section className="bg-card py-16 md:py-24">
        <div className="max-w-[660px] mx-auto px-5">
          <FadeIn>
            <div className="border-2 border-border rounded-xl p-8 text-center">
              <h2 className="font-display font-bold text-foreground text-2xl md:text-3xl mb-3">Amit a FelújításTerv nem csinál</h2>
              <p className="text-foreground/70 mb-8 leading-relaxed">
                Fontos, hogy pontosan tudd, mit kapsz — és mit nem. Nem akarunk többet ígérni, mint amit a termék teljesít.
              </p>
              <div className="space-y-3 text-left mb-8">
                {[
                  "Nem ad jogi, könyvelési vagy pénzügyi tanácsot",
                  "Nem helyettesíti a MÁK hivatalos formanyomtatványait",
                  "Nem garantálja a támogatás jóváhagyását",
                  "Nem igényel internetet a működéshez (offline is megy)",
                ].map((t, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <Square size={18} strokeWidth={1.8} strokeLinecap="round" className="shrink-0 text-alert mt-0.5" />
                    <span className="font-body text-foreground/75 text-[0.95rem]">{t}</span>
                  </div>
                ))}
              </div>
              <div className="bg-mint rounded-lg p-5 text-left">
                <p className="font-body text-foreground text-[0.95rem] leading-relaxed">
                  <strong>Amit csinál:</strong> számol, rendszerez, figyelmeztet és összesít. A feltételekről a hivatalos forrásokon tájékozódj — a táblázatban ott vannak a közvetlen linkek a kormany.hu-ra és az allamkincstar.gov.hu-ra.
                </p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ════════ 12. FAQ ════════ */}
      <section className="bg-cream py-16 md:py-24">
        <div className="max-w-[720px] mx-auto px-5">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3 text-center">Kérdések és válaszok</p>
            <h2 className="font-display font-bold text-foreground text-center text-3xl md:text-4xl mb-10">Még mielőtt döntenél</h2>
          </FadeIn>
          <FAQ
            q="Ingyen is megcsinálom Excelben — minek fizessek?"
            a="Meg tudod csinálni, hogy automatikusan számolja az 50-50% arányt, figyelmeztetést adjon, LAKTAM-formátumban összesítsen, kiszűrje az 5%-os ÁFA-s tételeket, és mindezt 4&nbsp;148 képlettel? Egy üres Excel és egy felépített rendszer között ugyanaz a különbség, mint egy üres papír és egy kész térkép között."
          />
          <FAQ
            q="4 990 Ft sok egy táblázatért"
            a="A felújításod 4-8 millió forint. Ennek az 4&nbsp;990 Ft a 0,1%-a — kevesebb, mint egyetlen pizzarendelés. Ha a rendszer egyetlen számolási hibát megelőz, már többszörösen megtérült. Ha nem előz meg semmit — mert nálad amúgy is minden rendben lett volna — akkor is egy teljes nyilvántartási rendszered van, ami szobánként, fázisonként, beszállítónként szervezve mutatja a felújításod."
          />
          <FAQ
            q="Nem értek az Excelhez — nekem ez túl bonyolult lesz?"
            a="A sárga cellákba írsz — nevet, összeget, dátumot. A kategóriát legördülő listából választod. A többi automatikus: a képletek számolnak, a formázás figyelmeztet, az összesítő generálódik. Ha valami mégsem működik, írsz az info@felujitasiterv.hu-ra — segítünk."
          />
          <FAQ
            q="Mi van, ha változik a jogszabály?"
            a="Írsz az info@felujitasiterv.hu-ra, és kérsz frissített verziót. Ha a jogszabályi változás érinti a képleteket, megvizsgáljuk és frissítjük a rendszert."
          />
          <FAQ
            q="Honnan tudjam, hogy jók a képletek?"
            a="A képletek matekja egyszerű: összeadás, arány, minimum. Bármikor ellenőrizheted — a képletvédelem a struktúrát védi, nem a képleteket rejti el. 5 verzión, 4&nbsp;148 képleten mentünk végig teszteléssel. Ha hibát találsz, jelezd — javítjuk."
          />
          <FAQ
            q="Nekem csak pár számlám lesz — megéri így is?"
            a={'Az 50-50% arány 3 számlánál is fontos — ha azokat rosszul tartod nyilván, ugyanúgy baj van. És a felújítás közben kiderül, hogy a u201Epár számlau201D valójában 15-20 tétel, mert minden anyagbeszerzés, minden alvállalkozó, minden váratlan javítás külön sor.'}
          />
          <FAQ
            q="Majd ha elkezdjük a felújítást — most még korai"
            a="A legnagyobb érték a tervezésben van — nem a nyilvántartásban. Ha az első számlánál kezded, az 50-50% arány az első forinttól rendben van. Ha a felújítás közepén kezded, már nincs idő korrigálni."
          />
        </div>
      </section>

      {/* ════════ 13. PRICING ════════ */}
      <section className="bg-forest py-16 md:py-24">
        <div className="max-w-[780px] mx-auto px-5 text-center">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold mb-3">Az ár</p>
            <h2 className="font-display font-bold text-primary-foreground text-3xl md:text-4xl mb-4">Mennyit ér a nyugalom?</h2>
            <p className="text-primary-foreground/70 max-w-[600px] mx-auto mb-12 leading-relaxed">
              Egyetlen rosszul nyilvántartott számla többszázezer forintba kerülhet. A teljes rendszer, ami ezt megelőzi — kevesebbe, mint egy pizzarendelés.
            </p>
          </FadeIn>
          <FadeIn delay={0.15}>
            <div className="max-w-[440px] mx-auto bg-primary-foreground/10 border border-sage/30 rounded-2xl overflow-hidden">
              <div className="h-1 bg-gradient-to-r from-gold to-gold-dark" />
              <div className="p-8">
                <p className="font-display font-bold text-gold text-[3.5rem] leading-none mb-2">4 990 Ft</p>
                <p className="text-primary-foreground/60 font-body text-sm mb-8">Egyszeri díj — nem előfizetés</p>
                <div className="space-y-3 text-left mb-8">
                  {[
                    "9 munkalap, 4 148 képlet, 0 hiba",
                    "Automatikus 50-50% figyelő",
                    "LAKTAM Export automatikus generálással",
                    "300 soros kiadásnapló, 31 kategória",
                    "10 szobahely, Ft/m² KPI, Ütemterv",
                    "Beépített Használati Útmutató",
                    "Technikai support e-mailben",
                    "Frissítés kérelemre",
                  ].map((item, i) => (
                    <div key={i} className="flex items-start gap-3">
                      <Check size={18} strokeWidth={1.8} strokeLinecap="round" className="shrink-0 text-gold mt-0.5" />
                      <span className="font-body text-primary-foreground/80 text-[0.92rem]">{item}</span>
                    </div>
                  ))}
                </div>
                <CtaButton label="Megrendelem — 4 990 Ft" full />
              </div>
            </div>
          </FadeIn>
          <FadeIn delay={0.25}>
            <p className="mt-8 text-primary-foreground/50 text-[0.88rem] font-body max-w-[500px] mx-auto leading-relaxed">
              A felújításod 4–8 millió forint. Ennek a rendszernek az ára a költségvetésed 0,1%-a. Ha egyetlen hibát megelőz, százszorosan megtérül.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* ════════ 14. FINAL CTA ════════ */}
      <section className="bg-cream py-16 md:py-24">
        <div className="max-w-[660px] mx-auto px-5 text-center">
          <FadeIn>
            <p className="font-body text-[0.75rem] font-semibold uppercase tracking-[0.12em] text-gold-dark mb-3">Határidő: 2026. június 30.</p>
            <h2 className="font-display font-bold text-foreground text-3xl md:text-4xl mb-4">A támogatási keret véges, a kivitelezői kapacitás fogy</h2>
            <p className="text-foreground/70 max-w-[580px] mx-auto mb-10 leading-relaxed">
              Nem holnap kell döntened. De az első számlánál már rendszerben kell gondolkodnod. A FelújításTerv 15 perc alatt beállítható — és utána minden forintot nyomon követ helyetted.
            </p>
            <CtaButton />
            <p className="mt-4 text-foreground/50 text-[0.82rem] font-body">
              Egyszeri díj · Azonnali letöltés · Google Sheets és Excel kompatibilis
            </p>
          </FadeIn>
        </div>
      </section>

      {/* ════════ 15. FOOTER ════════ */}
      <footer className="bg-dark py-10">
        <div className="max-w-[780px] mx-auto px-5 text-center">
          <p className="font-display font-bold text-primary-foreground text-lg mb-1">FelújításTerv</p>
          <p className="text-primary-foreground/50 text-sm mb-4">Otthonfelújítási Költségtervező</p>
          <p className="text-primary-foreground/40 text-sm mb-4">
            <a href="mailto:info@felujitasiterv.hu" className="hover:text-gold transition-colors">info@felujitasiterv.hu</a>
            {" · "}
            <a href="#" className="hover:text-gold transition-colors">ÁSZF</a>
            {" · "}
            <a href="#" className="hover:text-gold transition-colors">Adatvédelmi tájékoztató</a>
          </p>
          <p className="text-primary-foreground/30 text-xs leading-relaxed max-w-[500px] mx-auto">
            A FelújításTerv nyilvántartási és számolási eszköz. Nem ad jogi, könyvelési vagy pénzügyi tanácsot.
            A támogatási feltételekről a kormany.hu és az allamkincstar.gov.hu oldalakon tájékozódj.
          </p>
        </div>
      </footer>
    </div>
  );
}/* End custom CSS */