import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowRight,
  BadgeCheck,
  Check,
  ChevronRight,
  Clock3,
  Headphones,
  RefreshCw,
  SearchCheck,
  ShieldCheck,
  Sparkles,
} from "lucide-react";
import { ProductCard } from "@/components/ProductCard";
import { ProductIcon } from "@/components/ProductIcon";
import { JsonLd } from "@/components/JsonLd";
import { products } from "@/lib/products";
import { createPageMetadata } from "@/lib/seo";

const featured = products.slice(0, 6);
const homeFaqs = [
  {
    question: "Sigorta teklifi almak için hangi bilgiler gerekir?",
    answer:
      "Gerekli bilgiler ürüne göre değişir. Araç sigortalarında ruhsat ve kimlik bilgileri; sağlık sigortalarında yaş, şehir ve sağlık beyanı; konut ürünlerinde ise adres ve bina bilgileri istenir.",
  },
  {
    question: "Sigorta teklifleri nasıl karşılaştırılır?",
    answer:
      "Teklifler yalnızca fiyata göre değil; teminatlar, limitler, muafiyetler, hizmet ağı ve ihtiyaçlarınıza uygunluk birlikte değerlendirilerek karşılaştırılır.",
  },
  {
    question: "Poliçe yenileme takibi yapıyor musunuz?",
    answer:
      "Evet. Düzenlenen poliçelerin bitiş tarihi takip edilir ve yenileme dönemi yaklaşırken güncel ihtiyaçlarınız için yeniden değerlendirme yapılır.",
  },
  {
    question: "Hasar anında destek alabilir miyim?",
    answer:
      "Evet. Hasar ihbarı, gerekli evraklar ve dosya takibinde izlemeniz gereken adımlar konusunda danışman desteği alabilirsiniz.",
  },
];

export const metadata: Metadata = createPageMetadata({
  title: "Online Sigorta Teklifi Alın",
  description:
    "Trafik, kasko, tamamlayıcı sağlık, DASK, konut ve diğer sigorta ürünlerinde ihtiyacınıza uygun teklifleri karşılaştırın; hızlıca teklif alın.",
  path: "/",
  keywords: ["sigorta acentesi", "sigorta fiyatları", "sigorta karşılaştırma"],
});

export default function Home() {
  return (
    <main>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: homeFaqs.map((item) => ({
            "@type": "Question",
            name: item.question,
            acceptedAnswer: { "@type": "Answer", text: item.answer },
          })),
        }}
      />
      <section className="hero">
        <div className="hero-orb hero-orb-one" />
        <div className="hero-orb hero-orb-two" />
        <div className="page-shell hero-shell">
          <div className="hero-copy">
            <div className="hero-kicker"><Sparkles size={15} /> Tek ekranda doğru sigorta</div>
            <h1>Sigortanız net,<br /><span>hayatınız rahat.</span></h1>
            <p>İhtiyacınızı anlatın; farklı şirketlerin tekliflerini anlaşılır şekilde karşılaştırıp size en uygun kapsamı birlikte bulalım.</p>
            <div className="hero-actions">
              <Link href="/teklif" className="button button-large">Hemen Teklif Al <ArrowRight size={19} /></Link>
              <a href="tel:+902125554433" className="button button-ghost button-large">Uzmanla Görüş</a>
            </div>
            <div className="hero-trust">
              <span><BadgeCheck size={18} /> Yetkili acente</span>
              <span><Clock3 size={18} /> Hızlı dönüş</span>
              <span><RefreshCw size={18} /> Yenileme takibi</span>
            </div>
          </div>

          <div className="hero-quote-card">
            <div className="quote-card-heading">
              <div><small>Ürününüzü seçin</small><h2>Teklifinizi başlatın</h2></div>
              <span>2 dk</span>
            </div>
            <div className="hero-product-list">
              {featured.map((product) => (
                <Link href={`/teklif?urun=${product.slug}`} key={product.slug}>
                  <span className="hero-product-icon" style={{ background: product.accent }}><ProductIcon slug={product.slug} size={20} /></span>
                  <span><strong>{product.shortName}</strong><small>{product.eyebrow}</small></span>
                  <ChevronRight size={18} />
                </Link>
              ))}
            </div>
            <Link className="all-products-link" href="/urunler">Tüm sigorta ürünlerini gör <ArrowRight size={16} /></Link>
          </div>
        </div>
        <div className="page-shell hero-product-strip">
          <span>En çok tercih edilenler</span>
          {featured.slice(0, 5).map((product) => <Link key={product.slug} href={`/teklif?urun=${product.slug}`}>{product.shortName}</Link>)}
        </div>
      </section>

      <section className="section page-shell">
        <div className="section-heading split-heading">
          <div><span className="eyebrow">İhtiyacınıza göre</span><h2>Hayatın her anına bir güvence</h2></div>
          <div><p>Aracınızdan sağlığınıza, evinizden işinize kadar tüm önemli riskler için kapsamı anlaşılır çözümler.</p><Link href="/urunler" className="text-link">Tüm ürünleri incele <ArrowRight size={17} /></Link></div>
        </div>
        <div className="product-grid">
          {featured.map((product) => <ProductCard key={product.slug} product={product} />)}
        </div>
      </section>

      <section className="section soft-section">
        <div className="page-shell promise-grid">
          <div className="promise-copy">
            <span className="eyebrow">Sadece poliçe değil</span>
            <h2>Karar verirken de, ihtiyaç anında da yanınızdayız.</h2>
            <p>Teminatları sade bir dille anlatır, poliçenizi düzenledikten sonra yenileme ve hasar süreçlerini takip ederiz.</p>
            <Link href="/hakkimizda" className="button button-ghost">Bizi Tanıyın <ArrowRight size={18} /></Link>
          </div>
          <div className="promise-cards">
            <article><span><SearchCheck /></span><div><h3>Doğru karşılaştırma</h3><p>Sadece fiyata değil; teminat, muafiyet ve hizmet ağına birlikte bakarız.</p></div></article>
            <article><span><Headphones /></span><div><h3>Gerçek danışman desteği</h3><p>Sorunuz olduğunda otomatik yanıtlar değil, poliçenizi bilen bir uzman konuşur.</p></div></article>
            <article><span><ShieldCheck /></span><div><h3>Hasar anında destek</h3><p>İhbar, evrak ve dosya takibinde hangi adımı atacağınızı netleştiririz.</p></div></article>
          </div>
        </div>
      </section>

      <section className="section page-shell process-section">
        <div className="section-heading centered-heading"><span className="eyebrow">Kolay ve şeffaf</span><h2>Üç adımda sigortanız hazır</h2><p>Uzun telefon görüşmeleri ve karışık formlar olmadan.</p></div>
        <div className="process-grid">
          <article><span>01</span><div className="process-icon"><SearchCheck /></div><h3>Bilgilerinizi girin</h3><p>Ürüne göre yalnızca gerekli bilgileri soruyoruz.</p></article>
          <article><span>02</span><div className="process-icon"><RefreshCw /></div><h3>Teklifleri karşılaştıralım</h3><p>Fiyat ve teminat farklarını anlaşılır biçimde sunalım.</p></article>
          <article><span>03</span><div className="process-icon"><Check /></div><h3>Poliçenizi seçin</h3><p>Onayınızla poliçenizi hızlıca düzenleyip iletelim.</p></article>
        </div>
      </section>

      <section className="section soft-section faq-section">
        <div className="page-shell faq-layout">
          <div className="faq-intro">
            <span className="eyebrow">Merak edilenler</span>
            <h2>Sigorta teklifi hakkında sık sorulan sorular</h2>
            <p>Teklif ve poliçeleştirme sürecinde en çok karşılaştığımız soruların kısa cevapları.</p>
            <Link href="/iletisim" className="text-link">Başka bir sorunuz mu var? <ArrowRight size={17} /></Link>
          </div>
          <div className="faq-list">
            {homeFaqs.map((item, index) => (
              <details key={item.question} open={index === 0}>
                <summary>{item.question}<span aria-hidden="true">+</span></summary>
                <p>{item.answer}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="page-shell cta-section">
        <div>
          <span className="cta-icon"><ShieldCheck size={28} /></span>
          <div><span className="eyebrow eyebrow-light">Hazırsanız başlayalım</span><h2>Doğru güvenceyi birlikte bulalım.</h2><p>Formu doldurun, danışmanımız teklifleri sizin için hazırlasın.</p></div>
        </div>
        <Link href="/teklif" className="button button-light button-large">Teklif Al <ArrowRight size={19} /></Link>
      </section>
    </main>
  );
}