import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight, BadgeCheck, HeartHandshake, Scale, ShieldCheck, Sparkles } from "lucide-react";
import { createPageMetadata } from "@/lib/seo";

export const metadata: Metadata = createPageMetadata({
  title: "Hakkımızda",
  description:
    "Güvence Sigorta'nın şeffaf, sade ve ihtiyaç odaklı sigorta danışmanlığı yaklaşımını; teklif, yenileme ve hasar desteği anlayışını tanıyın.",
  path: "/hakkimizda",
  keywords: ["Güvence Sigorta", "sigorta danışmanlığı", "sigorta acentesi hakkında"],
});

export default function AboutPage() {
  return (
    <main>
      <section className="subpage-hero about-hero">
        <div className="page-shell narrow-hero">
          <span className="eyebrow">Hakkımızda</span>
          <h1>Sigortayı daha anlaşılır ve daha insani hale getiriyoruz.</h1>
          <p>Güvence Sigorta; ihtiyaç anında ulaşılabilen, teminatları açıkça anlatan ve kararınızı kolaylaştıran bir danışmanlık anlayışıyla çalışır.</p>
        </div>
      </section>

      <section className="section page-shell story-grid">
        <div className="story-visual">
          <div className="story-shield"><ShieldCheck size={64} strokeWidth={1.4} /></div>
          <div className="story-float story-float-one"><BadgeCheck size={20} /><span><strong>Doğru kapsam</strong><small>İhtiyaca özel öneri</small></span></div>
          <div className="story-float story-float-two"><HeartHandshake size={20} /><span><strong>Gerçek destek</strong><small>Hasardan yenilemeye</small></span></div>
        </div>
        <div className="story-copy">
          <span className="eyebrow">Bizim yaklaşımımız</span>
          <h2>Önce ihtiyacı dinler, sonra poliçeyi konuşuruz.</h2>
          <p>En ucuz teklif her zaman en doğru teklif değildir. Bütçenizi, riskinizi ve beklentinizi birlikte değerlendirir; eksik ya da gereksiz teminatlara karşı sizi açıkça bilgilendiririz.</p>
          <p>Poliçeyi düzenlediğimiz gün ilişki bitmez. Yenileme zamanı geldiğinde hatırlatır, değişen ihtiyaçlarınızı kontrol eder ve hasar anında süreci adım adım takip ederiz.</p>
          <Link href="/iletisim" className="text-link">Bizimle tanışın <ArrowRight size={17} /></Link>
        </div>
      </section>

      <section className="section soft-section values-section">
        <div className="page-shell">
          <div className="section-heading centered-heading"><span className="eyebrow">Değerlerimiz</span><h2>Her poliçede aynı üç söz</h2></div>
          <div className="values-grid">
            <article><span><Scale /></span><h3>Şeffaflık</h3><p>Teminatı, muafiyeti ve istisnayı saklamadan; anlaşılır bir dille anlatırız.</p></article>
            <article><span><Sparkles /></span><h3>Sadelik</h3><p>Gereksiz karmaşayı ortadan kaldırır, karar vermeniz gereken noktaları netleştiririz.</p></article>
            <article><span><HeartHandshake /></span><h3>Sorumluluk</h3><p>Tekliften hasar sonucuna kadar üzerimize düşen takibi dikkatle sürdürürüz.</p></article>
          </div>
        </div>
      </section>

      <section className="page-shell cta-section simple-cta">
        <div><div><span className="eyebrow eyebrow-light">Güvenle başlayın</span><h2>Sizin için doğru poliçeyi konuşalım.</h2></div></div>
        <Link href="/teklif" className="button button-light button-large">Teklif Al <ArrowRight size={19} /></Link>
      </section>
    </main>
  );
}