// src/pages/Index.tsx
import React, { useEffect, lazy, Suspense } from "react";
import BreadcrumbsSchema from "@/seo/BreadcrumbsSchema";
import ServicesSchema from "@/seo/ServicesSchema";
import OrganizationSchema from "@/seo/OrganizationSchema";
import LocalBusinessSchema from "@/seo/LocalBusinessSchema";
import ProductSchema from "@/seo/ProductSchema";
import FAQSchema from "@/seo/FAQSchema";
import SEO from "@/seo/SEO";

import Header from "../components/Header";
import Hero from "../components/Hero";
import HomeSchemas from "@/seo/HomeSchemas";

// Lazy load heavy components for better performance
const Advantages = lazy(() => import("../components/Advantages"));
const About = lazy(() => import("../components/About"));
const Services = lazy(() => import("../components/Services"));
const Partnership = lazy(() => import("../components/Partnership"));
const Contact = lazy(() => import("../components/Contact"));
const Footer = lazy(() => import("../components/Footer"));
const FAQ = lazy(() => import("../components/FAQ"));
const CompanyInfo = lazy(() => import("../components/CompanyInfo"));
const MortgageCalculator = lazy(() => import("../components/MortgageCalculator"));

const SITE = "https://ipotekago.ru";

const metaBySection = {
  "advantages": {
    title: "Преимущества | IpotekaGo",
    description: "Почему выбирают IpotekaGo: экспресс-одобрение за 24 часа, минимальные ставки от 0,1% годовых, доступ к 20+ ведущим банкам России. Персональный менеджер и полное сопровождение сделки без скрытых комиссий.",
    url: `${SITE}/advantages`,
    h1Title: "Преимущества работы с IpotekaGo",
    h1Subtitle: "Одобрение за 1 день, ставки от 0,1%, работа с 20+ банками и полное сопровождение сделки.",
  },
  "services": {
    title: "Услуги ипотечного брокера | IpotekaGo",
    description: "Полный спектр услуг ипотечного брокера в Краснодарском крае: от первичной консультации до получения ключей. Подбор оптимальной программы, подготовка документов, сопровождение сделки. Работаем с 20+ банками.",
    url: `${SITE}/services`,
    h1Title: "Услуги ипотечного брокера",
    h1Subtitle: "Подбор программы, подготовка документов, сопровождение до выдачи — под ключ.",
  },
  "mortgage-calculator": {
    title: "Ипотечный калькулятор онлайн | IpotekaGo",
    description: "Бесплатный ипотечный калькулятор для точного расчёта платежей. Рассчитайте ежемесячный платёж, общую переплату и график платежей. Учитывает все банковские программы и актуальные ставки 2024 года.",
    url: `${SITE}/mortgage-calculator`,
    h1Title: "Ипотечный калькулятор онлайн",
    h1Subtitle: "Рассчитайте платёж, переплату и график платежей без регистрации.",
  },
  "partnership": {
    title: "Партнёрство | IpotekaGo",
    description: "Выгодное партнёрство для риэлторов и застройщиков в Краснодарском крае. Вознаграждение до 1% от суммы сделки, быстрые выплаты в течение 3 дней, персональная поддержка и маркетинговые материалы.",
    url: `${SITE}/partnership`,
    h1Title: "Партнёрство для риэлторов и застройщиков",
    h1Subtitle: "Вознаграждение до 1% от суммы сделки и быстрые выплаты.",
  },
  "contact": {
    title: "Контакты | IpotekaGo",
    description: "Свяжитесь с экспертами IpotekaGo для консультации по ипотеке. WhatsApp, телефон, форма обратной связи. Бесплатная консультация, работаем в Краснодарском крае и Адыгее. Ответим в течение 15 минут.",
    url: `${SITE}/contact`,
    h1Title: "Контакты IpotekaGo",
    h1Subtitle: "Свяжитесь с нами любым удобным способом. Консультация — бесплатно.",
  },
  "home": {
    title: "IpotekaGo — Ипотека онлайн без лишних документов | Краснодарский край",
    description: "Профессиональная помощь в оформлении ипотеки в Краснодарском крае и Адыгее. Онлайн-консультации, подбор банка, сопровождение сделки. Более 5 лет опыта. Бесплатная консультация.",
    url: `${SITE}/`,
    h1Title: null, // Используем дефолтный заголовок
    h1Subtitle: null, // Используем дефолтный подзаголовок
  }
};

export default function Index({ scrollTo }: { scrollTo?: string }) {
  const meta = metaBySection[scrollTo ?? "home"];
  
  const crumbs = [
    { name: "Главная", url: SITE + "/" },
    { name: "Услуги", url: SITE + "/services" },
    { name: "Контакты", url: SITE + "/contact" },
  ];

  const serviceList = [
    { name: "Первичная консультация", description: "30-минутная консультация: расчеты, цели, план действий." },
    { name: "Подбор банка и программы", description: "Сравниваем банки и программы, подбираем лучшие условия." },
    { name: "Подготовка и проверка документов", description: "Собираем и проверяем пакет документов для банка." },
    { name: "Одобрение ипотеки", description: "Подача заявки, сопровождение до одобрения." },
    { name: "Сделка и сопровождение", description: "Сопровождение на сделке, проверка договоров и расчетов." },
    { name: "Рефинансирование", description: "Снижение ставки и пересчет условий действующей ипотеки." },
  ];

  const productList = [
    {
      name: "Консультация по ипотеке",
      description: "Профессиональная консультация по выбору ипотечной программы",
      url: "/services",
      image: "https://ipotekago.ru/og-image.jpg",
      brand: "IpotekaGo",
      offers: {
        price: 0,
        priceCurrency: "RUB",
        availability: "https://schema.org/InStock",
        url: "/contact"
      }
    },
    {
      name: "Подбор ипотечной программы",
      description: "Сравнение условий банков и подбор оптимальной ипотечной программы",
      url: "/services",
      image: "https://ipotekago.ru/og-image.jpg",
      brand: "IpotekaGo",
      offers: {
        price: 0,
        priceCurrency: "RUB",
        availability: "https://schema.org/InStock",
        url: "/contact"
      }
    },
    {
      name: "Сопровождение сделки",
      description: "Полное сопровождение ипотечной сделки от подачи заявки до получения ключей",
      url: "/services",
      image: "https://ipotekago.ru/og-image.jpg",
      brand: "IpotekaGo",
      offers: {
        price: 0,
        priceCurrency: "RUB",
        availability: "https://schema.org/InStock",
        url: "/contact"
      }
    }
  ];

  // Прокрутка к секции при открытии маршрута /advantages, /services, ...
  useEffect(() => {
    if (!scrollTo) return;
    const el = document.getElementById(scrollTo);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }, [scrollTo]);

  return (
    <div className="min-h-screen">
      <SEO title={meta.title} description={meta.description} url={meta.url} />
      <HomeSchemas />
      <OrganizationSchema />
      <LocalBusinessSchema />
      <ProductSchema items={productList} />
      <FAQSchema />

      <BreadcrumbsSchema items={crumbs} />
      <ServicesSchema services={serviceList} />

      <Header />
      
      <main>
        <Hero title={meta.h1Title} subtitle={meta.h1Subtitle} />
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка...</div></div>}>
          <Advantages />
        </Suspense>
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка...</div></div>}>
          <About />
        </Suspense>
        
        <section id="services">
          <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка услуг...</div></div>}>
            <Services />
          </Suspense>
        </section>
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка калькулятора...</div></div>}>
          <MortgageCalculator />
        </Suspense>
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка...</div></div>}>
          <Partnership />
        </Suspense>
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка...</div></div>}>
          <CompanyInfo />
        </Suspense>
        
        <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка FAQ...</div></div>}>
          <FAQ />
        </Suspense>
        
        <section id="contact">
          <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка контактов...</div></div>}>
            <Contact />
          </Suspense>
        </section>
      </main>
      
      <Suspense fallback={<div className="py-20 bg-neutral-50"><div className="container mx-auto px-4 text-center">Загрузка...</div></div>}>
        <Footer />
      </Suspense>
    </div>
  );
}