import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  BellRing,
  Boxes,
  Check,
  ClipboardCheck,
  Clock,
  Divide,
  FlaskConical,
  Gem,
  Heart,
  NotebookPen,
  PenLine,
  Plus,
  Puzzle,
  Sparkles,
  Target,
  TrendingUp,
  Trophy,
} from "lucide-react";

const testimonials = [
  {
    text: '"Teneffüs ile çalışmaya başladıktan sonra ders düzenimiz tamamen değişti. Öğretmenimiz hem konuyu anlattı hem de nasıl çalışmamız gerektiğini netleştirdi."',
    name: "Elif, 11. sınıf öğrencisi",
  },
  {
    text: '"Deneme dersinden sonra doğru öğretmeni bulduğumuzu anladık. Süreç boyunca geri bildirim almak bizi çok rahatlattı."',
    name: "Merve, veli",
  },
  {
    text: '"Eksik olduğum konular tek tek çıkarıldı. Artık neye çalışmam gerektiğini biliyorum ve denemelerde ilerlemeyi görebiliyorum."',
    name: "Arda, YKS öğrencisi",
  },
  {
    text: '"Kızım matematikten çekiniyordu. Öğretmeni sakin ve anlaşılır ilerlediği için özgüveni çok arttı."',
    name: "Selin, veli",
  },
  {
    text: '"Koçluk görüşmeleri sayesinde sadece ders değil, çalışma temposu da düzene girdi. Haftalık planlar çok işimize yaradı."',
    name: "Deniz, LGS öğrencisi",
  },
  {
    text: '"Öğretmen seçimi ve program takibi çok profesyoneldi. Çocuğumuzun sürecini ilk kez bu kadar net takip edebildik."',
    name: "Burak, veli",
  },
];

const services = [
  [<Target size={28} strokeWidth={1.8} />, "1-1 Koçluk", "Her öğrenci için hedeflere uygun kişiselleştirilmiş çalışma planı oluşturulur."],
  [<Trophy size={28} strokeWidth={1.8} />, "Derece Öğrencilerinden Özel Ders", "Türkiye'nin en başarılı üniversitelerinde eğitim gören eğitmenlerle birebir çalışma imkanı."],
  [<TrendingUp size={28} strokeWidth={1.8} />, "Gelişim Takibi", "Konu eksikleri, ödevler ve deneme sonuçları düzenli olarak takip edilir."],
  [<Puzzle size={28} strokeWidth={1.8} />, "Öğrenciye Özel Eşleştirme", "Seviyene ve hedeflerine en uygun eğitmenle eşleştirilirsin."],
  [<Clock size={28} strokeWidth={1.8} />, "Esnek Ders Saatleri", "Yoğun programına uyum sağlayan esnek ders planlaması."],
  [<ClipboardCheck size={28} strokeWidth={1.8} />, "Düzenli Raporlama", "Öğrencinin gelişim süreci belirli aralıklarla değerlendirilir ve raporlanır."],
];

const faqs = [
  ["Deneme dersi ne kadar sürer?", "Ders programı ve öğrenci seviyesine göre süre değişebilir; ilk görüşmede sana en uygun akışı netleştiriyoruz."],
  ["Öğretmeni ben seçebilir miyim?", "Evet, hedef ve seviyene göre önerilen öğretmenler arasından sana en uygun eğitmenle ilerleyebilirsin."],
  ["Öğrenci derse alışamazsa ne olur?", "İlk derste öğrencinin temposunu ölçüp planı buna göre sakin ve sürdürülebilir şekilde kuruyoruz."],
  ["Veliler süreci takip edebilir mi?", "Veliler süreç raporlarını takip edebilir; ders akışında öğrenci-öğretmen odağını koruyoruz."],
  ["Haftada kaç ders almalıyım?", "Haftalık ders sıklığı hedef, sınav tarihi ve mevcut seviyeye göre birlikte belirlenir."],
];

const successCards = [
  ["YKS", "+18 net", "6 haftalık düzenli matematik planı"],
  ["LGS", "%92 takip", "Haftalık ödev ve deneme kontrolü"],
  ["TYT", "+11 net", "Konu eksikleri için birebir koçluk"],
  ["AYT", "4.8/5", "Öğretmen uyumu ve ders memnuniyeti"],
  ["Program", "3 gün", "Esnek ders saati ve hızlı eşleşme"],
  ["Veli", "Haftalık", "Düzenli gelişim raporu paylaşımı"],
];

const WHATSAPP_URL = `https://wa.me/?text=${encodeURIComponent("Merhaba, Teneffüs üzerinden ücretsiz deneme dersi almak istiyorum.")}`;

function Header() {
  return (
    <header className="header">
      <a className="brand" href="#">
        <span className="brand-mark bell-logo"><BellRing size={18} strokeWidth={2.4} /></span>
        <span>Teneffüs</span>
      </a>
      <nav>
        <a href="#about">Hakkımızda</a>
        <a href="#services">Farkımız</a>
        <a href="#pricing">Programlarımız</a>
        <a href="#faqs">Sorular</a>
      </nav>
      <a className="btn" href={WHATSAPP_URL} target="_blank" rel="noreferrer">Ücretsiz Deneme Dersi Al</a>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="about">
      <div className="hero-copy reveal">
        <Pill icon={<NotebookPen size={12} />} text="Türkiye'nin ilk 5 üniversitesinden eğitmenlerle" />
        <h1>
          <span className="hero-line">
            <span className="hero-word red"><Plus size={28} /> Sınavlarına</span>
            <span className="hero-word blue"><Divide size={28} /> Teneffüs ile</span>
          </span>
          <span className="hero-line">
            <span className="hero-word green"><PenLine size={28} /> hazırlan,</span>
            <span className="hero-word amber"><FlaskConical size={28} /> başarını</span>
          </span>
          <span className="hero-line">
            <span className="hero-word amber no-icon">şansa bırakma.</span>
          </span>
        </h1>
        <p className="hero-kicker">
          Türkiye'nin ilk 5 üniversitesindeki derece öğrencileri ve deneyimli öğretmenlerinden 1-1 ders ve koçluk al.
        </p>
        <div className="hero-actions">
          <a className="btn secondary" href="#pricing"><Boxes size={16} /> Paketlerimiz</a>
          <a className="btn" href={WHATSAPP_URL} target="_blank" rel="noreferrer"><NotebookPen size={16} /> Ücretsiz Ders</a>
        </div>
      </div>
      <div className="hero-study-stack reveal delay-1" aria-hidden="true">
        <div className="study-card math-card">
          <span className="floating-symbol symbol-plus">+</span>
          <span className="floating-symbol symbol-minus">-</span>
          <span className="floating-symbol symbol-divide">÷</span>
          <span className="floating-symbol symbol-times">×</span>
        </div>
        <div className="study-card notebook-card">
          <NotebookPen size={58} />
          <span />
          <span />
          <span />
        </div>
        <div className="study-card lab-card">
          <FlaskConical size={70} />
          <PenLine size={52} />
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="soft-section testimonials">
      <Pill icon={<Heart size={12} />} text="Geri Dönüşler" />
      <h2>Ders Çalışmayı<br />Bizimle Verimli Hale<br />Getiren Öğrenci<br />ve Velilerimiz</h2>
      <div className="testimonial-grid reveal">
        {testimonials.map((item, index) => (
          <article className="quote reveal" style={{ "--d": `${index * 70}ms` }} key={item.name}>
            <p>{item.text}</p>
            <strong><span className="avatar" /> — {item.name}</strong>
          </article>
        ))}
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="process soft-section">
      <div className="process-title reveal">
        <Pill text="Nasıl İlerler" />
        <h2>Sürecimiz Nasıl İlerliyor</h2>
      </div>
      <div className="steps">
        <Step number="01" icon={<Sparkles size={18} />} title="Ücretsiz Deneme Dersi Ayarlayın" delay={0}>
          <p>Hedeflerinizi ve beklentilerinizi anlamak için sizin seçtiğiniz uzman eğitmenimizle ücretsiz bir demo ders gerçekleştiriyoruz.</p>
          <p>Bu süreçte öğretmenin anlatım tarzını deneyimleyin.</p>
          <TeacherPicker />
        </Step>
        <Step number="02" icon={<TrendingUp size={18} />} title="Size Uygun Programı Seçin" delay={120}>
          <p>Deneme dersinden sonra, mevcut durumuna ve hedeflerine göre uygun programa kayıt olun.</p>
          <SchedulePicker />
        </Step>
        <Step number="03" icon={<Sparkles size={18} />} title="Size Özel 1-1 Süreç Başlasın" delay={240}>
          <p>Kayıt işlemi tamamlandıktan sonra tamamen size özel planlanan birebir eğitim süreci başlar.</p>
          <OneToOneFlow />
        </Step>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="ala-carte" id="services">
      <Pill icon={<Gem size={12} />} text="Farkımız" />
      <h2>Bizimle Sınava Hazırlanmak<br />Diğerlerinden Farklıdır</h2>
      <p className="lead">Hedefine, seviyene ve zamanına göre öğretmen, ders ve koçluk desteğini birlikte planlarız.</p>
      <div className="service-grid">
        {services.map(([marker, title, copy], index) => (
          <article className="service reveal" style={{ "--d": `${index * 65}ms` }} key={title}>
            <div className="service-icon" aria-hidden="true">{marker}</div>
            <h3>{title}</h3>
            <p>{copy}</p>
          </article>
        ))}
      </div>
      <a className="btn" href={WHATSAPP_URL} target="_blank" rel="noreferrer">Ücretsiz Deneme Dersi</a>
    </section>
  );
}

function Pricing() {
  return (
    <section className="pricing" id="pricing">
      <Pill text="Programlar" />
      <h2>Programlarımız</h2>
      <div className="pricing-grid">
        <PriceCard name="Deneme Dersi" icon={<Boxes size={20} />} />
        <PriceCard name="Özel Ders" icon={<Gem size={20} />} />
        <PriceCard name="Özel Ders + Koçluk" icon={<Sparkles size={20} />} badge />
      </div>
    </section>
  );
}

function FaqSection() {
  const [open, setOpen] = useState(1);
  return (
    <section className="faq" id="faqs">
      <div className="faq-copy">
        <h2>Sıkça sorulan <span>sorular</span></h2>
        <p>Merak ettiğin konu burada yoksa ücretsiz deneme dersi alıp doğrudan bize sorabilirsin.</p>
        <div className="faq-list">
          {faqs.map(([question, answer], index) => (
            <div className={`faq-item ${open === index ? "active" : ""}`} key={question}>
              <button onClick={() => setOpen(open === index ? -1 : index)} type="button">
                <strong>{String(index + 1).padStart(2, "0")}</strong>
                <span>{question}</span>
                <Plus size={22} />
              </button>
              <p>{answer}</p>
            </div>
          ))}
        </div>
        <a className="faq-direct btn" href={WHATSAPP_URL} target="_blank" rel="noreferrer"><NotebookPen size={16} /> Ücretsiz Deneme Dersi Al</a>
      </div>
    </section>
  );
}

function PriceCard({ name, badge, icon }) {
  const plans = {
    "Deneme Dersi": {
      desc: "Öğretmenle tanışıp ders anlatım tarzını, seviyene uyumunu ve çalışma akışını risksiz görmek isteyen öğrenciler için.",
      cta: "Deneme Dersi Al",
      features: ["Öğretmen-öğrenci uyumunu ölçeriz", "Seviye ve hedef analizi yaparız", "Ders anlatım tarzını deneyimlersin", "İlk çalışma yol haritanı çıkarırız"],
    },
    "Özel Ders": {
      desc: "Belirli derslerde konu eksiğini kapatmak ve soru çözüm pratiğini artırmak isteyen öğrenciler için.",
      cta: "Başla",
      features: ["Haftalık birebir özel ders", "Derse özel konu anlatımı", "Soru çözüm ve ödev desteği", "Öğretmen geri bildirimi"],
    },
    "Özel Ders + Koçluk": {
      desc: "Özel dersin yanında çalışma disiplini, deneme takibi ve hedef planlamasıyla ilerlemek isteyenler için.",
      cta: "İletişime Geç",
      features: ["Haftalık özel ders programı", "1-1 koçluk görüşmeleri", "Deneme ve net takibi", "Veliye düzenli gelişim raporu"],
    },
  };
  const plan = plans[name];
  return (
    <article className={`price-card ${badge ? "featured" : ""}`}>
      {badge && <div className="deal">En Çok Seçilen</div>}
      <h3><span className="plan-icon">{icon}</span> {name}</h3>
      <p className="desc">{plan.desc}</p>
      <a className="price-button" href={WHATSAPP_URL} target="_blank" rel="noreferrer">{plan.cta}</a>
      <ul>{plan.features.map((f) => <li key={f}><Check size={16} /> {f}</li>)}</ul>
    </article>
  );
}

function Footer() {
  const [legalOpen, setLegalOpen] = useState(null);

  return (
    <>
      <footer>
        <a className="brand" href="#">
          <span className="brand-mark bell-logo"><BellRing size={18} strokeWidth={2.4} /></span>
          <span>Teneffüs</span>
        </a>
        <nav>
          <a href="#about">Hakkımızda</a>
          <a href="#services">Farkımız</a>
          <a href="#pricing">Programlarımız</a>
          <a href="#faqs">Sorular</a>
        </nav>
        <p>Teneffüs © 2026 Tüm hakları saklıdır.</p>
        <div className="policies">
          <button type="button" onClick={() => setLegalOpen("privacy")}>Gizlilik Politikası</button>
          <button type="button" onClick={() => setLegalOpen("terms")}>Kullanım Koşulları</button>
        </div>
      </footer>
      <LegalModal type={legalOpen} onClose={() => setLegalOpen(null)} />
    </>
  );
}

function LegalModal({ type, onClose }) {
  if (!type) return null;
  const isPrivacy = type === "privacy";

  return (
    <div className="legal-modal" role="dialog" aria-modal="true" aria-labelledby="legal-title">
      <button className="legal-backdrop" type="button" onClick={onClose} aria-label="Kapat" />
      <article className="legal-panel">
        <button className="legal-close" type="button" onClick={onClose} aria-label="Kapat">×</button>
        <Pill text={isPrivacy ? "Gizlilik" : "Koşullar"} />
        <h2 id="legal-title">{isPrivacy ? "Gizlilik Politikası" : "Kullanım Koşulları"}</h2>
        <p className="legal-updated">Son güncelleme: 25 Haziran 2026</p>

        {isPrivacy ? (
          <div className="legal-content">
            <p>Teneffüs, öğrenciler ve velilerle deneme dersi, özel ders ve koçluk süreçleri hakkında iletişim kurmak için paylaşılan bilgileri işler. Bu metin, hangi bilgileri neden topladığımızı ve bu bilgilerle ilgili haklarınızı açıklar.</p>
            <h3>Toplanan bilgiler</h3>
            <p>Ad-soyad, telefon numarası, WhatsApp iletişim bilgisi, e-posta adresi, sınıf seviyesi, hedef sınav, ihtiyaç duyulan dersler, uygun ders saatleri ve öğrenciye özel eğitim beklentileri gibi yalnızca süreç için gerekli bilgiler talep edilebilir.</p>
            <h3>Bilgileri kullanım amacı</h3>
            <ul>
              <li><Check size={16} /> Ücretsiz deneme dersi talebinizi almak ve size dönüş yapmak.</li>
              <li><Check size={16} /> Seviyenize, hedefinize ve uygunluğunuza göre öğretmen eşleştirmesi önermek.</li>
              <li><Check size={16} /> Özel ders, koçluk, program, saat ve ücretlendirme bilgilerini paylaşmak.</li>
              <li><Check size={16} /> Ders sonrası geri bildirim, gelişim takibi ve veli bilgilendirmesi yapmak.</li>
            </ul>
            <h3>İletişim kanalları</h3>
            <p>Başvurular ve bilgilendirmeler WhatsApp, telefon, SMS veya e-posta üzerinden yürütülebilir. Sitedeki WhatsApp yönlendirmesine tıkladığınızda WhatsApp uygulamasına veya web arayüzüne aktarılırsınız.</p>
            <h3>Paylaşım ve saklama</h3>
            <p>Bilgileriniz, hizmetin yürütülmesi için gerekli olduğu ölçüde ilgili öğretmen, koç veya operasyon ekibiyle paylaşılabilir. Pazarlama amacıyla üçüncü kişilere satılmaz veya izniniz olmadan alakasız taraflarla paylaşılmaz.</p>
            <h3>Haklarınız</h3>
            <p>Bilgilerinizin güncellenmesini, düzeltilmesini veya silinmesini talep edebilirsiniz. Bunun için sitedeki WhatsApp yönlendirmesi üzerinden bizimle iletişime geçmeniz yeterlidir.</p>
          </div>
        ) : (
          <div className="legal-content">
            <p>Teneffüs web sitesini kullanarak ücretsiz deneme dersi, özel ders, koçluk ve program bilgilendirmesi amacıyla bizimle iletişime geçebileceğinizi kabul etmiş olursunuz.</p>
            <h3>Hizmet kapsamı</h3>
            <p>Teneffüs; öğrencilerin hedeflerine göre öğretmen eşleştirme, birebir özel ders, koçluk, deneme takibi ve gelişim planlaması konularında destek sunar. Nihai program, öğrencinin seviyesi, hedefi, uygun saatleri ve öğretmen müsaitliği doğrultusunda belirlenir.</p>
            <h3>Ücretsiz deneme dersi</h3>
            <ul>
              <li><Check size={16} /> Deneme dersi, öğretmen-öğrenci uyumunu ve ders anlatım tarzını görmek için planlanır.</li>
              <li><Check size={16} /> Deneme dersinin tarihi, saati ve kapsamı iletişim sırasında netleştirilir.</li>
              <li><Check size={16} /> Deneme sonrası program önerisi, öğrencinin ihtiyaçlarına göre paylaşılır.</li>
            </ul>
            <h3>Programlar ve ücretlendirme</h3>
            <p>Paket içerikleri, ders sıklığı, ödeme koşulları ve iptal/değişiklik detayları kullanıcıya kayıt öncesinde ayrıca bildirilir. Web sitesindeki açıklamalar genel bilgilendirme niteliğindedir.</p>
            <h3>Kullanıcı sorumluluğu</h3>
            <p>Başvuru sırasında paylaşılan bilgilerin doğru ve güncel olması beklenir. Öğrencinin ders saatine hazırlanması, gerekli materyalleri bulundurması ve öğretmenle iletişim kurallarına uyması sürecin verimli ilerlemesi için önemlidir.</p>
            <h3>İletişim</h3>
            <p>Sorular, program talepleri, iptal/değişiklik istekleri ve diğer başvurular için sitedeki WhatsApp yönlendirmesi üzerinden bizimle iletişime geçebilirsiniz.</p>
          </div>
        )}
      </article>
    </div>
  );
}

function ScrollCta() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setVisible(window.scrollY > 520);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <a className={`scroll-cta ${visible ? "show" : ""}`} href={WHATSAPP_URL} target="_blank" rel="noreferrer" aria-label="Ücretsiz deneme dersi al">
      <span className="scroll-cta-icon" aria-hidden="true">
        <NotebookPen size={34} strokeWidth={1.9} />
      </span>
      <span className="scroll-cta-badge">Ücretsiz</span>
      <span className="scroll-cta-text">Deneme dersini hemen planla.</span>
      <span className="scroll-cta-arrow" aria-hidden="true">→</span>
    </a>
  );
}

function Pill({ icon, text }) {
  return <span className="pill">{icon}{text}</span>;
}

function Step({ icon, title, number, delay = 0, children }) {
  return (
    <article className="step reveal" style={{ "--d": `${delay}ms` }}>
      <div className="step-icon">{icon}</div>
      <h3>{title}</h3>
      {children}
      <span className="step-number">{number}</span>
    </article>
  );
}

function TeacherPicker() {
  const teachers = [
    ["Ece", "Matematik", "%96 uyum", "EA"],
    ["Mert", "Fizik", "%92 uyum", "MF"],
    ["Duru", "Türkçe", "%94 uyum", "TR"],
  ];

  return (
    <div className="teacher-picker" aria-label="Öğretmen seçimi animasyonu">
      <div className="teacher-toolbar">
        <span>Uzman öğretmenler</span>
        <strong>3 uygun eşleşme</strong>
      </div>
      <div className="teacher-stack">
        {teachers.map(([name, subject, match, initials], index) => (
          <article className="teacher-card" style={{ "--i": index }} key={name}>
            <div className="teacher-avatar">{initials}</div>
            <div>
              <h4>{name} Öğretmen</h4>
              <p>{subject}</p>
            </div>
            <span>{match}</span>
          </article>
        ))}
      </div>
      <div className="teacher-selected">
        <Check size={18} />
        <span>Seçilen öğretmenle deneme dersi hazır</span>
      </div>
    </div>
  );
}

function SchedulePicker() {
  const slots = ["Pzt 18:00", "Çar 19:30", "Cum 17:00"];

  return (
    <div className="schedule-picker" aria-label="Program ve ders saati seçimi animasyonu">
      <div className="schedule-program">
        <span>Seçilen Program</span>
        <strong>Gelişim Paketi</strong>
        <p>Haftalık 1-1 ders + deneme takibi</p>
      </div>
      <div className="schedule-slots">
        {slots.map((slot, index) => (
          <button className={index === 1 ? "selected" : ""} style={{ "--i": index }} type="button" key={slot}>
            {slot}
          </button>
        ))}
      </div>
      <div className="schedule-confirm">
        <Check size={18} />
        <span>Çarşamba 19:30 dersi programa eklendi</span>
      </div>
    </div>
  );
}

function OneToOneFlow() {
  return (
    <div className="one-to-one-flow" aria-label="1-1 özel ders süreci animasyonu">
      <div className="flow-people">
        <div className="flow-person student">
          <span>Öğrenci</span>
          <strong>Arda</strong>
        </div>
        <div className="flow-link">
          <i />
          <Check size={18} />
        </div>
        <div className="flow-person teacher">
          <span>Öğretmen</span>
          <strong>Ece</strong>
        </div>
      </div>
      <div className="flow-plan">
        {["Konu planı oluşturuldu", "İlk ödev atandı", "Haftalık takip başladı"].map((item, index) => (
          <p style={{ "--i": index }} key={item}><Check size={15} /> {item}</p>
        ))}
      </div>
      <div className="flow-progress">
        <span />
      </div>
    </div>
  );
}

function RevealObserver() {
  useEffect(() => {
    const items = document.querySelectorAll(".reveal");
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) entry.target.classList.add("is-visible");
      });
    }, { threshold: 0.28, rootMargin: "0px 0px -10% 0px" });
    items.forEach((item) => observer.observe(item));
    return () => observer.disconnect();
  }, []);
  return null;
}

function App() {
  return (
    <>
      <RevealObserver />
      <Header />
      <main>
        <Hero />
        <Pricing />
        <Process />
        <Testimonials />
        <Services />
        <FaqSection />
      </main>
      <Footer />
      <ScrollCta />
    </>
  );
}

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