// Main app — Patroniçe için Hemşireler Günü hediyesi
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ────────────────────────────────────────────────────────────────── */
/*  Background drifting hearts/sparkles (after wake)                  */
/* ────────────────────────────────────────────────────────────────── */
function DriftLayer({ active }) {
  const items = useMemo(() => {
    const arr = [];
    for (let i = 0; i < 14; i++) {
      arr.push({
        id: i,
        left: Math.random() * 100,
        delay: Math.random() * 18,
        dur: 14 + Math.random() * 14,
        dx: (Math.random() - 0.5) * 60,
        dr: (Math.random() - 0.5) * 60,
        size: 10 + Math.random() * 14,
        kind: i % 3 === 0 ? "heart" : i % 3 === 1 ? "star" : "spark",
        color: i % 3 === 0 ? "var(--pink)" : i % 3 === 1 ? "var(--gold)" : "var(--cyan)",
        opacity: 0.5 + Math.random() * 0.4
      });
    }
    return arr;
  }, []);
  if (!active) return null;
  return (
    <div className="pointer-events-none fixed inset-0 overflow-hidden z-0">
      {items.map((it) =>
      <div
        key={it.id}
        className="absolute drift"
        style={{
          left: `${it.left}%`,
          bottom: `-40px`,
          "--dx": `${it.dx}px`,
          "--dr": `${it.dr}deg`,
          "--dur": `${it.dur}s`,
          animationDelay: `${it.delay}s`,
          color: it.color,
          opacity: it.opacity
        }}>
        
          {it.kind === "heart" && <HeartIcon size={it.size} className="glow-pink" />}
          {it.kind === "star" && <StarIcon size={it.size} className="glow-gold" />}
          {it.kind === "spark" && <Sparkles size={it.size} className="glow-cyan" />}
        </div>
      )}
    </div>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Burst particles on card click                                     */
/* ────────────────────────────────────────────────────────────────── */
function Burst({ id, color }) {
  const parts = useMemo(() => {
    const arr = [];
    const n = 14;
    for (let i = 0; i < n; i++) {
      const angle = i / n * Math.PI * 2 + Math.random() * 0.6;
      const dist = 70 + Math.random() * 90;
      arr.push({
        i,
        tx: Math.cos(angle) * dist,
        ty: Math.sin(angle) * dist,
        rot: (Math.random() - 0.5) * 360,
        size: 10 + Math.random() * 12,
        kind: i % 3,
        delay: Math.random() * 0.12,
        sc: 0.7 + Math.random() * 0.6
      });
    }
    return arr;
  }, [id]);

  return (
    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
      {parts.map((p) =>
      <span
        key={p.i}
        className="absolute burst"
        style={{
          "--tx": `${p.tx}px`,
          "--ty": `${p.ty}px`,
          "--rot": `${p.rot}deg`,
          "--sc": p.sc,
          animationDelay: `${p.delay}s`,
          color
        }}>
        
          {p.kind === 0 && <HeartIcon size={p.size} className="glow-pink" />}
          {p.kind === 1 && <StarIcon size={p.size} className="glow-gold" />}
          {p.kind === 2 && <Sparkles size={p.size} className="glow-cyan" />}
        </span>
      )}
    </div>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Intro — mysterious dark screen with pulse                         */
/* ────────────────────────────────────────────────────────────────── */
function Intro({ onEnter }) {
  const [showHint, setShowHint] = useState(false);
  const [bootText, setBootText] = useState("");
  const full = "Sisteme giriş yapılıyor";

  useEffect(() => {
    let i = 0;
    const t = setInterval(() => {
      i++;
      setBootText(full.slice(0, i));
      if (i >= full.length) clearInterval(t);
    }, 55);
    const hint = setTimeout(() => setShowHint(true), 1800);
    return () => {clearInterval(t);clearTimeout(hint);};
  }, []);

  return (
    <section className="min-h-[100svh] flex flex-col items-center justify-center px-6 text-center relative">
      <div className="font-mono text-[11px] sm:text-xs tracking-[0.3em] uppercase text-[var(--mute)] mb-10 float-in">
        ◦ özel modül · 12.05 · gece protokolü ◦
      </div>

      <button
        onClick={onEnter}
        className="group relative outline-none"
        aria-label="Başla">
        
        {/* Pulsing rings */}
        <span className="absolute inset-0 rounded-full ring-pulse"
        style={{ boxShadow: "0 0 0 1px rgba(255,110,199,0.45)" }} />
        <span className="absolute inset-0 rounded-full ring-pulse"
        style={{ boxShadow: "0 0 0 1px rgba(110,255,245,0.35)", animationDelay: "1.1s" }} />

        <span className="relative flex items-center justify-center w-32 h-32 sm:w-40 sm:h-40 rounded-full
                         bg-gradient-to-br from-[#15103a] via-[#1a1147] to-[#0c0a26]
                         border border-white/10 shadow-[0_0_60px_rgba(255,110,199,0.25)]
                         pulse-soft transition-transform duration-500 group-hover:scale-105">


          
          <Stethoscope size={56} className="text-[var(--pink)] glow-pink" stroke={1.4} />
        </span>

        {/* EKG line above */}
        <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-[280px] sm:w-[340px] h-14 opacity-90">
          <EKG className="w-full h-full" />
        </div>
      </button>

      <div className="mt-12 font-mono text-[12px] sm:text-sm text-[var(--mute)] tracking-wider min-h-[1.6em]">
        {bootText}<span className="cursor">_</span>
      </div>

      <div className={`mt-3 text-xs sm:text-sm text-white/55 transition-opacity duration-1000 ${showHint ? "opacity-100" : "opacity-0"}`}>
        nabzına dokun
      </div>

      <div className="absolute bottom-6 left-0 right-0 text-center font-mono text-[10px] tracking-[0.25em] text-white/30 uppercase">
        ⟢  classified · only for Patroniçe  ⟣
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Hero — welcome                                                    */
/* ────────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="pt-16 sm:pt-24 pb-10 px-6 text-center relative">
      <div className="flex items-center justify-center gap-3 font-mono text-[10px] sm:text-xs tracking-[0.35em] uppercase text-[var(--mute)] float-in">
        <span className="h-px w-8 bg-white/20" />
        12 Mayıs · Hemşireler Günü
        <span className="h-px w-8 bg-white/20" />
      </div>

      <h1 className="hero-title font-serif italic text-5xl sm:text-7xl mt-6 leading-[1.05] float-in" style={{ animationDelay: "0.1s" }}>
        Hoş Geldin,{" "}
        <span className="not-italic font-medium text-glow-pink"
        style={{ background: "linear-gradient(90deg,#ff6ec7,#ffd56e,#6efff5)",
          WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
          Patroniçe
        </span>
        <span className="text-[var(--pink)] text-glow-pink">.</span>
      </h1>

      <p className="mt-6 max-w-xl mx-auto text-base sm:text-lg text-white/75 leading-relaxed float-in font-serif italic"
      style={{ animationDelay: "0.25s" }}>
        Dünyanın en şifa dağıtan, en tatlı ve en yorulan insanı için —{" "}
        <span className="text-[var(--gold)] not-italic font-medium">küçük bir mola.</span>
      </p>

      <div className="mt-8 flex items-center justify-center gap-2 text-[var(--mute)] float-in" style={{ animationDelay: "0.4s" }}>
        <HeartIcon size={14} className="glow-pink text-[var(--pink)]" />
        <span className="font-mono text-[10px] sm:text-xs tracking-[0.3em] uppercase">aşağıda 3 reçete bekliyor</span>
        <HeartIcon size={14} className="glow-pink text-[var(--pink)]" />
      </div>

      <div className="mt-10 flex justify-center text-white/40 animate-bounce">
        <ArrowDown size={18} />
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Prescription Cards                                                */
/* ────────────────────────────────────────────────────────────────── */
const CARDS = [
{
  id: 1,
  label: "Reçete 01",
  title: "ders maratonuna",
  icon: "moon",
  color: "var(--pink)",
  glow: "glow-pink",
  bgFrom: "rgba(255,110,199,0.16)",
  bgTo: "rgba(255,110,199,0.04)",
  border: "rgba(255,110,199,0.45)",
  message: "Raporlar, farmakoloji veya Esaslar dersi... Hiçbiri bir Patroniçe'yi yıldıramaz.",
  sub: "— ay ışığında bir hemşire portresi"
},
{
  id: 2,
  label: "Reçete 02",
  title: "patroniçe aurasına",
  icon: "sparkles",
  color: "var(--gold)",
  glow: "glow-gold",
  bgFrom: "rgba(255,213,110,0.18)",
  bgTo: "rgba(255,213,110,0.04)",
  border: "rgba(255,213,110,0.45)",
  message: "Daha 1. sınıftan bu 'Patroniçe' aurasıyla geleceğin en havalı hemşiresi olacağın çok net.",
  sub: "— gözle görülmez bir mucize"
},
{
  id: 3,
  label: "Reçete 03",
  title: "ilk Hemşireler Günün'e",
  icon: "heart",
  color: "var(--cyan)",
  glow: "glow-cyan",
  bgFrom: "rgba(110,255,245,0.16)",
  bgTo: "rgba(110,255,245,0.04)",
  border: "rgba(110,255,245,0.45)",
  message: "Mesleğe attığın bu ilk adımlarda, şimdiden etrafına şifa dağıtıyorsun. İlk Hemşireler Günün kutlu olsun!",
  sub: "— kalbinden geçenleri bilen biri"
}];


function CardIcon({ kind, size, className }) {
  if (kind === "moon") return <Moon size={size} className={className} stroke={1.3} />;
  if (kind === "sparkles") return <Sparkles size={size} className={className} stroke={1.3} />;
  if (kind === "heart") return <HeartIcon size={size} className={className} stroke={1.3} />;
  return null;
}

function RxCard({ data, opened, onOpen, burstKey }) {
  return (
    <div
      onClick={() => !opened && onOpen(data.id)}
      className={`rx-card shimmer relative rounded-2xl p-5 sm:p-6 cursor-pointer select-none
                  border ${opened ? "border-white/20" : "border-white/10"}`}
      style={{
        background: `linear-gradient(160deg, ${data.bgFrom}, ${data.bgTo}), rgba(13,10,46,0.55)`,
        boxShadow: opened ?
        `0 0 0 1px ${data.border}, 0 0 50px ${data.bgFrom}` :
        `0 0 0 1px rgba(255,255,255,0.06), 0 10px 40px rgba(0,0,0,0.45)`,
        backdropFilter: "blur(8px)"
      }}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {if ((e.key === "Enter" || e.key === " ") && !opened) onOpen(data.id);}}>
      
      {/* Card header */}
      <div className="flex items-center justify-between text-[10px] sm:text-xs font-mono tracking-[0.25em] uppercase text-white/55">
        <span>{data.label}</span>
        <span className="flex items-center gap-1.5" style={{ color: data.color }}>
          {opened ? <Unlock size={12} stroke={1.6} /> : <Lock size={12} stroke={1.6} />}
          <span>{opened ? "açıldı" : "mühürlü"}</span>
        </span>
      </div>

      {/* Title */}
      <div className="mt-3 sm:mt-4 font-serif italic text-lg sm:text-xl text-white/85">
        {data.title}
      </div>

      {/* Icon area / message swap */}
      <div className="relative h-[160px] sm:h-[180px] mt-4 flex items-center justify-center overflow-hidden">
        {/* Bottle/syringe */}
        <div className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-700
                         ${opened ? "opacity-0 scale-90 -translate-y-2" : "opacity-100"}`}>
          <div className="relative">
            {/* Glow halo */}
            <div className="absolute -inset-6 rounded-full"
            style={{ background: `radial-gradient(closest-side, ${data.bgFrom}, transparent 70%)` }} />
            <div className="relative" style={{ color: data.color }}>
              <Syringe size={62} className={data.glow} stroke={1.3} />
            </div>
          </div>
          <div className="mt-4 font-mono text-[10px] tracking-[0.3em] uppercase text-white/40">
            ↟  dokun  ↟
          </div>
        </div>

        {/* Revealed message */}
        <div className={`absolute inset-0 flex flex-col items-center justify-center px-2 text-center transition-all duration-700
                         ${opened ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"}`}
        style={{ transitionDelay: opened ? "0.3s" : "0s" }}>
          <CardIcon kind={data.icon} size={28} className={`${data.glow} mb-3`} />
          <p className="font-serif text-lg sm:text-xl leading-snug text-white"
          style={{ textWrap: "pretty" }}>
            "{data.message}"
          </p>
          <p className="mt-3 font-mono text-[10px] sm:text-[11px] tracking-[0.2em] uppercase text-white/45">
            {data.sub}
          </p>
        </div>

        {/* Burst */}
        {burstKey > 0 && <Burst id={burstKey} color={data.color} />}
      </div>
    </div>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Final modal                                                       */
/* ────────────────────────────────────────────────────────────────── */
function FinalModal({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
    role="dialog" aria-modal="true">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-md" onClick={onClose} />

      <div className="relative max-w-md w-full modal-in">
        <div className="relative rounded-3xl overflow-hidden border border-white/15"
        style={{
          background:
          "linear-gradient(160deg, rgba(255,110,199,0.18), rgba(110,255,245,0.10) 60%, rgba(13,10,46,0.95)), #0d0a2e",
          boxShadow:
          "0 0 0 1px rgba(255,213,110,0.25), 0 30px 80px rgba(0,0,0,0.6), 0 0 80px rgba(255,110,199,0.25)"
        }}>

          {/* Header strip — prescription paper style */}
          <div className="flex items-center justify-between px-5 sm:px-7 py-4 border-b border-white/10">
            <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.3em] uppercase text-white/70">
              <Pill size={14} className="text-[var(--gold)] glow-gold" />
              gizli reçete · 19.05.2026
            </div>
            <button onClick={onClose}
            className="p-1 rounded-full text-white/60 hover:text-white hover:bg-white/10 transition"
            aria-label="Kapat">
              <X size={18} />
            </button>
          </div>

          {/* Body */}
          <div className="px-5 sm:px-7 py-6">
            <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.3em] uppercase text-[var(--gold)] text-glow-gold">MUHENDIS TAVSİYESİ

            </div>

            <p className="mt-4 font-serif text-xl sm:text-2xl leading-snug text-white"
            style={{ textWrap: "pretty" }}>
              Bu yoğunluğun üzerine, en kısa sürede{" "}
              <span className="italic text-[var(--pink)] text-glow-pink">beraber güzel bir kahve</span>{" "}
              eşliğinde bir{" "}
              <span className="italic" style={{ color: "var(--cyan)" }}>kafa dinleme molası</span>{" "}
              yazılmıştır.
            </p>

            <p className="mt-4 text-sm text-white/65 italic font-serif">
              (İtiraz kabul edilmez — patroniçe olsan bile.)
            </p>

            {/* Randevu / tarih */}
            <div className="mt-5 flex items-center gap-3">
              <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-white/45">randevu</span>
              <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[var(--gold)]/40
                               bg-[rgba(255,213,110,0.06)] font-mono text-[11px] tracking-[0.25em] text-[var(--gold)] text-glow-gold">
                <StarIcon size={10} className="glow-gold" />
                19 · 05 · 2026
              </span>
            </div>

            {/* Decorative row */}
            <div className="mt-6 flex items-center gap-4">
              <div className="flex items-center gap-2 text-white/80">
                <Coffee size={18} className="text-[var(--gold)] glow-gold" />
                <span className="font-mono text-[10px] tracking-[0.25em] uppercase">1 fincan</span>
              </div>
              <div className="h-px flex-1 bg-gradient-to-r from-[var(--pink)]/40 via-[var(--gold)]/40 to-[var(--cyan)]/40" />
              <div className="flex items-center gap-2 text-white/80">
                <HeartIcon size={16} className="text-[var(--pink)] glow-pink" />
                <span className="font-mono text-[10px] tracking-[0.25em] uppercase">sınırsız</span>
              </div>
            </div>

            {/* Signature */}
            <div className="mt-7 pt-5 border-t border-white/10 flex items-end justify-between">
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-white/50">imza</div>
                <div className="font-serif italic text-lg text-white/90 mt-1">— ben</div>
              </div>
              <button
                onClick={onClose}
                className="font-mono text-[10px] sm:text-[11px] tracking-[0.3em] uppercase
                           px-4 py-2 rounded-full border border-white/15
                           text-white/85 hover:text-white hover:border-white/40 hover:bg-white/5
                           transition">



                
                anladım, patroniçe
              </button>
            </div>
          </div>

          {/* Floating tiny sparkles */}
          <Sparkles size={14} className="absolute top-3 right-12 text-[var(--gold)] glow-gold opacity-80" />
          <StarIcon size={10} className="absolute top-20 left-4 text-[var(--cyan)] glow-cyan opacity-70" />
          <HeartIcon size={12} className="absolute bottom-20 right-5 text-[var(--pink)] glow-pink opacity-70" />
        </div>
      </div>
    </div>);

}

/* ────────────────────────────────────────────────────────────────── */
/*  Root                                                              */
/* ────────────────────────────────────────────────────────────────── */
function App() {
  const [awake, setAwake] = useState(false); // intro done?
  const [sweep, setSweep] = useState(false); // wake animation playing
  const [opened, setOpened] = useState({}); // {id: true}
  const [bursts, setBursts] = useState({}); // {id: incrementing key}
  const [modal, setModal] = useState(false);

  const openIntro = () => {
    setSweep(true);
    setTimeout(() => {setAwake(true);}, 700);
    setTimeout(() => {setSweep(false);}, 1500);
  };

  const openCard = (id) => {
    setOpened((o) => ({ ...o, [id]: true }));
    setBursts((b) => ({ ...b, [id]: (b[id] || 0) + 1 }));
  };

  const allOpen = CARDS.every((c) => opened[c.id]);

  // Scroll to cards once awake (mobile-friendly)
  const cardsRef = useRef(null);
  useEffect(() => {
    if (awake && cardsRef.current) {
      // small delay so the hero shows first
      setTimeout(() => {

        // gentle: only used as anchor; do nothing automatic to avoid jankiness
      }, 600);}
  }, [awake]);

  return (
    <div className="relative min-h-[100svh]">
      <DriftLayer active={awake} />

      {!awake && <Intro onEnter={openIntro} />}

      {/* Wake sweep flash */}
      {sweep &&
      <div className="fixed inset-0 z-40 pointer-events-none flex items-center justify-center">
          <div className="w-40 h-40 rounded-full wake-sweep"
        style={{ background: "radial-gradient(closest-side, rgba(255,110,199,0.55), rgba(110,255,245,0.25), transparent 70%)" }} />
        </div>
      }

      {awake &&
      <main className="relative z-10 pb-24">
          <Hero />

          <section ref={cardsRef} className="px-4 sm:px-6 mt-4">
            <div className="mx-auto max-w-5xl grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
              {CARDS.map((c) =>
            <RxCard
              key={c.id}
              data={c}
              opened={!!opened[c.id]}
              onOpen={openCard}
              burstKey={bursts[c.id] || 0} />

            )}
            </div>

            {/* Progress dots */}
            <div className="mt-8 flex items-center justify-center gap-2">
              {CARDS.map((c) =>
            <span key={c.id}
            className="w-1.5 h-1.5 rounded-full transition-all duration-500"
            style={{
              background: opened[c.id] ? c.color : "rgba(255,255,255,0.15)",
              boxShadow: opened[c.id] ? `0 0 10px ${c.color}` : "none",
              transform: opened[c.id] ? "scale(1.4)" : "scale(1)"
            }} />
            )}
            </div>
          </section>

          {/* Final reveal */}
          <section className="mt-20 sm:mt-28 px-6 text-center">
            <div className={`transition-all duration-[1400ms] ${allOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6 pointer-events-none"}`}>
              <div className="font-mono text-[10px] sm:text-xs tracking-[0.35em] uppercase text-[var(--mute)]">
                ◦ son bir şey daha ◦
              </div>
              <p className="mt-5 font-serif italic text-xl sm:text-2xl text-white/80 max-w-lg mx-auto"
            style={{ textWrap: "pretty" }}>
                Üç reçete açıldı. Bir tane daha var —{" "}
                <span className="text-[var(--gold)] not-italic">sana özel.</span>
              </p>

              <button
              onClick={() => setModal(true)}
              className="mt-8 slow-glow inline-flex items-center gap-3 px-6 sm:px-8 py-3.5 sm:py-4 rounded-full
                           border border-white/15 bg-white/[0.03] backdrop-blur
                           text-white hover:bg-white/[0.07] transition group">


              
                <Lock size={16} className="text-[var(--gold)] glow-gold group-hover:hidden" stroke={1.6} />
                <Unlock size={16} className="text-[var(--gold)] glow-gold hidden group-hover:block" stroke={1.6} />
                <span className="font-mono text-[11px] sm:text-xs tracking-[0.35em] uppercase">
                  Gizli Reçeteyi Gör
                </span>
                <Sparkles size={14} className="text-[var(--pink)] glow-pink" />
              </button>

              <div className="mt-6 font-mono text-[10px] tracking-[0.3em] uppercase text-white/35">
                yalnızca patroniçe için
              </div>
            </div>
          </section>

          <footer className="mt-20 pb-6 text-center font-mono text-[10px] tracking-[0.3em] uppercase text-white/30">
            <div className="flex items-center justify-center gap-2">
              <HeartIcon size={10} className="text-[var(--pink)] glow-pink" />
              12.05 · senin için
              <HeartIcon size={10} className="text-[var(--pink)] glow-pink" />
            </div>
          </footer>
        </main>
      }

      <FinalModal open={modal} onClose={() => setModal(false)} />
    </div>);

}

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