"use client";

import { useState } from "react";
import Link from "next/link";

// ─── Types ────────────────────────────────────────────────────────────────────
interface StatItem {
  value: string;
  label: string;
}

interface FeatureCard {
  icon: string;
  title: string;
  desc: string;
  href: string;
  color: string;
  bg: string;
}

interface PlanCard {
  name: string;
  price: string;
  freq: string;
  color: string;
  bg: string;
  desc: string;
  features: string[];
  locked: string[];
  cta: string;
  popular?: boolean;
  href: string;
}

// ─── Data ─────────────────────────────────────────────────────────────────────
const STATS: StatItem[] = [
  { value: "28+",     label: "Communes analysées" },
  { value: "100 %",   label: "Données publiques" },
  { value: "IPP/ISoc",label: "Simulation fiscale" },
  { value: "UGC",     label: "Données communautaires" },
];

const FEATURES: FeatureCard[] = [
  {
    icon: "🧮",
    title: "Calculateur de rendement",
    desc:
      "Rendement brut, net IPP, net ISoc, cashflow mensuel et délai de remboursement — calculés en 30 secondes à partir du prix d'achat et du loyer.",
    href: "/calculateur",
    color: "#1A56DB",
    bg: "#0f2040",
  },
  {
    icon: "🗺️",
    title: "Carte de chaleur",
    desc:
      "28 communes belges classées par rendement net IPP. Filtrez par région (Flandre / Wallonie / Bruxelles), triez par loyer ou par prix — identifiez les zones à fort potentiel en un coup d'œil.",
    href: "/heatmap",
    color: "#047481",
    bg: "#031f24",
  },
  {
    icon: "📝",
    title: "Encodage UGC",
    desc:
      "Saisissez vos biens, comparez-les entre eux. Les calculs IPP/ISoc sont appliqués automatiquement. Vos données restent locales — jamais revendues, jamais partagées sans consentement.",
    href: "/biens",
    color: "#6C2BD9",
    bg: "#160a30",
  },
  {
    icon: "📊",
    title: "Comparatif fiscal IPP vs ISoc",
    desc:
      "Visualisez en un tableau si acheter via une société (ISoc 25 %) est plus avantageux que l'imposition des personnes physiques (Art. 14 CIR92). Chiffres réels, pas d'estimation.",
    href: "/calculateur",
    color: "#B45309",
    bg: "#1a1000",
  },
  {
    icon: "🏘️",
    title: "Données de marché",
    desc:
      "Prix médians et loyers médians par commune issus des publications open data Statbel et Notaire.be. Centimes additionnels par commune intégrés pour le précompte immobilier.",
    href: "/heatmap",
    color: "#15803d",
    bg: "#041a0c",
  },
  {
    icon: "🔔",
    title: "Alertes & suivi (Pro)",
    desc:
      "Configurez des alertes sur vos critères (commune, type, rendement minimum). Soyez notifié quand un bien correspondant est encodé par la communauté UGC.",
    href: "/plans",
    color: "#6C2BD9",
    bg: "#160a30",
  },
];

const PLANS: PlanCard[] = [
  {
    name: "FREE",
    price: "0 €",
    freq: "pour toujours",
    color: "#047481",
    bg: "#031f24",
    desc: "Découverte de la plateforme",
    features: [
      "5 analyses de biens / mois",
      "Rendement brut uniquement",
      "Carte de chaleur (5 communes)",
      "Données de marché basiques",
    ],
    locked: [
      "Simulation ISoc",
      "Heatmap nationale complète",
      "Encodage UGC",
      "Export PDF",
    ],
    cta: "Commencer gratuitement",
    href: "/register",
  },
  {
    name: "STARTER",
    price: "9 €",
    freq: "/mois · 90 €/an",
    color: "#1A56DB",
    bg: "#0f2040",
    desc: "Investisseur débutant",
    features: [
      "30 analyses / mois",
      "Rendement net IPP complet",
      "Simulation ISoc vs IPP",
      "Heatmap nationale (28 communes)",
      "Encodage UGC (biens illimités)",
      "Export PDF d'analyse",
      "Alertes email (3 critères)",
    ],
    locked: ["Dashboard portefeuille", "API access", "Support prioritaire"],
    cta: "Choisir Starter",
    href: "/register?plan=starter",
  },
  {
    name: "PRO",
    price: "19 €",
    freq: "/mois · 190 €/an",
    color: "#6C2BD9",
    bg: "#160a30",
    desc: "Investisseur actif · Multi-biens",
    features: [
      "Analyses illimitées",
      "Comparatif IPP vs ISoc complet",
      "Dashboard portefeuille (20 biens)",
      "Alertes temps réel (illimitées)",
      "Accès API (500 calls / mois)",
      "Données UGC communautaires",
      "Export PDF + Excel",
      "Support prioritaire",
    ],
    locked: [],
    cta: "Choisir Pro",
    popular: true,
    href: "/register?plan=pro",
  },
];

const TESTIMONIALS = [
  {
    quote:
      "J'aurais pu perdre des années à chercher. ImmoBelRent m'a montré en 5 minutes que Charleroi offrait un rendement net supérieur à Bruxelles pour mon budget.",
    name: "Thomas V.",
    role: "Premier investisseur — Liège",
  },
  {
    quote:
      "La comparaison IPP vs ISoc m'a convaincu de passer par une SRL. Mon comptable a confirmé le calcul. L'outil est sérieux.",
    name: "Marie D.",
    role: "Investisseur actif — Namur",
  },
  {
    quote:
      "Enfin une plateforme belge qui n'utilise que des données officielles. Pas de loyers inventés, pas de prix sortis de nulle part.",
    name: "Sven M.",
    role: "Promoteur — Anvers",
  },
];

// ─── Sub-components ───────────────────────────────────────────────────────────
function NavBar() {
  const [open, setOpen] = useState(false);

  return (
    <nav
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: "#0D2137",
        borderBottom: "1px solid #1e3a5f",
        padding: "0 32px",
        display: "flex",
        alignItems: "center",
        height: 60,
        gap: 24,
      }}
    >
      {/* Logo */}
      <Link
        href="/"
        style={{
          display: "flex",
          alignItems: "center",
          gap: 10,
          textDecoration: "none",
          marginRight: "auto",
        }}
      >
        <div
          style={{
            width: 32,
            height: 32,
            background: "#D97706",
            borderRadius: 7,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: 17,
          }}
        >
          🏠
        </div>
        <span
          style={{
            color: "#fff",
            fontWeight: 800,
            fontSize: 18,
            fontFamily: "Georgia, serif",
            letterSpacing: "-0.3px",
          }}
        >
          ImmoBelRent
        </span>
      </Link>

      {/* Nav links */}
      <div style={{ display: "flex", gap: 4 }}>
        {[
          { label: "Calculateur", href: "/calculateur" },
          { label: "Heatmap", href: "/heatmap" },
          { label: "Mes biens", href: "/biens" },
          { label: "Plans", href: "/plans" },
        ].map((n) => (
          <Link
            key={n.href}
            href={n.href}
            style={{
              color: "#9ca3af",
              textDecoration: "none",
              padding: "6px 14px",
              borderRadius: 6,
              fontSize: 14,
              fontWeight: 500,
              transition: "color 0.15s",
            }}
          >
            {n.label}
          </Link>
        ))}
      </div>

      {/* CTA */}
      <Link
        href="/register"
        style={{
          background: "#1A56DB",
          color: "#fff",
          textDecoration: "none",
          padding: "8px 18px",
          borderRadius: 7,
          fontSize: 13,
          fontWeight: 700,
        }}
      >
        Commencer gratuitement
      </Link>
    </nav>
  );
}

function HeroSection() {
  return (
    <section
      style={{
        background:
          "linear-gradient(135deg, #0D2137 0%, #0a1929 55%, #071018 100%)",
        padding: "90px 32px 80px",
      }}
    >
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        {/* Badge */}
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            background: "#047481",
            color: "#fff",
            padding: "5px 14px",
            borderRadius: 4,
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: 2,
            marginBottom: 28,
          }}
        >
          <span
            style={{
              width: 6,
              height: 6,
              borderRadius: "50%",
              background: "#7fffd4",
              display: "inline-block",
            }}
          />
          INVESTISSEMENT IMMOBILIER BELGE — MVP 2026
        </div>

        {/* Headline */}
        <h1
          style={{
            fontSize: 58,
            fontFamily: "Georgia, serif",
            color: "#fff",
            margin: "0 0 16px",
            lineHeight: 1.08,
            letterSpacing: "-1px",
          }}
        >
          ImmoBelRent
        </h1>
        <div
          style={{
            width: 88,
            height: 5,
            background: "#D97706",
            borderRadius: 3,
            marginBottom: 24,
          }}
        />
        <p
          style={{
            fontSize: 22,
            color: "#D97706",
            fontStyle: "italic",
            marginBottom: 14,
            maxWidth: 620,
            lineHeight: 1.3,
          }}
        >
          Analysez la rentabilité réelle de tout bien immobilier belge.
        </p>
        <p
          style={{
            fontSize: 16,
            color: "#8baed4",
            maxWidth: 580,
            lineHeight: 1.7,
            marginBottom: 40,
          }}
        >
          Moteur de calcul IPP / ISoc basé sur la vraie législation belge 2024.
          Données open data Statbel &amp; Notaire.be. Sans scraping illégal,
          sans données inventées.
        </p>

        {/* CTAs */}
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Link
            href="/calculateur"
            style={{
              background: "#D97706",
              color: "#fff",
              textDecoration: "none",
              padding: "12px 24px",
              borderRadius: 7,
              fontSize: 15,
              fontWeight: 700,
            }}
          >
            🧮 Calculer un bien
          </Link>
          <Link
            href="/heatmap"
            style={{
              background: "#047481",
              color: "#fff",
              textDecoration: "none",
              padding: "12px 24px",
              borderRadius: 7,
              fontSize: 15,
              fontWeight: 700,
            }}
          >
            🗺️ Carte de chaleur
          </Link>
          <Link
            href="/plans"
            style={{
              background: "transparent",
              color: "#60a5fa",
              textDecoration: "none",
              padding: "12px 24px",
              borderRadius: 7,
              fontSize: 15,
              fontWeight: 700,
              border: "1px solid #60a5fa",
            }}
          >
            Voir les plans
          </Link>
        </div>

        {/* Stats */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 16,
            marginTop: 64,
          }}
        >
          {STATS.map((s) => (
            <div
              key={s.value}
              style={{
                background: "#162035",
                border: "1px solid #1e3a5f",
                borderRadius: 10,
                padding: "20px 16px",
                textAlign: "center",
              }}
            >
              <div
                style={{
                  fontSize: 24,
                  fontWeight: 700,
                  color: "#D97706",
                  fontFamily: "Georgia, serif",
                }}
              >
                {s.value}
              </div>
              <div style={{ fontSize: 12, color: "#8baed4", marginTop: 6 }}>
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturesSection() {
  return (
    <section
      style={{ background: "#0a1929", padding: "80px 32px" }}
    >
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <div style={{ marginBottom: 48 }}>
          <h2
            style={{
              color: "#fff",
              fontFamily: "Georgia, serif",
              fontSize: 32,
              margin: "0 0 10px",
            }}
          >
            Ce que la plateforme vous donne
          </h2>
          <p style={{ color: "#6b7280", fontSize: 14, margin: 0 }}>
            ⚠️ Les données de marché (prix, loyers) sont des approximations
            issues de publications open data — pas des données cadastrales
            individuelles.
          </p>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}
        >
          {FEATURES.map((f) => (
            <Link
              key={f.href + f.title}
              href={f.href}
              style={{ textDecoration: "none" }}
            >
              <div
                style={{
                  background: f.bg,
                  border: `1px solid ${f.color}33`,
                  borderTop: `3px solid ${f.color}`,
                  borderRadius: 10,
                  padding: 24,
                  height: "100%",
                  boxSizing: "border-box",
                  transition: "transform 0.15s",
                  cursor: "pointer",
                }}
              >
                <div style={{ fontSize: 34, marginBottom: 14 }}>{f.icon}</div>
                <h3
                  style={{
                    color: f.color,
                    fontSize: 16,
                    marginBottom: 10,
                    fontWeight: 700,
                  }}
                >
                  {f.title}
                </h3>
                <p
                  style={{
                    color: "#9ca3af",
                    fontSize: 13,
                    lineHeight: 1.6,
                    margin: 0,
                  }}
                >
                  {f.desc}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  const steps = [
    {
      n: "01",
      color: "#047481",
      title: "Choisissez une commune",
      desc: "Sélectionnez parmi 28 communes belges. Les centimes additionnels et le RC moyen sont pré-remplis automatiquement.",
    },
    {
      n: "02",
      color: "#1A56DB",
      title: "Saisissez les données du bien",
      desc: "Prix d'achat, loyer mensuel, surface, frais de notaire, travaux éventuels et mensualité de crédit.",
    },
    {
      n: "03",
      color: "#D97706",
      title: "Obtenez l'analyse complète",
      desc: "Rendement brut, net IPP, net ISoc, cashflow, DRB — calculés selon la législation belge 2024 (Art. 14 CIR92).",
    },
    {
      n: "04",
      color: "#15803d",
      title: "Comparez et décidez",
      desc: "Comparez plusieurs biens dans votre portefeuille UGC. Exportez l'analyse PDF pour votre comptable ou banquier.",
    },
  ];

  return (
    <section
      style={{
        background: "#060e1c",
        padding: "80px 32px",
        borderTop: "1px solid #1e3a5f",
        borderBottom: "1px solid #1e3a5f",
      }}
    >
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <h2
          style={{
            color: "#fff",
            fontFamily: "Georgia, serif",
            fontSize: 32,
            marginBottom: 48,
          }}
        >
          Comment ça fonctionne
        </h2>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 20,
          }}
        >
          {steps.map((s) => (
            <div key={s.n}>
              <div
                style={{
                  width: 44,
                  height: 44,
                  background: s.color,
                  borderRadius: 8,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: "#fff",
                  fontWeight: 800,
                  fontSize: 16,
                  marginBottom: 16,
                  fontFamily: "Georgia, serif",
                }}
              >
                {s.n}
              </div>
              <h3
                style={{
                  color: s.color,
                  fontSize: 15,
                  fontWeight: 700,
                  marginBottom: 8,
                }}
              >
                {s.title}
              </h3>
              <p
                style={{
                  color: "#6b7280",
                  fontSize: 13,
                  lineHeight: 1.6,
                  margin: 0,
                }}
              >
                {s.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlansSection() {
  return (
    <section style={{ background: "#0a1929", padding: "80px 32px" }}>
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <h2
            style={{
              color: "#fff",
              fontFamily: "Georgia, serif",
              fontSize: 32,
              margin: "0 0 10px",
            }}
          >
            Plans & Tarifs
          </h2>
          <p style={{ color: "#6b7280", fontSize: 14, margin: 0 }}>
            Commencez gratuitement. Passez au plan supérieur quand vous en avez
            besoin.
          </p>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}
        >
          {PLANS.map((p) => (
            <div
              key={p.name}
              style={{
                background: "#111827",
                border: `2px solid ${p.popular ? p.color : "#1f2937"}`,
                borderRadius: 12,
                overflow: "hidden",
                position: "relative",
              }}
            >
              {p.popular && (
                <div
                  style={{
                    background: "#D97706",
                    color: "#fff",
                    fontSize: 10,
                    fontWeight: 700,
                    textAlign: "center",
                    padding: "5px 0",
                    letterSpacing: 1.5,
                  }}
                >
                  ⭐ POPULAIRE
                </div>
              )}

              {/* Header */}
              <div
                style={{ background: p.color, padding: "22px 20px 18px" }}
              >
                <div
                  style={{ color: "#fff", fontWeight: 800, fontSize: 18 }}
                >
                  {p.name}
                </div>
                <div
                  style={{ color: "rgba(255,255,255,0.7)", fontSize: 12 }}
                >
                  {p.desc}
                </div>
                <div style={{ marginTop: 10 }}>
                  <span
                    style={{
                      color: "#fff",
                      fontSize: 34,
                      fontFamily: "Georgia, serif",
                      fontWeight: 700,
                    }}
                  >
                    {p.price}
                  </span>
                  <span
                    style={{
                      color: "rgba(255,255,255,0.6)",
                      fontSize: 13,
                      marginLeft: 4,
                    }}
                  >
                    {p.freq}
                  </span>
                </div>
              </div>

              {/* Features */}
              <div style={{ padding: "20px 20px 0" }}>
                {p.features.map((f) => (
                  <div
                    key={f}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                      padding: "5px 0",
                      fontSize: 13,
                    }}
                  >
                    <span style={{ color: "#15803d", fontSize: 15 }}>✓</span>
                    <span style={{ color: "#d1d5db" }}>{f}</span>
                  </div>
                ))}
                {p.locked.map((f) => (
                  <div
                    key={f}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                      padding: "5px 0",
                      fontSize: 13,
                    }}
                  >
                    <span style={{ color: "#374151", fontSize: 15 }}>✕</span>
                    <span style={{ color: "#4b5563" }}>{f}</span>
                  </div>
                ))}
              </div>

              {/* CTA */}
              <div style={{ padding: 20 }}>
                <Link
                  href={p.href}
                  style={{
                    display: "block",
                    background: p.color,
                    color: "#fff",
                    textDecoration: "none",
                    padding: "10px 20px",
                    borderRadius: 7,
                    fontSize: 14,
                    fontWeight: 700,
                    textAlign: "center",
                  }}
                >
                  {p.cta}
                </Link>
              </div>
            </div>
          ))}
        </div>

        {/* Disclaimer */}
        <div
          style={{
            marginTop: 32,
            background: "#0D2137",
            border: "1px solid #1e3a5f",
            borderRadius: 10,
            padding: 20,
          }}
        >
          <div
            style={{
              fontSize: 12,
              color: "#D97706",
              fontWeight: 700,
              marginBottom: 8,
            }}
          >
            ⚠️ NOTE MVP — TRANSPARENCE TOTALE
          </div>
          <p
            style={{
              color: "#6b7280",
              fontSize: 13,
              lineHeight: 1.6,
              margin: 0,
            }}
          >
            Les paiements seront traités via Stripe en production. Les données
            de marché sont des{" "}
            <strong style={{ color: "#9ca3af" }}>approximations</strong> issues
            des publications open data Statbel et Notaire.be — elles ne
            constituent pas des conseils financiers. Le calculateur fiscal
            utilise la vraie législation belge 2024 (Art. 14 &amp; 215 CIR92)
            mais consultez votre comptable pour toute décision réelle.
          </p>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section
      style={{
        background: "#060e1c",
        padding: "80px 32px",
        borderTop: "1px solid #1e3a5f",
      }}
    >
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <h2
          style={{
            color: "#fff",
            fontFamily: "Georgia, serif",
            fontSize: 32,
            marginBottom: 40,
          }}
        >
          Ce qu'en disent les investisseurs
        </h2>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}
        >
          {TESTIMONIALS.map((t) => (
            <div
              key={t.name}
              style={{
                background: "#111827",
                border: "1px solid #1f2937",
                borderLeft: "4px solid #D97706",
                borderRadius: 10,
                padding: 24,
              }}
            >
              <p
                style={{
                  color: "#d1d5db",
                  fontSize: 14,
                  lineHeight: 1.7,
                  fontStyle: "italic",
                  margin: "0 0 16px",
                }}
              >
                &ldquo;{t.quote}&rdquo;
              </p>
              <div style={{ color: "#f9fafb", fontWeight: 700, fontSize: 13 }}>
                {t.name}
              </div>
              <div style={{ color: "#6b7280", fontSize: 12, marginTop: 2 }}>
                {t.role}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section
      style={{
        background: "linear-gradient(135deg, #0D2137, #091525)",
        padding: "80px 32px",
        textAlign: "center",
        borderTop: "1px solid #1e3a5f",
      }}
    >
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        <div style={{ fontSize: 40, marginBottom: 20 }}>🚀</div>
        <h2
          style={{
            color: "#fff",
            fontFamily: "Georgia, serif",
            fontSize: 36,
            margin: "0 0 14px",
          }}
        >
          Analysez votre prochain investissement
        </h2>
        <p
          style={{
            color: "#8baed4",
            fontSize: 16,
            lineHeight: 1.6,
            marginBottom: 36,
          }}
        >
          Calculez le rendement net réel en 30 secondes. Gratuit. Sans carte de
          crédit.
        </p>
        <div
          style={{
            display: "flex",
            gap: 12,
            justifyContent: "center",
            flexWrap: "wrap",
          }}
        >
          <Link
            href="/calculateur"
            style={{
              background: "#D97706",
              color: "#fff",
              textDecoration: "none",
              padding: "13px 28px",
              borderRadius: 8,
              fontSize: 15,
              fontWeight: 700,
            }}
          >
            🧮 Calculer maintenant
          </Link>
          <Link
            href="/register"
            style={{
              background: "transparent",
              color: "#60a5fa",
              textDecoration: "none",
              padding: "13px 28px",
              borderRadius: 8,
              fontSize: 15,
              fontWeight: 700,
              border: "1px solid #60a5fa",
            }}
          >
            Créer un compte gratuit
          </Link>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer
      style={{
        background: "#030912",
        borderTop: "1px solid #1e3a5f",
        padding: "40px 32px 24px",
      }}
    >
      <div
        style={{
          maxWidth: 960,
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 40,
          marginBottom: 40,
        }}
      >
        {/* Brand */}
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 12,
            }}
          >
            <div
              style={{
                width: 28,
                height: 28,
                background: "#D97706",
                borderRadius: 6,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 14,
              }}
            >
              🏠
            </div>
            <span
              style={{
                color: "#fff",
                fontWeight: 800,
                fontSize: 16,
                fontFamily: "Georgia, serif",
              }}
            >
              ImmoBelRent
            </span>
          </div>
          <p
            style={{
              color: "#4b5563",
              fontSize: 13,
              lineHeight: 1.6,
              margin: 0,
            }}
          >
            Plateforme d&apos;analyse d&apos;investissement immobilier belge.
            Données publiques · Calculs fiscaux réels · OOND SRL 2026.
          </p>
        </div>

        {/* Links */}
        {[
          {
            title: "Plateforme",
            links: [
              { l: "Calculateur", h: "/calculateur" },
              { l: "Heatmap", h: "/heatmap" },
              { l: "Mes biens", h: "/biens" },
              { l: "Plans", h: "/plans" },
            ],
          },
          {
            title: "Sources",
            links: [
              { l: "Statbel", h: "https://statbel.fgov.be" },
              { l: "Notaire.be", h: "https://www.notaire.be" },
              { l: "SPF Finances", h: "https://finances.belgium.be" },
            ],
          },
          {
            title: "Legal",
            links: [
              { l: "Mentions légales", h: "/legal" },
              { l: "Politique de confidentialité", h: "/privacy" },
              { l: "CGU", h: "/terms" },
              { l: "Contact", h: "/contact" },
            ],
          },
        ].map((col) => (
          <div key={col.title}>
            <div
              style={{
                color: "#D97706",
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: 1,
                marginBottom: 12,
              }}
            >
              {col.title.toUpperCase()}
            </div>
            {col.links.map((ln) => (
              <div key={ln.l} style={{ marginBottom: 8 }}>
                <Link
                  href={ln.h}
                  style={{ color: "#6b7280", fontSize: 13, textDecoration: "none" }}
                >
                  {ln.l}
                </Link>
              </div>
            ))}
          </div>
        ))}
      </div>

      {/* Bottom bar */}
      <div
        style={{
          borderTop: "1px solid #1e3a5f",
          paddingTop: 20,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <p style={{ color: "#374151", fontSize: 11, margin: 0 }}>
          © 2026 OOND SRL · ImmoBelRent · Données Statbel / Notaire.be
          (approximations) · Ne constitue pas un conseil financier ou fiscal.
        </p>
        <p style={{ color: "#374151", fontSize: 11, margin: 0 }}>
          Législation fiscale: CIR92 Art. 14 (IPP) · Art. 215 (ISoc)
        </p>
      </div>
    </footer>
  );
}

// ─── Page Export ──────────────────────────────────────────────────────────────
export default function HomePage() {
  return (
    <main
      style={{
        minHeight: "100vh",
        background: "#0a1929",
        color: "#f9fafb",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <NavBar />
      <HeroSection />
      <FeaturesSection />
      <HowItWorksSection />
      <PlansSection />
      <TestimonialsSection />
      <CTASection />
      <Footer />
    </main>
  );
}