/* Page sections: TopNav, Hero, CentrumToggle, HowItWorks, LongTerm, SocialProof, FAQ, Footer, StickyBottomBar */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Top nav ---------- */
/** Sticky live-data announcement bar. Shows rotating LIVE events
 *  (same kind of messages as the hero LiveTicker, e.g. "Bálint épp adott").
 *  Stays fixed at the top on all viewports.
 */
function AnnouncementBar({ centrumName }) {
  const messages = useMemo(() => [
    "Réka épp adott · +10.000 Ft",
    `Most szabadult fel: ${centrumName || "Nyugati"} · 14:30`,
    "Bálint épp adott · +40.000 Ft",
    "Ma 23 fő foglalt — 7 üres slot estére",
    `Most szabadult fel: ${centrumName || "Nyugati"} · 16:15`,
    "Tamás épp adott · +15.000 Ft",
    "Anna épp foglalt · holnap 09:00",
  ], [centrumName]);
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % messages.length), 3200);
    return () => clearInterval(t);
  }, [messages.length]);

  return (
    <div className="sticky top-0 z-50 bg-ink text-white border-b border-white/10 overflow-hidden" style={{ height: 30 }}>
      <div className="h-full px-3 lg:px-6 max-w-7xl mx-auto flex items-center justify-between gap-3">
        <div className="flex items-center gap-2 min-w-0 flex-1">
          <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse shrink-0" aria-hidden />
          <span className="mono text-[10.5px] lg:text-[11.5px] uppercase tracking-wider text-white/60 shrink-0">LIVE</span>
          <span key={idx} className="mono text-[11.5px] lg:text-[12.5px] truncate soft-up" style={{ animationDuration: "300ms" }}>
            {messages[idx]}
          </span>
        </div>
        <span className="mono text-[10.5px] lg:text-[11.5px] text-white/45 hidden sm:inline shrink-0">3 centrum nyitva</span>
      </div>
    </div>);

}

function TopNav({ onOpenSheet, onCta }) {
  return (
    <header
      className="sticky z-40 h-14 lg:h-16 flex items-center"
      style={{ top: 30, background: "rgba(250,250,248,0.85)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", borderBottom: "1px solid rgba(232,232,226,0.7)" }}>

      <div className="w-full px-5 lg:px-12 max-w-7xl mx-auto flex items-center justify-between">
        <a href="#" className="flex items-center group" title="Plazmacentrum">
          <img src="assets/logo.png" alt="Plazmacentrum" className="h-6 lg:h-7 w-auto" />
        </a>

        <nav className="hidden lg:flex items-center gap-8 text-[14px] text-ink/70">
          <a href="#how" className="hover:text-ink transition">Hogy zajlik</a>
          <a href="#booking" className="hover:text-ink transition">Foglaló</a>
          <a href="#faq" className="hover:text-ink transition">GYIK</a>
          <a href="#centrums" className="hover:text-ink transition">Centrumok</a>
        </nav>

        <div className="flex items-center gap-2">
          <button onClick={onCta} className="hidden lg:flex h-10 px-4 rounded-xl bg-ink text-white text-[13.5px] font-medium items-center gap-1.5 active:scale-95 transition">
            Foglalok <IArrow size={14} />
          </button>
          <button onClick={onOpenSheet} aria-label="Menu" className="lg:hidden w-9 h-9 -mr-2 flex items-center justify-center text-ink/80 active:scale-95 transition">
            <IMenu size={22} />
          </button>
        </div>
      </div>
    </header>);

}

/* ---------- Centrum toggle (segmented control) ---------- */
function CentrumToggle({ value, onChange, sticky = false, compact = false }) {
  const items = ["nyugati", "blaha", "baja"];
  return (
    <div className={sticky ? "sticky top-14 lg:top-16 z-30 py-2 -mt-2 border-b border-border" : ""}
    style={sticky ? { background: "rgba(250,250,248,0.85)", backdropFilter: "blur(14px)" } : {}}>
      <div className={"max-w-3xl mx-auto px-5 lg:px-12 " + (sticky ? "py-1" : "")}>
        <div role="tablist" className={"relative grid grid-cols-3 gap-1 p-1 rounded-2xl border border-border " + (sticky ? "bg-white/70" : "bg-white/80")}>
          {items.map((k) => {
            const c = CENTRUMS[k];
            const active = value === k;
            return (
              <button
                key={k}
                role="tab"
                aria-selected={active}
                onClick={() => onChange(k)}
                className={"relative h-10 lg:h-11 rounded-xl text-[14px] lg:text-[14.5px] font-medium flex items-center justify-center gap-1.5 transition " + (
                active ? "bg-ink text-white shadow-sm" : "text-ink/65 hover:text-ink")}>
                
                <IPin size={14} className="opacity-90" />
                <span>{c.name}</span>
              </button>);

          })}
        </div>
      </div>
    </div>);

}

/* ---------- Geo toast (above hero, inline pill) ---------- */
function GeoToast({ centrum, dark = false }) {
  return (
    <div className={"inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] whitespace-nowrap " + (
    dark ? "bg-white/10 text-white border border-white/15" : "bg-white text-ink/70 border border-border")}>
      <span className="inline-block w-1.5 h-1.5 rounded-full bg-success" />
      <span className="mono" data-comment-anchor="c163c4008e-span-74-7">Te most: Budapest · {centrum.name} {centrum.distance}</span>
    </div>);

}

/* ---------- Live ticker (animated reality pill) ---------- */
function LiveTicker({ centrum }) {
  const messages = useMemo(() => [
    { kind: "donor",   text: "Réka épp adott · +10.000 Ft" },
    { kind: "slot",    text: `Most szabadult fel: ${centrum.name} · 14:30` },
    { kind: "counter", text: "Ma 23 fő foglalt — 7 üres slot estére" },
    { kind: "donor",   text: "Bálint épp adott · +40.000 Ft" },
    { kind: "slot",    text: `Most szabadult fel: ${centrum.name} · 16:15` },
  ], [centrum.name]);
  const [idx, setIdx] = useState(0);
  const [count, setCount] = useState(23);

  useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => (i + 1) % messages.length);
      setCount(c => c + (Math.random() > 0.65 ? 1 : 0));
    }, 2800);
    return () => clearInterval(t);
  }, [messages.length]);

  const m = messages[idx];
  const displayText = m.kind === "counter" ? `Ma ${count} fő foglalt — 7 üres slot estére` : m.text;

  return (
    <div className="absolute top-4 left-4 right-4 flex items-center justify-between gap-2 pointer-events-none">
      <div key={idx} className="bg-white border-2 border-ink rounded-full px-3 py-1.5 flex items-center gap-2 text-[11px] mono text-ink overflow-hidden max-w-[78%] soft-up" style={{ animationDuration: "260ms" }}>
        <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse shrink-0" />
        <span className="truncate">LIVE · {displayText}</span>
      </div>
      <div className="bg-accent text-white rounded-full px-2.5 py-1.5 text-[11px] mono shrink-0 border-2 border-ink uppercase tracking-wider">
        Véradás
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ centrum, onCta, centrumKey, onCentrumChange }) {
  // Animated count-up on mount
  const [n, setN] = useState(0);
  useEffect(() => {
    const start = performance.now();
    const target = 50000;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 1100);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(target * eased / 100) * 100);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const fmt = (v) => v.toLocaleString("hu-HU").replace(/\u00a0/g, ".");

  return (
    <section className="relative bg-bg overflow-hidden">
      {/* subtle paper texture */}
      <div className="absolute inset-0 paper pointer-events-none opacity-30" />

      {/* faint cream wash behind the headline (single, restrained) */}
      <div className="absolute -left-32 top-20 w-[520px] h-[520px] rounded-full opacity-60 blur-3xl pointer-events-none" style={{ background: "#F5F0E8" }} />

      {/* Spinning corner stamp removed — decorative, no conversion value */}

      <div className="relative px-5 lg:px-12 pt-6 lg:pt-12 pb-16 lg:pb-24 max-w-7xl mx-auto" data-comment-anchor="4ff641181b-div-105-7">
        {/* Top row: unified pills */}
        <div className="flex flex-wrap items-center gap-2">
          <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-accent text-white text-[12px] mono whitespace-nowrap font-semibold">
            <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
            akció · június 30-ig
          </span>
          <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink text-white text-[12px] mono whitespace-nowrap">
            <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
            3 centrum nyitva
          </span>
          <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink text-white text-[12px] mono whitespace-nowrap">
            <span className="w-1.5 h-1.5 rounded-full bg-butter" />
            készpénz, azonnal
          </span>
        </div>

          {/* Main grid */}
          <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start mt-8 lg:mt-12">
          {/* LEFT — headline & content */}
          <div className="lg:col-span-7 relative" data-comment-anchor="329377ca6d-div-118-11">
            {/* Rotating sticker badge — REAL deadline urgency */}
            <div className="absolute -top-2 lg:-top-6 right-0 lg:right-12 z-20 pointer-events-none">
              <div className="rotate-[8deg] bg-accent text-white rounded-2xl px-3.5 py-2 border-2 border-ink shadow-[4px_4px_0_0_rgba(10,10,10,1)]">
                <div className="serif text-[16px] lg:text-[20px] leading-none whitespace-nowrap">Emelt díj <em>június&nbsp;30-ig!</em></div>
              </div>
            </div>

            {/* Eyebrow — primary CTA-style callout */}
            <div className="mb-4 inline-flex items-center gap-2">
              <span className="mono text-[12px] lg:text-[13px] uppercase tracking-[0.3em] text-accent font-semibold">Gyere most</span>
              <span className="text-accent text-[14px] -ml-0.5">→</span>
              <span className="mono text-[11px] uppercase tracking-[0.2em] text-ink/40">heti 2 óra</span>
            </div>

            <h1 className="serif text-ink" style={{ letterSpacing: "-0.045em", lineHeight: 0.92 }}>
              {/* Massive count-up number */}
              <span className="block hero-num text-[80px] sm:text-[110px] lg:text-[160px] xl:text-[184px] relative">
                <span className="relative inline-flex items-end gap-3 lg:gap-4">
                  <span className="tabular-nums">{fmt(n)}</span>
                  <span className="serif italic text-accent leading-[0.9]" style={{ fontSize: "0.5em" }}>Ft</span>
                </span>
                {/* red ribbon underline */}
                <span className="absolute -bottom-1 left-0 h-[8px] lg:h-[12px] bg-accent rounded-full" style={{ width: "min(100%, 520px)" }} />
              </span>

              <span className="block hero-num hero-num-2 text-[36px] sm:text-[48px] lg:text-[64px] text-ink/85 mt-8 lg:mt-10">
                <em className="not-italic">Egy hét.</em>
                <span className="mx-3 text-ink/30">·</span>
                <span className="text-ink/65">Két plazmaadás.</span>
              </span>
            </h1>

            {/* Breakdown cards — monochrome rhythm */}
            <div className="mt-10 lg:mt-12 grid grid-cols-3 gap-2 lg:gap-3 max-w-2xl">
              <div className="rounded-2xl bg-white border border-border p-3 lg:p-4 relative">
                <div className="mono text-[10.5px] lg:text-[11px] uppercase tracking-wider text-ink/55">1. alkalom</div>
                <div className="serif text-[26px] lg:text-[40px] leading-none mt-1.5 text-ink">10<span className="text-accent">.000</span></div>
                <div className="text-[11px] lg:text-[12px] mt-1.5 text-ink/55">vizsgálat + első<br />plazmaadás</div>
              </div>
              <div className="rounded-2xl bg-white border border-border p-3 lg:p-4">
                <div className="mono text-[10.5px] lg:text-[11px] uppercase tracking-wider text-ink/55">2. alkalom</div>
                <div className="serif text-[26px] lg:text-[40px] leading-none mt-1.5 text-ink">40<span className="text-accent">.000</span></div>
                <div className="text-[11px] lg:text-[12px] mt-1.5 text-ink/55">50 perc · már<br />életet mentesz</div>
              </div>
              <div className="rounded-2xl bg-ink text-white p-3 lg:p-4 relative overflow-hidden">
                <div className="mono text-[10.5px] lg:text-[11px] uppercase tracking-wider text-white/55">5 alkalom</div>
                <div className="serif text-[26px] lg:text-[40px] leading-none mt-1.5">125<span className="text-white/50">.000</span></div>
                <div className="text-[11px] lg:text-[12px] mt-1.5 text-white/65">készpénz<br />azonnal</div>
                <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-full bg-accent/90" />
              </div>
            </div>

            {/* CTA row */}
            <div className="mt-8 flex flex-col sm:flex-row items-stretch sm:items-center gap-3 soft-up" style={{ animationDelay: "360ms" }}>
              <button
                onClick={onCta}
                className="group h-14 lg:h-16 px-7 lg:px-9 rounded-2xl bg-accent text-white text-[16px] lg:text-[17px] font-medium inline-flex items-center justify-center gap-2 active:scale-[0.99] transition shadow-[0_14px_30px_-12px_rgba(230,57,70,0.7)]">
                
                <span>Időpontot foglalok</span>
                <IArrow size={18} className="opacity-90 group-hover:translate-x-0.5 transition" />
              </button>
              <div className="text-[12.5px] lg:text-[13px] text-ink/60 mono sm:max-w-[180px]">
                20 mp alatt foglalsz<br className="hidden sm:block" />nincs regisztráció előtte
              </div>
            </div>

            {/* Trust strip — unified white */}
            <div className="mt-8 grid grid-cols-3 gap-2 lg:gap-3 max-w-2xl">
              <TrustChip k="OVSZ" v="együttműködés" />
              <TrustChip k="25.000+" v="donor" />
              <TrustChip k="12 év" v="működés" />
            </div>
          </div>

          {/* RIGHT — photo card + receipt sticker */}
          <div className="lg:col-span-5 relative mt-4 lg:mt-0">
            {/* Polaroid-style photo */}
            <div className="relative rounded-3xl overflow-hidden border-2 border-ink bg-surface" style={{ aspectRatio: "4 / 5" }}>
              <img
                src={(typeof window !== "undefined" && window.__resources && window.__resources.heroImg) || "assets/hero-donors.jpg"}
                alt="Két donor a Plazmacentrum kezelőszékében"
                className="absolute inset-0 w-full h-full object-cover"
                style={{ filter: "saturate(0.96) contrast(1.02)", objectPosition: "70% center" }} />
              
              <div className="absolute inset-0 pointer-events-none" style={{ background: "linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.55) 100%)" }} />

              {/* Live + price overlay (dynamic) */}
              <LiveTicker centrum={centrum} />

              {/* Caption */}
              <div className="absolute left-4 bottom-4 right-4 lg:right-16">
                <div className="text-white/85 text-[10.5px] mono uppercase tracking-wider">2 óra</div>
                <div className="text-white serif text-[22px] lg:text-[26px] leading-[1.05] mt-1.5" style={{ letterSpacing: "-0.01em" }}>
                  „Neked két óra.<br />Másoknak új élet.”
                </div>
              </div>
            </div>

            {/* Receipt sticker — overlapping bottom-right (outside photo on desktop) */}
            <div className="absolute -bottom-6 lg:-bottom-12 -left-2 lg:left-auto lg:-right-12 bg-white border border-border rounded-2xl p-4 lg:p-5 rotate-[-3deg] shadow-[0_20px_40px_-15px_rgba(10,10,10,0.25)] w-[200px] lg:w-[220px] z-10">
              <div className="mono text-[10.5px] uppercase tracking-wider text-ink/70 whitespace-nowrap">Plazmacentrum · receipt</div>
              <div className="mt-1 flex items-baseline justify-between gap-3">
                <span className="text-[12px] mono">vizsgálat</span>
                <span className="serif text-[20px] whitespace-nowrap">+10.000</span>
              </div>
              <div className="flex items-baseline justify-between gap-3">
                <span className="text-[12px] mono">véradás</span>
                <span className="serif text-[20px] whitespace-nowrap">+40.000</span>
              </div>
              <div className="mt-2 pt-2 border-t-2 border-ink border-dashed flex items-baseline justify-between gap-2">
                <span className="text-[12px] mono">total</span>
                <span className="serif text-[26px] whitespace-nowrap">50.000&nbsp;Ft</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <MarqueeStrip />
    </section>);

}

/** Reusable scrolling marquee with the key facts. Rendered in multiple places. */
function MarqueeStrip({ variant }) {
  const isLight = variant === "light";
  return (
    <div className={"relative border-y-2 border-ink overflow-hidden " + (isLight ? "bg-butter text-ink" : "bg-ink text-bg")}>
      <div className="py-3 lg:py-4 whitespace-nowrap overflow-hidden">
        <div className="marquee-track serif text-[26px] lg:text-[34px]" style={{ letterSpacing: "-0.02em" }}>
          {Array(2).fill(0).map((_, i) =>
          <React.Fragment key={i}>
              <span>OVSZ együttműködés</span>
              <span className={isLight ? "text-ink/35" : "text-bg/40"}>·</span>
              <span>heti 2 óra</span>
              <span className="text-accent">=</span>
              <span>évi 850.000 Ft</span>
              <span className={isLight ? "text-ink/35" : "text-bg/40"}>·</span>
              <span className="italic">azonnali kifizetés</span>
              <span className={isLight ? "text-ink/35" : "text-bg/40"}>·</span>
              <span>napi 1.500+ donor</span>
              <span className={isLight ? "text-ink/35" : "text-bg/40"}>·</span>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>);

}

function TrustChip({ k, v }) {
  return (
    <div className="rounded-2xl border border-border bg-white px-3 py-3 lg:px-4 lg:py-4">
      <div className="serif text-[22px] lg:text-[28px] leading-none text-ink">{k}</div>
      <div className="text-[10.5px] lg:text-[11.5px] mono mt-1.5 text-ink/60 uppercase tracking-wider">{v}</div>
    </div>);

}

/* ---------- How it works ---------- */
function HowItWorks() {
  const steps = [
  { n: "01", title: "Időpontfoglalás",  body: "Online itt — 20 mp. Semmi telefon, semmi e-mail-ping-pong.",                          tag: "20 mp",     tagLabel: "Idő" },
  { n: "02", title: "1. alkalom",       body: "Regisztráció + első plazmaadás. Kb. 90 perc, kényelmes kanapéban.",                   tag: "10.000 Ft", tagLabel: "Készpénz" },
  { n: "03", title: "2. alkalom",       body: "4–7 nappal később. Csak a véradás, kb. 50 perc — már életet mentesz.",                tag: "40.000 Ft", tagLabel: "Készpénz" }];

  return (
    <section id="how" className="px-5 lg:px-12 pt-12 lg:pt-24 pb-2">
      <div className="max-w-6xl mx-auto">
        <div className="flex items-end justify-between gap-6 flex-wrap">
          <div>
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-ink/55">Hogy zajlik</div>
            <h2 className="serif text-[40px] lg:text-[56px] leading-[1.02] text-ink mt-2" style={{ letterSpacing: "-0.03em" }}>
              Hogy zajlik <em>az 50.000&nbsp;Ft?</em>
            </h2>
          </div>
          <p className="text-[14.5px] lg:text-[17px] text-ink/60 max-w-xs lg:text-right">
            <span className="font-medium text-ink">Összesen 2 alkalom.</span> Semmi rejtett lépés. Nincs „mégis kell hozni valami papírt”.
          </p>
        </div>

        <ol className="mt-8 lg:mt-12 grid gap-3 lg:gap-5 lg:grid-cols-3">
          {steps.map((s, i) =>
          <li key={s.n} className="rounded-3xl border border-border bg-[#F5F0E8] p-5 lg:p-7 relative overflow-hidden">
              <div className="flex items-start justify-between gap-4">
                <div className="serif text-[72px] lg:text-[120px] leading-[0.85] text-ink" style={{ letterSpacing: "-0.05em" }}>{s.n}</div>
                <div className="text-right">
                  <div className="mono text-[10.5px] uppercase tracking-wider text-ink/55">{s.tagLabel}</div>
                  <div className="serif text-[22px] lg:text-[28px] text-ink mt-0.5 whitespace-nowrap" style={{ letterSpacing: "-0.02em" }}>{s.tag}</div>
                </div>
              </div>
              <div className="mt-4">
                <div className="text-[17px] lg:text-[20px] font-medium text-ink">{s.title}</div>
                <p className="mt-1.5 text-[14.5px] lg:text-[15px] text-ink/65 leading-[1.55]">{s.body}</p>
              </div>
            </li>
          )}
        </ol>

        {/* Summary bar */}
        <div className="mt-4 lg:mt-5 rounded-3xl bg-ink text-white p-5 lg:p-8 flex items-center justify-between gap-4 relative overflow-hidden">
          <div>
            <div className="mono text-[11px] uppercase tracking-wider text-white/55">Összesen az első héten</div>
            <div className="serif text-[44px] lg:text-[64px] leading-none mt-1 whitespace-nowrap" style={{ letterSpacing: "-0.03em" }}>
              50.000 <span className="text-butter italic">Ft</span>
            </div>
          </div>
          <div className="text-right text-white/70 text-[12px] lg:text-[14px] mono leading-tight">
            <span className="text-white font-medium">azonnali kifizetés</span><br />nem utalás<br />nem „2 munkanap”
          </div>
          {/* Decorative cash icon */}
          <div className="hidden lg:block absolute -bottom-6 right-44 opacity-15">
            <ICash size={120} className="text-butter" />
          </div>
        </div>

        <p className="mt-5 text-[13.5px] lg:text-[15px] text-ink/55 leading-[1.55] max-w-xl italic">
          A plazmádból életmentő gyógyszer lesz. Te közben pénzt kapsz. Mindenki nyer.
        </p>
      </div>
    </section>);

}

/* ---------- Why donate ---------- */
function WhyDonate() {
  const reasons = [
    {
      n: "01",
      title: "Életeket mentesz",
      body: "Egyetlen plazmaadásod akár több beteg kezeléséhez is hozzájárulhat. Égési sérülteknek, hemofíliásoknak, immunhiányosoknak.",
      accent: "#E63946",
      bg: "#FFF5F5",
    },
    {
      n: "02",
      title: "Megtisztítod a szervezeted",
      body: "Tanulmányok szerint plazmaadás közben akár 30% örök vegyi anyag — például teflon származékok — is kiürül a véredből.",
      accent: "#15803D",
      bg: "#F0FDF4",
    },
    {
      n: "03",
      title: "Pénzt keresel",
      body: "Nyaralás, fesztivál, kondibérlet, kaja, albérlet. Készpénzben, helyben, a plazmaadás után.",
      accent: "#1E40AF",
      bg: "#EFF6FF",
    },
  ];
  return (
    <section id="why" className="px-5 lg:px-12 pt-16 lg:pt-28 pb-8 lg:pb-12">
      <div className="max-w-6xl mx-auto">
        <div className="flex items-end justify-between gap-6 flex-wrap">
          <div>
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-ink/55">Miért</div>
            <h2 className="serif text-[40px] lg:text-[56px] leading-[1.02] text-ink mt-2" style={{ letterSpacing: "-0.03em" }}>
              Miért adjak <em>vérplazmát?</em>
            </h2>
          </div>
          <p className="text-[14.5px] lg:text-[17px] text-ink/60 max-w-xs lg:text-right">
            Három ok, ami miatt megéri. Egyik se „kötelező jó cselekedet" — mind valódi.
          </p>
        </div>

        <ol className="mt-8 lg:mt-12 grid gap-3 lg:gap-5 lg:grid-cols-3">
          {reasons.map((r) =>
          <li key={r.n} className="rounded-3xl border border-border p-5 lg:p-7 relative overflow-hidden" style={{ background: r.bg }}>
              <div className="serif text-[64px] lg:text-[96px] leading-[0.85]" style={{ letterSpacing: "-0.05em", color: r.accent }}>{r.n}</div>
              <div className="mt-3">
                <div className="serif text-[22px] lg:text-[28px] text-ink leading-tight" style={{ letterSpacing: "-0.02em" }}>{r.title}</div>
                <p className="mt-2 text-[14.5px] lg:text-[15.5px] text-ink/70 leading-[1.55]">{r.body}</p>
              </div>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* ---------- Long-term anchor ---------- */
function LongTerm() {
  const rows = [
  { k: "Első hét",                 v: "50.000",  sub: "vizsgálat + 1. plazmaadás",                          pct: 6 },
  { k: "Havi átlag utána",         v: "80.000",  sub: "~5 alkalom havonta",                                 pct: 10 },
  { k: "Mérföldkő bónuszok",       v: "+45.000", sub: "minden 5. alkalom: 19.000–45.000 Ft",                pct: 5, accent: true },
  { k: "Évi max — bónuszokkal",    v: "850.000", sub: "rendszeres + mérföldkő + szerencse",                 pct: 100 }];

  return (
    <section className="px-5 lg:px-12 pt-12 lg:pt-24 pb-4">
      <div className="max-w-6xl mx-auto rounded-[28px] lg:rounded-[40px] bg-ink text-white p-6 lg:p-12 relative overflow-hidden border-2 border-ink">
        {/* faint dot grid */}
        <div className="absolute inset-0 opacity-10 pointer-events-none" style={{
          backgroundImage: "radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px)",
          backgroundSize: "16px 16px"
        }} />

        <div className="relative grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
          <div>
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-success">long-term</div>
            <h2 className="serif text-[34px] lg:text-[56px] leading-[1.02] mt-3" style={{ letterSpacing: "-0.03em" }}>
              Ha rendszeresen<br />jársz:<br />
              <em>havonta 80–120k.</em>
            </h2>
            <p className="mt-6 text-[14.5px] lg:text-[17px] text-white/65 max-w-md">
              Évente akár <span className="serif text-success">850.000&nbsp;Ft</span> — a mérföldkő- és szerencse-bónuszokkal együtt.
            </p>
            <div className="mt-5 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-success/15 border border-success/30 text-success text-[12px] mono">
              <ISpark size={14} /> Minden 5. alkalommal +19.000–45.000 Ft bónusz
            </div>
            <p className="mt-6 text-[13px] lg:text-[14px] text-white/45 italic max-w-md">
              „De ne most foglalkozz ezzel. Először nézd meg, milyen az első alkalom.”
            </p>
          </div>

          <div className="space-y-3">
            {rows.map((r) =>
            <div key={r.k} className={"rounded-2xl border p-4 lg:p-5 " + (r.accent ? "bg-success/10 border-success/30" : "bg-white/5 border-white/10")}>
                <div className="flex items-baseline justify-between gap-4">
                  <div className="min-w-0">
                    <div className={"text-[15px] lg:text-[17px] " + (r.accent ? "text-success" : "text-white")}>{r.k}</div>
                    <div className={"mono text-[11px] uppercase tracking-wider mt-0.5 " + (r.accent ? "text-success/70" : "text-white/45")}>{r.sub}</div>
                  </div>
                  <div className={"serif text-[26px] lg:text-[34px] whitespace-nowrap shrink-0 " + (r.accent ? "text-success" : "text-white")} style={{ letterSpacing: "-0.02em" }}>
                    {r.v}<span className={"text-[16px] lg:text-[18px] ml-1.5 mono " + (r.accent ? "text-success/60" : "text-white/50")}>Ft</span>
                  </div>
                </div>
                {/* progress bar */}
                <div className="mt-4 h-1.5 rounded-full bg-white/10 overflow-hidden">
                  <div className={"h-full rounded-full " + (r.accent ? "bg-success" : "bg-success/70")} style={{ width: r.pct + "%" }} />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Social proof — Google reviews ---------- */
function SocialProof() {
  return (
    <section className="pt-12 lg:pt-24 pb-12 lg:pb-20 mt-12 lg:mt-20 relative">
      <div className="px-5 lg:px-12 max-w-6xl mx-auto">
        <div className="flex items-end justify-between gap-6 flex-wrap">
          <div>
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-ink/55">Google vélemények</div>
            <h2 className="serif text-[36px] lg:text-[56px] leading-[1.02] text-ink mt-2" style={{ letterSpacing: "-0.03em" }}>
              Olvasd el, mit írnak <em>a donorok.</em>
            </h2>
          </div>
          <div className="lg:text-right">
            <div className="flex items-center gap-2 lg:justify-end">
              <GoogleG />
              <div className="flex items-center gap-1">
                {Array.from({ length: 5 }).map((_, i) => <Star key={i} filled />)}
              </div>
              <span className="serif text-[20px] text-ink leading-none">4,9</span>
            </div>
            <p className="text-[13px] lg:text-[14px] text-ink/60 mt-1">
              1500+ Google értékelés · átlag 4,9
            </p>
          </div>
        </div>
      </div>

      {/* Mobile: horizontal scroll. Desktop: 3-col grid */}
      <div className="lg:hidden mt-6 px-5 overflow-x-auto no-scrollbar">
        <div className="flex gap-3 pb-6">
          {TESTIMONIALS.map((t, i) => <TestimonialCard key={i} t={t} mobile />)}
        </div>
      </div>
      <div className="hidden lg:grid mt-10 px-12 max-w-6xl mx-auto grid-cols-3 gap-6 pb-10">
        {TESTIMONIALS.map((t, i) => <TestimonialCard key={i} t={t} />)}
      </div>
    </section>);

}

/* Google-style review card — initials avatar, stars, Google badge, text */
function TestimonialCard({ t, mobile = false }) {
  return (
    <article className={"rounded-2xl border border-border bg-white p-5 lg:p-6 flex flex-col gap-4 " + (mobile ? "shrink-0 w-[82%] sm:w-[62%]" : "")}>
      {/* Header: avatar + name + Google badge */}
      <header className="flex items-start gap-3">
        <div
          className="w-11 h-11 rounded-full flex items-center justify-center text-white text-[15px] font-medium shrink-0"
          style={{ background: t.avatarColor }}
          aria-hidden
        >
          {t.initials}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <div className="text-[14.5px] font-medium text-ink truncate">{t.name}</div>
            <GoogleG size={14} />
          </div>
          <div className="text-[12px] text-ink/55 mt-0.5">Google vélemény · {t.ago}</div>
        </div>
      </header>

      {/* Stars */}
      <div className="flex items-center gap-0.5">
        {Array.from({ length: 5 }).map((_, i) => (
          <Star key={i} filled={i < t.stars} />
        ))}
      </div>

      {/* Quote */}
      <p className="serif text-[19px] lg:text-[22px] leading-[1.3] text-ink" style={{ letterSpacing: "-0.005em" }}>
        „{t.quote}"
      </p>

      {/* Footer: centrum */}
      <footer className="mt-auto pt-2 border-t border-border/60 text-[11.5px] mono uppercase tracking-wider text-ink/50">
        {t.centrum}
      </footer>
    </article>);

}

/* Google "G" logo (simplified, no SVG copy of official logo — colored G letter) */
function GoogleG({ size = 16 }) {
  return (
    <span
      className="inline-flex items-center justify-center rounded-full"
      style={{ width: size, height: size, fontSize: size * 0.72, lineHeight: 1, fontFamily: 'Arial, sans-serif', fontWeight: 700, background: '#fff', border: '1px solid #E8E8E2' }}
      aria-label="Google"
    >
      <span style={{ background: 'linear-gradient(90deg, #4285F4 0%, #34A853 33%, #FBBC05 66%, #EA4335 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', color: 'transparent' }}>G</span>
    </span>);

}

function Star({ filled }) {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill={filled ? "#FBBC05" : "#E8E8E2"} aria-hidden>
      <path d="M12 2l2.9 6.9 7.6.6-5.8 4.9 1.8 7.4L12 17.8 5.5 21.8l1.8-7.4L1.5 9.5l7.6-.6L12 2z" />
    </svg>);

}

/* ---------- FAQ ---------- */
function FAQAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="px-5 lg:px-12 pt-12 lg:pt-24 pb-2">
      <div className="max-w-6xl mx-auto grid lg:grid-cols-[1fr_2fr] gap-8 lg:gap-16 items-start">
        <div>
          <div className="mono text-[11px] uppercase tracking-[0.2em] text-ink/55">GYIK</div>
          <h2 className="serif text-[36px] lg:text-[64px] leading-[1.02] text-ink mt-2" style={{ letterSpacing: "-0.03em" }}>
            Kérdések, <em>őszinte<br className="hidden lg:block" /> válaszok.</em>
          </h2>
          <p className="hidden lg:block mt-4 text-[15px] text-ink/60 max-w-sm">
            Ha valami nincs itt, hívd a centrumot. Senki nem nyomja rád a telefont.
          </p>
        </div>

        <div className="rounded-3xl border-2 border-ink bg-white overflow-hidden">
          {FAQ.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={i < FAQ.length - 1 ? "border-b-2 border-ink/10" : ""}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full px-5 lg:px-7 py-4 lg:py-6 flex items-center justify-between gap-3 text-left active:bg-cream/40 hover:bg-cream/30 transition">
                  
                  <span className="text-[16px] lg:text-[20px] font-medium text-ink">{item.q}</span>
                  <span className={"w-9 h-9 rounded-full bg-cream flex items-center justify-center text-ink transition-transform " + (isOpen ? "rotate-180" : "")}><IDown size={18} /></span>
                </button>
                <div className="grid transition-[grid-template-rows] duration-300 ease-out" style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}>
                  <div className="overflow-hidden">
                    <p className="px-5 lg:px-7 pb-5 lg:pb-7 text-[14.5px] lg:text-[16px] leading-[1.6] text-ink/75 max-w-2xl">{item.a}</p>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
/** Small inline SVG map thumbnail (no external API). */
function MiniMapThumb() {
  return (
    <span aria-hidden className="shrink-0 w-12 h-12 rounded-lg overflow-hidden border border-white/15 flex items-center justify-center" style={{ background: "linear-gradient(135deg, #2a2a2a, #181818)" }}>
      <svg width="32" height="32" viewBox="0 0 48 48" fill="none">
        <path d="M2 10 L18 6 L30 12 L46 8 L46 38 L30 42 L18 36 L2 40 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)" strokeWidth="0.8" />
        <path d="M18 6 L18 36 M30 12 L30 42" stroke="rgba(255,255,255,0.14)" strokeWidth="0.8" />
        <path d="M2 22 L46 22 M2 30 L46 30" stroke="rgba(255,255,255,0.08)" strokeWidth="0.6" strokeDasharray="2 2" />
        <circle cx="24" cy="24" r="3.5" fill="#E63946" />
        <circle cx="24" cy="24" r="1.5" fill="#fff" />
      </svg>
    </span>);

}

function Footer() {
  return (
    <footer id="centrums" className="mt-12 lg:mt-20 bg-ink text-bg relative overflow-hidden">
      {/* huge background wordmark */}
      <div className="absolute -top-6 -left-4 lg:top-4 lg:left-8 right-0 serif text-[120px] lg:text-[280px] text-white/[0.05] leading-none pointer-events-none select-none" style={{ letterSpacing: "-0.05em" }}>
        plazma<span className="text-accent/30">.</span>
      </div>

      <div className="relative px-5 lg:px-12 max-w-7xl mx-auto pt-12 lg:pt-20 pb-28 lg:pb-12">
        <div className="grid lg:grid-cols-12 gap-8 lg:gap-12">
          <div className="lg:col-span-4">
            <img src="assets/logo-white.png" alt="Plazmacentrum" className="h-9 lg:h-11 w-auto" />
            <p className="mt-4 text-[14px] lg:text-[16px] text-white/60 max-w-xs">
              Három centrum. Tizenkét év. Egy mondat: a plazmádért tisztességes pénzt kapsz.
            </p>
            <div className="mt-6 flex items-center gap-3 text-white/70">
              <a className="w-10 h-10 rounded-full border border-white/15 flex items-center justify-center hover:border-white/40 transition"><IInsta size={18} /></a>
              <a className="w-10 h-10 rounded-full border border-white/15 flex items-center justify-center hover:border-white/40 transition"><ITikTok size={18} /></a>
              <a className="w-10 h-10 rounded-full border border-white/15 flex items-center justify-center hover:border-white/40 transition"><IFb size={18} /></a>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-white/45">Centrumok</div>
            <ul className="mt-4 grid gap-3">
              {Object.values(CENTRUMS).map((c) =>
              <li key={c.key} className="rounded-2xl border border-white/10 bg-white/5 p-4 lg:p-5">
                  <div className="flex items-start justify-between gap-4">
                    <div className="min-w-0">
                      <div className="text-white text-[16px] lg:text-[18px] font-medium">{c.name}</div>
                      <div className="text-white/55 text-[12.5px] lg:text-[13px] mt-0.5">{c.address}</div>
                      <div className="text-white/45 text-[12px] mono mt-1">{c.hours}</div>
                    </div>
                    <a href={"tel:" + c.phone.replace(/\s/g, "")} className="shrink-0 text-white mono text-[12.5px] lg:text-[13px] underline-offset-4 hover:underline">{c.phone}</a>
                  </div>
                  <a
                    href={"https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent("Plazmacentrum " + c.name + " " + c.address)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-3 flex items-center gap-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 px-3 py-2 text-[13px] text-white/85 transition group"
                  >
                    <MiniMapThumb />
                    <span className="flex-1 min-w-0">
                      <span className="block text-white font-medium">Útvonal · Google Maps</span>
                      <span className="block text-white/50 text-[11.5px] mono truncate">megnyitja a térképen</span>
                    </span>
                    <IArrow size={14} className="shrink-0 text-white/55 group-hover:text-white group-hover:translate-x-0.5 transition" />
                  </a>
                </li>
              )}
            </ul>
          </div>

          <div className="lg:col-span-3">
            <div className="mono text-[11px] uppercase tracking-[0.2em] text-white/45">Linkek</div>
            <ul className="mt-4 space-y-2 text-[14px] lg:text-[15px] text-white/80">
              <li className="hover:text-white cursor-pointer">GYIK</li>
              <li className="hover:text-white cursor-pointer">ÁSZF</li>
              <li className="hover:text-white cursor-pointer">Adatvédelem</li>
              <li className="hover:text-white cursor-pointer">Karrier</li>
              <li className="hover:text-white cursor-pointer">Press</li>
            </ul>
          </div>
        </div>

        <div className="mt-12 pt-6 border-t border-white/10 flex flex-wrap items-center justify-between gap-3 text-[12px] text-white/45 mono">
          <span>© 2026 PLAZMACENTRUM Kft.</span>
          <span>Mind a három centrum az OVSZ engedélyével működik</span>
        </div>
      </div>
    </footer>);

}

/* ---------- Sticky bottom bar (mobile only) ---------- */
function StickyBottomBar({ centrum, onCta, visible }) {
  return (
    <div
      className={"lg:hidden fixed left-0 right-0 bottom-0 z-40 transition-transform duration-300 " + (visible ? "translate-y-0" : "translate-y-full")}
      style={{ paddingBottom: "max(0px, env(safe-area-inset-bottom))" }}>
      
      <div className="mx-auto max-w-[440px]">
        <div className="m-3 rounded-2xl border-2 border-ink flex items-center justify-between gap-2 px-3 py-2"
        style={{ background: "rgba(255,255,255,0.92)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)" }}>
          <div className="flex items-center gap-2 min-w-0">
            <span className="w-9 h-9 rounded-xl bg-butter border-2 border-ink flex items-center justify-center text-ink"><IPin size={16} /></span>
            <div className="min-w-0">
              <div className="text-[13px] text-ink truncate">{centrum.name} · {centrum.short}</div>
              <div className="text-[11px] text-ink/55 mono truncate">{centrum.transit}</div>
            </div>
          </div>
          <button onClick={onCta} className="h-11 px-4 rounded-xl bg-accent text-white text-[14px] font-medium flex items-center gap-1.5 active:scale-95 transition">
            Foglalok <IArrow size={14} />
          </button>
        </div>
      </div>
    </div>);

}

/* ---------- Bottom sheet (hamburger) ---------- */
function MenuSheet({ open, onClose }) {
  return (
    <div className={"fixed inset-0 z-50 " + (open ? "" : "pointer-events-none")}>
      <div onClick={onClose}
      className={"absolute inset-0 bg-ink/40 transition-opacity " + (open ? "opacity-100" : "opacity-0")} />
      <div className={"absolute left-0 right-0 bottom-0 bg-white rounded-t-3xl border-t border-border transition-transform duration-300 " + (open ? "translate-y-0" : "translate-y-full")}>
        <div className="mx-auto max-w-[440px] p-5 pb-8">
          <div className="flex items-center justify-between">
            <div className="serif text-[24px]">Mind3 centrum</div>
            <button onClick={onClose} className="w-9 h-9 -mr-2 flex items-center justify-center text-ink/60"><IClose size={20} /></button>
          </div>
          <ul className="mt-4 divide-y divide-border">
            {Object.values(CENTRUMS).map((c) =>
            <li key={c.key} className="py-3 flex items-center justify-between gap-3">
                <div>
                  <div className="text-[15px] text-ink">{c.name}</div>
                  <div className="text-[12.5px] text-ink/55 mono">{c.short} · {c.hours}</div>
                </div>
                <a className="h-10 px-3 rounded-xl border border-border text-[13px] flex items-center gap-1.5 mono text-ink"><IPhone size={14} />Hívom</a>
              </li>
            )}
          </ul>
          <div className="mt-4 grid grid-cols-2 gap-2">
            <button className="h-12 rounded-xl bg-surface text-ink text-[14px]">GYIK</button>
            <button onClick={onClose} className="h-12 rounded-xl bg-ink text-white text-[14px]">Bezár</button>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, {
  TopNav, CentrumToggle, GeoToast, Hero, HowItWorks, LongTerm, SocialProof, FAQAccordion, Footer, StickyBottomBar, MenuSheet
});


/* App shell — composes the whole landing, manages centrum state + sticky bottom bar visibility */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function App() {
  const [centrumKey, setCentrumKey] = useStateA("nyugati");
  const [menuOpen, setMenuOpen] = useStateA(false);
  const [showBar, setShowBar] = useStateA(true);
  const bookingRef = useRefA(null);

  const centrum = CENTRUMS[centrumKey];

  /* Hide the sticky mobile bottom bar when user is inside the booking section */
  useEffectA(() => {
    const target = bookingRef.current;
    if (!target) return;
    const onScroll = () => {
      const rect = target.getBoundingClientRect();
      const visible = rect.top > window.innerHeight * 0.2;
      setShowBar(visible);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollToBooking = () => {
    const target = bookingRef.current;
    if (!target) return;
    const top = window.scrollY + target.getBoundingClientRect().top - 64;
    window.scrollTo({ top, behavior: "smooth" });
  };

  /* Centrum change → tiny tap-pulse feedback on the page */
  const [pulseKey, setPulseKey] = useStateA(0);
  const onCentrumChange = (k) => {
    if (k === centrumKey) return;
    setCentrumKey(k);
    setPulseKey((p) => p + 1);
  };

  return (
    <div className="bg-bg min-h-screen">
      <AnnouncementBar centrumName={centrum.name} />
      <TopNav onOpenSheet={() => setMenuOpen(true)} onCta={scrollToBooking} />

      <div key={pulseKey}>
        <Hero centrum={centrum} onCta={scrollToBooking} centrumKey={centrumKey} onCentrumChange={onCentrumChange} />
      </div>

      {/* Sticky centrum toggle re-appears here, so it's reachable mid-page */}
      <CentrumToggle value={centrumKey} onChange={onCentrumChange} sticky />

      <div key={"how-" + pulseKey}>
        <HowItWorks />
        <WhyDonate />
        <div className="mt-8 lg:mt-12">
          <MarqueeStrip variant="light" />
        </div>
        <LongTerm />
      </div>

      <div ref={bookingRef} key={"book-" + pulseKey + "-" + centrumKey}>
        <Booking centrum={centrum} centrumKey={centrumKey} onCentrumChange={onCentrumChange} onSubmittedScroll={() => {
          const top = window.scrollY + bookingRef.current.getBoundingClientRect().top - 64;
          window.scrollTo({ top, behavior: "smooth" });
        }} />
      </div>

      <SocialProof />
      <FAQAccordion />

      {/* Footer-anchored final call */}
      <section className="px-5 lg:px-12 pt-10">
        <div className="max-w-6xl mx-auto rounded-[28px] lg:rounded-[40px] bg-ink text-white p-6 lg:p-12 relative overflow-hidden">
          {/* faint dot grid for texture */}
          <div className="absolute inset-0 opacity-[0.07] pointer-events-none" style={{
            backgroundImage: "radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px)",
            backgroundSize: "18px 18px"
          }} />
          <div className="relative grid lg:grid-cols-[1fr_auto] lg:items-end gap-6">
            <div>
              <div className="mono text-[11px] uppercase tracking-[0.2em] text-accent">Final call</div>
              <div className="serif text-[44px] lg:text-[72px] leading-[0.95] mt-3" style={{ letterSpacing: "-0.04em" }}>
                Még görgetsz? <em>Foglalj.</em>
              </div>
              <p className="mt-3 text-[14.5px] lg:text-[17px] text-white/70 max-w-md">
                20 másodperc alatt. Pénteken már a kezedben az első <span className="text-white font-medium">10.000 Ft</span>.
              </p>
              <p className="mt-2 text-[12.5px] lg:text-[13px] mono uppercase tracking-wider text-accent">
                Emelt díj · június 30-ig
              </p>
            </div>
            <button onClick={scrollToBooking} className="h-14 lg:h-16 px-6 lg:px-8 rounded-2xl bg-accent text-white text-[16px] lg:text-[18px] font-medium flex items-center justify-center gap-2 active:scale-[0.99] hover:scale-[1.02] transition shadow-[0_14px_30px_-12px_rgba(230,57,70,0.7)]">
              Időpontot foglalok <IArrow size={20} />
            </button>
          </div>
        </div>
      </section>

      <Footer />

      <StickyBottomBar centrum={centrum} onCta={scrollToBooking} visible={showBar} />
      <MenuSheet open={menuOpen} onClose={() => setMenuOpen(false)} />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);