import Link from 'next/link';
import { BASE, bulunma, type BolgeStat } from '@/lib/bolge';
import { PLANS, tl } from '@/lib/plans';

/** Bölge sayfalarının ortak parçaları (sunucu bileşenleri) */
export function BolgeHero({ crumbs, title, lead, children }: { crumbs: [string, string][]; title: string; lead: string; children?: React.ReactNode }) {
  return (
    <section className="relative" style={{ backgroundImage: 'url(/kareler/gokova-z18.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}>
      <div className="bg-black/45 px-3 pb-6 pt-28 md:px-6 md:pb-8 md:pt-32">
        <nav aria-label="Konum" className="mb-2 flex flex-wrap gap-1 text-[12.5px] font-semibold text-white">
          {crumbs.map(([h, l], i) => <span key={h} className="flex items-center gap-1">{i > 0 && <span className="text-white/60">›</span>}<Link href={h} className="bg-ink/80 px-1.5 py-0.5 hover:bg-ink">{l}</Link></span>)}
        </nav>
        <div className="max-w-[760px] bg-ink p-5 text-white md:p-7">
          <h1 className="h-display text-[32px] md:text-[50px]">{title}</h1>
          <p className="mt-3 max-w-[620px] text-[15.5px] leading-relaxed text-white/85">{lead}</p>
        </div>
        {children && <div className="mt-3">{children}</div>}
      </div>
    </section>
  );
}

export function StatStrip({ yer, s }: { yer: string; s?: BolgeStat }) {
  if (!s || !s.videos) return null;
  return (
    <div className="grid grid-cols-3 border-l border-t border-ink/15 bg-white">
      <div className="cell border-b border-r border-ink/15 py-3"><span className="tag">{bulunma(yer)} üretilen video</span><span className="num text-[19px] font-extrabold md:text-[26px]">{s.videos.toLocaleString('tr-TR')}</span></div>
      <div className="cell border-b border-r border-ink/15 py-3"><span className="tag">Ortalama parsel</span><span className="num text-[19px] font-extrabold md:text-[26px]">{s.avgArea ? `${s.avgArea.toLocaleString('tr-TR')} m²` : '—'}</span></div>
      <div className="cell border-b border-r border-ink/15 py-3"><span className="tag">En sık nitelik</span><span className="text-[17px] font-extrabold md:text-[22px]">{s.topNitelik || '—'}</span></div>
    </div>
  );
}

/** Örnek video + ne anlatılır */
export function SampleBlock({ yer }: { yer: string }) {
  return (
    <section className="grid gap-5 bg-white p-4 md:grid-cols-[200px_1fr] md:p-6">
      <video src="/ornekler/gece.mp4" poster="/ornekler/gece.jpg" controls playsInline preload="none" className="aspect-[9/16] w-full max-w-[200px] border-2 border-ink bg-ink object-cover" />
      <div>
        <div className="tag">Videoda neler var</div>
        <h2 className="mt-1 text-[22px] font-extrabold">{bulunma(yer)} parselinizin videosu nasıl olur?</h2>
        <ul className="mt-3 space-y-1.5 text-[14.5px]">
          <li>· Tapu Kadastro (TKGM) kaydındaki sınır, uydu görüntüsü üzerinde çizilir; yüzölçümü ve ada/parsel ekranda.</li>
          <li>· En yakın okul, market, eczane ve sahile yol üzerinden mesafeler; ilçe merkezi ve havalimanına araçla süreler.</li>
          <li>· Türkçe seslendirme, kelime kelime altyazı, 1080×1920 dikey MP4.</li>
          <li>· Kapanış kartında ofis logonuz, adınız ve telefonunuz.</li>
        </ul>
        <p className="mt-3 text-[13px] text-ink-soft">Soldaki video Muğla, Ula, Gökova’daki örnek bir parselden. <Link href="/ornekler" className="font-semibold underline underline-offset-2">Altı şablonu izleyin</Link></p>
      </div>
    </section>
  );
}

export function BolgeFaq({ yer }: { yer: string }) {
  const qa: [string, string][] = [
    [`${bulunma(yer)} her parsel için video hazırlanabilir mi?`, 'Tapu Kadastro kaydında sınırı bulunan her ada ve parsel için hazırlanır: arsa, tarla, bağ-bahçe, üzerinde ev bulunan parsel, daire ya da hisse. Sipariş verirken ne sattığınızı seçersiniz; video satılanı buna göre anlatır.'],
    ['Ne kadar sürede hazır olur?', 'Ödeme onayından sonra üretime girer; video hazır olduğunda panelinize düşer ve e-postayla haber verilir. Üretimi panelde adım adım izleyebilirsiniz.'],
    ['Fiyatı ne kadar?', `Tek parsel ${tl(PLANS[0].price)}${PLANS[0].listPrice && PLANS[0].listPrice > PLANS[0].price ? ` (lansmana özel; liste fiyatı ${tl(PLANS[0].listPrice)})` : ''}; ${PLANS.slice(1).map((p) => `${p.credits} videoluk pakette video başı ${tl(Math.round(p.price / p.credits))}`).join(', ')}. Krediler süresizdir, üretim tamamlanmazsa kredi iade edilir.`],
  ];
  return (
    <section className="bg-white p-4 md:p-6">
      <h2 className="text-[22px] font-extrabold">Sık sorulanlar</h2>
      <div className="mt-3 divide-y divide-ink/10 border-y border-ink/10">
        {qa.map(([q, a]) => <details key={q} className="py-3"><summary className="cursor-pointer text-[15px] font-semibold">{q}</summary><p className="mt-1.5 text-[14px] leading-relaxed text-ink-soft">{a}</p></details>)}
      </div>
    </section>
  );
}

/** Arama motorları için konum zinciri (BreadcrumbList) */
export function CrumbLd({ crumbs }: { crumbs: [string, string][] }) {
  const base = process.env.APP_URL || '';
  const ld = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: crumbs.map(([h, l], i) => ({ '@type': 'ListItem', position: i + 1, name: l, item: base + h })) };
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld).replace(/</g, '\\u003c') }} />;
}
export const crumbBase: [string, string][] = [['/', 'Ana sayfa'], [BASE, 'Arsa videosu']];