<div class="min-h-screen bg-base-200">
  <!-- Header/Nav -->
  <header class="sticky top-0 z-20 bg-base-100/70 backdrop-blur">
    <div class="container mx-auto px-4 py-3">
      <div class="mx-auto max-w-5xl rounded-full border shadow-sm bg-base-100 px-4 h-14 flex items-center justify-between">
        <a href="/" class="flex items-center gap-2 font-semibold text-base">
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary text-primary-content">TG</span>
          <span>Telegram Bot Paneli</span>
        </a>
        <nav class="hidden md:flex items-center gap-6 text-sm">
          <a href="#features" class="link link-hover">Özellikler</a>
          <a href="#pricing" class="link link-hover">Fiyatlandırma</a>
          <a href="#how" class="link link-hover">Nasıl Çalışır?</a>
          <a href="#faq" class="link link-hover">SSS</a>
        </nav>
        <div class="flex items-center gap-2">
          <a class="btn btn-outline btn-primary btn-sm rounded-full" href="/auth/login">Giriş</a>
          <a class="btn btn-primary btn-sm rounded-full" href="/auth/register">Kayıt Ol</a>
        </div>
      </div>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero min-h-[80vh] text-base-100" style="background: linear-gradient(180deg, #0A3D62 0%, #00A8CC 100%);">
    <div class="hero-content text-center max-w-5xl">
      <div class="w-full">
        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">Telegram İçerik Zamanlama Kolaylaştı</h1>
        <p class="mx-auto max-w-3xl mb-6 opacity-90">Gönderilerinizi hemen, tek seferlik, günlük veya haftalık planlayın. Havuzlar ile rastgele içerik paylaşın. Kolay yönetim paneli ve modern arayüz.</p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
          <a class="btn btn-primary btn-wide rounded-full" href="/auth/register">Ücretsiz Başlayın</a>
          <a class="btn btn-outline btn-primary rounded-full" href="#pricing">Planları Gör</a>
        </div>
        <div class="stats stats-vertical lg:stats-horizontal shadow mt-8 w-full bg-base-100 text-base-content">
          <div class="stat">
            <div class="stat-title">Plan Türleri</div>
            <div class="stat-value text-primary">Free • Starter • Pro</div>
            <div class="stat-desc">İhtiyacına göre ölçeklenir</div>
          </div>
          <div class="stat">
            <div class="stat-title">Zamanlama</div>
            <div class="stat-value text-primary">Anında • Günlük • Haftalık</div>
            <div class="stat-desc">Esnek planlama seçenekleri</div>
          </div>
          <div class="stat">
            <div class="stat-title">Loglar</div>
            <div class="stat-value text-primary">Gönderim Takibi</div>
            <div class="stat-desc">Başarılı/Hata raporları</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Partner Logos Band -->
  <section class="py-6 bg-base-100">
    <div class="container mx-auto px-4">
      <div class="rounded-2xl bg-base-200 px-6 py-4 flex flex-wrap items-center justify-center gap-6 text-sm opacity-80">
        <span class="inline-flex items-center gap-2"><i class="fas fa-leaf text-success"></i> 3Portals</span>
        <span class="inline-flex items-center gap-2"><i class="fas fa-bolt text-warning"></i> Alt+Shift</span>
        <span class="inline-flex items-center gap-2"><i class="fas fa-smile text-accent"></i> Euphoria</span>
        <span class="inline-flex items-center gap-2"><i class="fas fa-coins text-primary"></i> EasyTax</span>
        <span class="inline-flex items-center gap-2"><i class="fas fa-check text-success"></i> Goodwell</span>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-16 bg-neutral">
    <div class="container mx-auto px-4 text-neutral-content">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-10">And many more key features!</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Esnek Zamanlama</h3>
            <p>Hemen gönder, tek seferlik, günlük ve haftalık planları tek panelden yönet.</p>
          </div>
        </div>
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Havuz (Pool) Gönderimleri</h3>
            <p>Rastgele öğe seçimiyle içerik çeşitliliğini artır. Haftalık ya da günlük paylaş.</p>
          </div>
        </div>
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Gönderim Logları</h3>
            <p>Başarılı gönderimler ve hatalar için detaylı günlük, kanal filtresi ve JSON detayları.</p>
          </div>
        </div>
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Plan & Kullanım</h3>
            <p>Kalan kota, dönem bitişi ve yükseltme seçeneklerini tek bakışta gör.</p>
          </div>
        </div>
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Çoklu Kanal Yönetimi</h3>
            <p>Birden fazla kanalı kolayca yönet. Erişim yetkileriyle güvenli paylaşım.</p>
          </div>
        </div>
        <div class="card bg-neutral-focus shadow hover:shadow-xl transition rounded-2xl">
          <div class="card-body">
            <h3 class="card-title">Modern Arayüz</h3>
            <p>Tailwind + daisyUI ile hızlı, temiz ve mobil uyumlu bir panel deneyimi.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- How it works -->
  <section id="how" class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-10">Nasıl Çalışır?</h2>
      <div class="steps steps-vertical md:steps-horizontal w-full">
        <div class="step step-primary">Kayıt Ol</div>
        <div class="step step-primary">Kanal Ekle</div>
        <div class="step step-primary">İçerik Oluştur</div>
        <div class="step step-primary">Zamanla & Yayınla</div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section id="pricing" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-10">Let’s get started?</h2>
      <% const list = Array.isArray(plans) ? plans : []; %>
      <% const maxPrice = list.length ? Math.max.apply(null, list.map(p=>Number(p.price_month||0))) : 0; %>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
        <% list.forEach(function(p){ %>
          <div class="card bg-base-100 shadow-lg rounded-3xl <%= Number(p.price_month||0)===maxPrice ? 'border-2 border-primary shadow-xl' : '' %>">
            <div class="card-body">
              <% if (Number(p.price_month||0)===maxPrice) { %>
                <div class="badge badge-primary self-start">Most Popular</div>
              <% } %>
              <h3 class="card-title"><%= p.name %></h3>
              <p class="text-sm text-gray-500">
                <% if (p.name.toLowerCase()==='free') { %>Başlamak için ideal<% } else { %>Büyüyen hesaplar ve ekipler<% } %>
              </p>
              <div class="text-5xl font-bold my-4">
                <%= Number(p.price_month||0).toLocaleString('tr-TR', { maximumFractionDigits: 2 }) %>
                <span class="text-base font-medium">/ay</span>
              </div>
              <ul class="text-sm space-y-2 mb-2">
                <li>• Kanal limiti: <%= p.channel_limit %></li>
                <li>• Aylık gönderim limiti: <%= p.post_limit_month %></li>
                <li>• Planlı iş limiti: <%= p.schedule_limit %></li>
              </ul>
              <a href="/auth/register" class="btn <%= Number(p.price_month||0)===maxPrice ? 'btn-primary' : 'btn-outline btn-primary' %> mt-2 rounded-full">Kaydol</a>
            </div>
          </div>
        <% }) %>
      </div>
      <p class="text-center text-xs text-gray-500 mt-6">Fiyatlar ve indirimler zamanla değişebilir.</p>
    </div>
  </section>

  <!-- Integrations -->
  <section class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-10">Entegrasyonlar</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 items-center opacity-80">
        <div class="p-6 bg-base-200 rounded-lg text-center">Telegram Bot API</div>
        <div class="p-6 bg-base-200 rounded-lg text-center">Node.js</div>
        <div class="p-6 bg-base-200 rounded-lg text-center">MySQL</div>
        <div class="p-6 bg-base-200 rounded-lg text-center">CKEditor</div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section id="faq" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">Frequently asked questions!</h2>
      <div class="w-full md:w-3/4 mx-auto space-y-3">
        <div class="collapse collapse-arrow rounded-2xl bg-base-200">
          <input type="checkbox" />
          <div class="collapse-title text-lg font-medium">Planlar nasıl çalışır?</div>
          <div class="collapse-content">
            <p>Free/Starter/Pro planlarında kanal, gönderim ve planlı iş limitleri bulunur. Dönem bitiminde sayaçlar yenilenir.</p>
          </div>
        </div>
        <div class="collapse collapse-arrow rounded-2xl bg-base-200">
          <input type="checkbox" />
          <div class="collapse-title text-lg font-medium">Zamanlama seçenekleri neler?</div>
          <div class="collapse-content">
            <p>Hemen gönder, tek seferlik tarih-saat, günlük belirli saat ve haftalık (gün+saat) seçenekleri mevcuttur.</p>
          </div>
        </div>
        <div class="collapse collapse-arrow rounded-2xl bg-base-200">
          <input type="checkbox" />
          <div class="collapse-title text-lg font-medium">Havuz gönderimi nedir?</div>
          <div class="collapse-content">
            <p>Önceden tanımladığınız içerik havuzundan rastgele seçilen öğe planlı saatlerde paylaşılır.</p>
          </div>
        </div>
      </div>
      <div class="text-center mt-10">
        <a class="btn btn-primary btn-wide rounded-full" href="/auth/register">Hemen Başla</a>
      </div>
    </div>
  </section>

  <!-- CTA Banner -->
  <section class="py-10">
    <div class="container mx-auto px-4">
      <div class="rounded-3xl bg-gradient-to-br from-indigo-600 to-indigo-500 text-base-100 p-10 md:p-16 text-center">
        <h3 class="text-3xl md:text-4xl font-extrabold">Create Tasks with Rich Details</h3>
        <p class="opacity-90 mt-2">Easily add new tasks with all the details you need.</p>
        <a href="/auth/register" class="btn btn-accent mt-6 rounded-full">Start a free trial</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-8 bg-base-100 border-t">
    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-3 text-sm text-gray-500">
      <div>© <%= new Date().getFullYear() %> Telegram Bot Paneli</div>
      <div class="flex items-center gap-2">
        <a class="link" href="/auth/login">Giriş</a>
        <span>•</span>
        <a class="link" href="/auth/register">Kayıt</a>
      </div>
    </div>
  </footer>
</div>
