import type { Metadata } from "next";
import Link from "next/link";
import { AlertTriangle, ArrowRight, Camera, CarFront, CheckCircle2, FileText, Headphones, Home, PhoneCall } from "lucide-react";
import { createPageMetadata } from "@/lib/seo";

export const metadata: Metadata = createPageMetadata({
  title: "Hasar Anında Yapılması Gerekenler",
  description:
    "Araç, konut, işyeri, sağlık ve seyahat hasarlarında izlemeniz gereken adımları ve sık istenen belgeleri öğrenin; hasar desteği alın.",
  path: "/hasar",
  keywords: ["hasar ihbarı", "sigorta hasar dosyası", "kaza sonrası yapılması gerekenler", "hasar evrakları"],
});

export default function ClaimsPage() {
  return (
    <main>
      <section className="subpage-hero claims-hero">
        <div className="page-shell claims-hero-grid">
          <div>
            <span className="eyebrow">Hasar anında</span>
            <h1>Sakin kalın. Şimdi ne yapacağınızı birlikte netleştirelim.</h1>
            <p>Önce can güvenliğinizi sağlayın, sonra aşağıdaki adımları izleyin. İhtiyaç duyduğunuz her noktada bizi arayabilirsiniz.</p>
            <div className="hero-actions"><a href="tel:+902125554433" className="button button-large"><PhoneCall size={18} /> Hasar Destek Hattı</a><a href="tel:112" className="button button-ghost button-large">Acil Durum: 112</a></div>
          </div>
          <div className="emergency-card"><AlertTriangle size={28} /><div><strong>Önce güvenlik</strong><p>Yaralanma, yangın veya devam eden bir tehlike varsa güvenli alana geçin ve 112’yi arayın.</p></div></div>
        </div>
      </section>

      <section className="section page-shell">
        <div className="section-heading centered-heading"><span className="eyebrow">Adım adım</span><h2>Hasar sürecinde yapmanız gerekenler</h2></div>
        <div className="claim-type-grid">
          <article>
            <span className="claim-type-icon"><CarFront /></span><h3>Araç hasarı</h3>
            <ol><li><span>1</span>Güvenli bir konuma geçin, gerekiyorsa 112’yi arayın.</li><li><span>2</span>Araçların konumunu ve hasarı farklı açılardan fotoğraflayın.</li><li><span>3</span>Kaza tespit tutanağını eksiksiz doldurun.</li><li><span>4</span>Ruhsat, ehliyet, poliçe ve tutanakla bize ulaşın.</li></ol>
          </article>
          <article>
            <span className="claim-type-icon"><Home /></span><h3>Konut / işyeri hasarı</h3>
            <ol><li><span>1</span>Zararı büyütecek su, elektrik veya gaz kaynağını güvenle kapatın.</li><li><span>2</span>Hasarlı alanı ve sebebini gösteren fotoğraf / video çekin.</li><li><span>3</span>Eksper incelemesinden önce zorunlu olmayan onarıma başlamayın.</li><li><span>4</span>Poliçe ve tahmini hasar bilgisiyle bizi arayın.</li></ol>
          </article>
          <article>
            <span className="claim-type-icon"><Headphones /></span><h3>Sağlık / seyahat</h3>
            <ol><li><span>1</span>Acil durumda en yakın sağlık kuruluşuna başvurun.</li><li><span>2</span>Mümkünse provizyon hattını tedavi öncesi arayın.</li><li><span>3</span>Rapor, reçete, fatura ve ödeme belgelerini saklayın.</li><li><span>4</span>Poliçe numaranızla masraf sürecini bildirin.</li></ol>
          </article>
        </div>
      </section>

      <section className="section soft-section">
        <div className="page-shell claims-docs-grid">
          <div><span className="eyebrow">Dosyanızı hazırlayın</span><h2>Sık istenen belgeler</h2><p>Hasarın türüne göre ek belge istenebilir; aşağıdakiler çoğu başvuru için iyi bir başlangıçtır.</p></div>
          <div className="claims-doc-list">
            <span><FileText /><strong>Poliçe numarası</strong></span><span><Camera /><strong>Hasar fotoğrafları</strong></span><span><FileText /><strong>Tutanak / resmi rapor</strong></span><span><CheckCircle2 /><strong>Kimlik ve iletişim bilgileri</strong></span>
          </div>
        </div>
      </section>

      <section className="page-shell cta-section simple-cta">
        <div><div><span className="eyebrow eyebrow-light">Emin olamadınız mı?</span><h2>Hasar danışmanımızla hemen görüşün.</h2></div></div>
        <a href="tel:+902125554433" className="button button-light button-large">0212 555 44 33 <ArrowRight size={19} /></a>
      </section>
    </main>
  );
}