import React from "react";

// Betlantis — Single-file landing page
// • Palette: Gold (#D4AF37 / #FFD700 / #A67C00), Navy (#0C1A35), Deep Shadow (#091327)
// • Minimal, premium look with subtle lighting and curved accents

const Star = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path d="M12 2l2.2 6.4 6.8.3-5.4 4 1.9 6.5L12 16l-5.5 3.2 1.9-6.5-5.4-4 6.8-.3L12 2z" />
  </svg>
);

const CloverIcon = ({ className = "w-14 h-14" }) => (
  // Minimal 4-leaf clover in gold
  <svg viewBox="0 0 200 200" className={className} role="img" aria-label="Betlantis clover">
    <defs>
      <linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#FFD700"/>
        <stop offset="60%" stopColor="#D4AF37"/>
        <stop offset="100%" stopColor="#A67C00"/>
      </linearGradient>
    </defs>
    {/** four heart leaves */}
    <g transform="translate(100 100)">
      <path d="M0-10C-25-50-70-55-85-30c-14 23 6 55 45 45 17-4 35-23 40-25z" fill="url(#goldGrad)"/>
      <path d="M10 0C50-25 55-70 30-85c-23-14-55 6-45 45 4 17 23 35 25 40z" fill="url(#goldGrad)"/>
      <path d="M0 10C25 50 70 55 85 30c14-23-6-55-45-45-17 4-35 23-40 25z" fill="url(#goldGrad)"/>
      <path d="M-10 0C-50 25-55 70-30 85c23 14 55-6 45-45-4-17-23-35-25-40z" fill="url(#goldGrad)"/>
      <path d="M-4 40c18 22 22 36 16 40-6 4-20-6-28-20" fill="none" stroke="#D4AF37" strokeWidth="6" strokeLinecap="round"/>
    </g>
  </svg>
);

const DieWaveEmblem = ({ className = "w-16 h-16" }) => (
  // Gold die + wave inside a ring (flat SVG for crisp rendering)
  <svg viewBox="0 0 256 256" className={className} role="img" aria-label="Betlantis emblem">
    <defs>
      <linearGradient id="gold2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#FFD700"/>
        <stop offset="65%" stopColor="#D4AF37"/>
        <stop offset="100%" stopColor="#A67C00"/>
      </linearGradient>
    </defs>
    <circle cx="128" cy="128" r="108" fill="none" stroke="url(#gold2)" strokeWidth="14" />
    {/* wave */}
    <path d="M44 162c24-14 44-8 64 0s40 16 68-8c0 0 22-18 36-16-18 0-30 12-44 16-24 8-42 0-62-8s-44-12-62 16z" fill="url(#gold2)"/>
    {/* die */}
    <path d="M92 62l58 8 14 52-58-6-14-54z" fill="url(#gold2)" opacity="0.9"/>
    <circle cx="128" cy="94" r="6" fill="#0C1A35"/>
    <circle cx="154" cy="100" r="6" fill="#0C1A35"/>
    <circle cx="112" cy="118" r="6" fill="#0C1A35"/>
  </svg>
);

export default function BetlantisLanding() {
  return (
    <div className="min-h-screen w-full text-white" style={{ background: "radial-gradient(80% 80% at 50% 30%, #0C1A35 0%, #091327 70%, #091327 100%)" }}>
      {/* top light flare */}
      <div className="pointer-events-none absolute inset-0" aria-hidden>
        <div className="absolute left-1/2 top-0 -translate-x-1/2 blur-3xl opacity-20" style={{width: 900, height: 300, background: "conic-gradient(from 180deg, #FFD700, #D4AF37, #A67C00)"}} />
      </div>

      {/* NAV */}
      <header className="relative z-10">
        <nav className="mx-auto max-w-6xl px-6 py-5 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <DieWaveEmblem className="w-10 h-10" />
            <span className="text-xl font-semibold tracking-wide" style={{ color: "#FFD700" }}>Betlantis</span>
          </div>
          <div className="hidden md:flex items-center gap-8 text-sm opacity-90">
            <a href="#features" className="hover:opacity-100 transition">Özellikler</a>
            <a href="#showcase" className="hover:opacity-100 transition">Vitrin</a>
            <a href="#cta" className="hover:opacity-100 transition">Başla</a>
          </div>
          <a href="#cta" className="rounded-2xl px-4 py-2 text-sm font-medium shadow-lg" style={{ backgroundColor: "#D4AF37", color: "#0C1A35" }}>Hemen Başla</a>
        </nav>
      </header>

      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="mx-auto max-w-6xl px-6 py-20 md:py-28 grid md:grid-cols-2 items-center gap-10">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs" style={{ backgroundColor: "#0C1A35", border: "1px solid #1a2a4d" }}>
              <Star className="w-3.5 h-3.5" style={{ fill: "#FFD700" }}/> Premium deneyim — Altın & Lacivert
            </div>
            <h1 className="mt-5 text-4xl md:text-6xl font-extrabold leading-tight">
              Atlantis’in şans <span style={{ color: "#FFD700" }}>ruhunu</span> yakala
            </h1>
            <p className="mt-5 text-base md:text-lg opacity-90 max-w-prose">
              Betlantis; altın dokunuşlu minimalist tasarım, hızlı performans ve güvenli yapı ile modern oyun & bahis deneyimini yeniden tanımlar.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#cta" className="rounded-xl px-5 py-3 font-semibold shadow-lg" style={{ backgroundColor: "#FFD700", color: "#0C1A35" }}>Ücretsiz Başlayın</a>
              <a href="#features" className="rounded-xl px-5 py-3 font-semibold border" style={{ borderColor: "#D4AF37", color: "#FFD700" }}>Özellikleri Keşfet</a>
            </div>
          </div>
          <div className="relative flex items-center justify-center">
            <div className="absolute -inset-10 rounded-full blur-3xl opacity-20" style={{ background: "radial-gradient(circle at 50% 50%, #FFD70022, transparent 60%)" }} />
            <div className="relative rounded-3xl p-1" style={{ background: "linear-gradient(135deg, #A67C00 0%, #D4AF37 60%, #FFD700 100%)" }}>
              <div className="rounded-3xl p-10 bg-[#0C1A35]">
                <div className="flex items-center justify-center gap-6">
                  <CloverIcon className="w-24 h-24" />
                  <DieWaveEmblem className="w-24 h-24" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="relative">
        <div className="mx-auto max-w-6xl px-6 pb-8">
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: "Premium Tasarım",
                desc: "Altın vurgular, lacivert derinlik ve sade geometri ile akılda kalıcı kimlik.",
                icon: <CloverIcon className="w-10 h-10" />,
              },
              {
                title: "Hız & Güven",
                desc: "Modern mimari, performans odaklı komponentler ve güvenli akış.",
                icon: <DieWaveEmblem className="w-10 h-10" />,
              },
              {
                title: "Esnek Varyasyonlar",
                desc: "Minimal ikon, rozet ve pattern setleri ile her platformda tutarlılık.",
                icon: <Star className="w-10 h-10" style={{ fill: "#FFD700" }} />,
              },
            ].map((f, i) => (
              <div key={i} className="rounded-2xl p-6 shadow-lg/50 bg-[#0C1A35] border" style={{ borderColor: "#132442" }}>
                <div className="mb-4 inline-flex items-center justify-center rounded-xl p-3" style={{ backgroundColor: "#091327" }}>
                  {f.icon}
                </div>
                <h3 className="text-xl font-semibold" style={{ color: "#FFD700" }}>{f.title}</h3>
                <p className="mt-2 text-sm opacity-85">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SHOWCASE */}
      <section id="showcase" className="relative py-10">
        <div className="mx-auto max-w-6xl px-6">
          <div className="flex items-end justify-between">
            <h2 className="text-2xl md:text-3xl font-bold">Vitrin</h2>
            <span className="text-sm opacity-75">Logo, rozet ve arka plan örnekleri</span>
          </div>
          <div className="mt-6 grid md:grid-cols-3 gap-6">
            {/* Card 1 */}
            <div className="rounded-2xl p-6 border" style={{ borderColor: "#132442", background: "radial-gradient(80% 80% at 50% 30%, #0C1A35, #091327)" }}>
              <div className="flex items-center justify-center h-40"><CloverIcon className="w-28 h-28" /></div>
              <div className="mt-4 text-center text-sm opacity-80">Ana Logo: 4 yapraklı yonca</div>
            </div>
            {/* Card 2 */}
            <div className="rounded-2xl p-6 border" style={{ borderColor: "#132442", background: "radial-gradient(80% 80% at 50% 30%, #0C1A35, #091327)" }}>
              <div className="flex items-center justify-center h-40"><DieWaveEmblem className="w-28 h-28" /></div>
              <div className="mt-4 text-center text-sm opacity-80">Hibrit Emblem: zar + dalga</div>
            </div>
            {/* Card 3 */}
            <div className="rounded-2xl p-6 border" style={{ borderColor: "#132442", background: "repeating-linear-gradient(45deg, #0C1A35, #0C1A35 10px, #091327 10px, #091327 20px)" }}>
              <div className="flex items-center justify-center h-40">
                <div className="rounded-xl px-4 py-2 text-sm font-semibold shadow" style={{ backgroundColor: "#FFD700", color: "#0C1A35" }}>VIP Rozet</div>
              </div>
              <div className="mt-4 text-center text-sm opacity-80">Pattern + Premium rozet örneği</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section id="cta" className="relative py-16">
        <div className="mx-auto max-w-5xl px-6">
          <div className="rounded-3xl p-8 md:p-12 text-center shadow-lg" style={{ background: "linear-gradient(135deg, #091327, #0C1A35)" }}>
            <h3 className="text-3xl font-bold">Markanı altın bir dokunuşla parlat</h3>
            <p className="mt-3 opacity-85">Betlantis arayüz kitini, ikon ve rozet setlerini hemen edinin.</p>
            <div className="mt-6 flex items-center justify-center gap-3">
              <a href="#" className="rounded-xl px-6 py-3 font-semibold shadow-lg" style={{ backgroundColor: "#FFD700", color: "#0C1A35" }}>Teklif Al</a>
              <a href="#" className="rounded-xl px-6 py-3 font-semibold border" style={{ borderColor: "#D4AF37", color: "#FFD700" }}>Örnekleri İndir</a>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="relative border-t/10" style={{ borderColor: "#132442" }}>
        <div className="mx-auto max-w-6xl px-6 py-10 grid md:grid-cols-3 gap-8 text-sm">
          <div className="opacity-85">
            <div className="flex items-center gap-2 mb-2"><DieWaveEmblem className="w-6 h-6" /><span className="font-semibold" style={{ color: "#FFD700" }}>Betlantis</span></div>
            <p>Altın & lacivert estetikle premium deneyim.</p>
          </div>
          <div className="opacity-85">
            <div className="font-medium mb-2" style={{ color: "#FFD700" }}>Bağlantılar</div>
            <ul className="space-y-1">
              <li><a href="#features" className="hover:underline">Özellikler</a></li>
              <li><a href="#showcase" className="hover:underline">Vitrin</a></li>
              <li><a href="#cta" className="hover:underline">Başla</a></li>
            </ul>
          </div>
          <div className="opacity-85">
            <div className="font-medium mb-2" style={{ color: "#FFD700" }}>İletişim</div>
            <p>support@betlantis.example</p>
          </div>
        </div>
        <div className="text-center text-xs opacity-60 pb-8">© {new Date().getFullYear()} Betlantis. Tüm hakları saklıdır.</div>
      </footer>
    </div>
  );
}