import { Helmet } from "react-helmet-async";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useMarketingCta } from "../../hooks/useMarketingCta";
import {
  ArrowRight,
  Globe,
  Building2,
  MapPin,
  CheckCircle,
  Search,
  FileText,
  Shield,
} from "lucide-react";

// Jurisdiction data organized by region
const JURISDICTIONS = {
  "North America": [
    { name: "United States", code: "US", registries: ["SEC EDGAR", "State SOS", "UCC Filings", "Federal Courts"] },
    { name: "Canada", code: "CA", registries: ["Corporations Canada", "Provincial Registries", "SEDAR+"] },
    { name: "Mexico", code: "MX", registries: ["SAT Registry", "Registro Público de Comercio"] },
  ],
  "Europe": [
    { name: "United Kingdom", code: "GB", registries: ["Companies House", "FCA Register", "Land Registry"] },
    { name: "Germany", code: "DE", registries: ["Handelsregister", "BaFin", "Bundesanzeiger"] },
    { name: "France", code: "FR", registries: ["Infogreffe", "SIRENE", "AMF"] },
    { name: "Netherlands", code: "NL", registries: ["KvK", "AFM", "DNB"] },
    { name: "Ireland", code: "IE", registries: ["CRO", "Central Bank", "Revenue"] },
    { name: "Luxembourg", code: "LU", registries: ["RCSL", "CSSF"] },
    { name: "Switzerland", code: "CH", registries: ["Zefix", "FINMA"] },
    { name: "Spain", code: "ES", registries: ["Registro Mercantil", "CNMV"] },
    { name: "Italy", code: "IT", registries: ["Registro Imprese", "CONSOB"] },
    { name: "Belgium", code: "BE", registries: ["BCE/KBO", "FSMA"] },
    { name: "Austria", code: "AT", registries: ["Firmenbuch", "FMA"] },
    { name: "Sweden", code: "SE", registries: ["Bolagsverket", "FI"] },
    { name: "Norway", code: "NO", registries: ["Brønnøysund", "Finanstilsynet"] },
    { name: "Denmark", code: "DK", registries: ["CVR", "Finanstilsynet"] },
    { name: "Finland", code: "FI", registries: ["PRH", "FIN-FSA"] },
    { name: "Poland", code: "PL", registries: ["KRS", "CEIDG"] },
    { name: "Czech Republic", code: "CZ", registries: ["OR", "CNB"] },
    { name: "Portugal", code: "PT", registries: ["Portal da Empresa", "CMVM"] },
    { name: "Greece", code: "GR", registries: ["GEMI", "HCMC"] },
  ],
  "Asia Pacific": [
    { name: "Singapore", code: "SG", registries: ["ACRA", "MAS"] },
    { name: "Hong Kong", code: "HK", registries: ["CR", "SFC", "HKMA"] },
    { name: "Australia", code: "AU", registries: ["ASIC", "APRA", "ATO"] },
    { name: "New Zealand", code: "NZ", registries: ["Companies Office", "FMA"] },
    { name: "Japan", code: "JP", registries: ["Legal Affairs Bureau", "FSA Japan"] },
    { name: "South Korea", code: "KR", registries: ["DART", "FSC Korea"] },
    { name: "India", code: "IN", registries: ["MCA21", "SEBI", "RBI"] },
    { name: "Malaysia", code: "MY", registries: ["SSM", "SC Malaysia"] },
    { name: "Indonesia", code: "ID", registries: ["AHU Online", "OJK"] },
    { name: "Thailand", code: "TH", registries: ["DBD", "SEC Thailand"] },
    { name: "Philippines", code: "PH", registries: ["SEC Philippines"] },
    { name: "Vietnam", code: "VN", registries: ["National Business Registry"] },
  ],
  "Middle East & Africa": [
    { name: "United Arab Emirates", code: "AE", registries: ["DIFC", "ADGM", "DED", "CBUAE"] },
    { name: "Saudi Arabia", code: "SA", registries: ["Ministry of Commerce", "CMA"] },
    { name: "Israel", code: "IL", registries: ["Companies Registrar", "ISA"] },
    { name: "South Africa", code: "ZA", registries: ["CIPC", "FSCA"] },
    { name: "Nigeria", code: "NG", registries: ["CAC Nigeria"] },
    { name: "Kenya", code: "KE", registries: ["eCitizen", "CMA Kenya"] },
    { name: "Egypt", code: "EG", registries: ["GAFI", "FRA Egypt"] },
    { name: "Qatar", code: "QA", registries: ["QFC", "QFCRA"] },
    { name: "Bahrain", code: "BH", registries: ["MOIC", "CBB"] },
    { name: "Kuwait", code: "KW", registries: ["KCC", "CMA Kuwait"] },
  ],
  "Latin America & Caribbean": [
    { name: "Brazil", code: "BR", registries: ["Junta Comercial", "CVM", "BACEN"] },
    { name: "Argentina", code: "AR", registries: ["IGJ", "CNV"] },
    { name: "Chile", code: "CL", registries: ["Registro de Empresas", "CMF"] },
    { name: "Colombia", code: "CO", registries: ["Cámara de Comercio", "SFC"] },
    { name: "Peru", code: "PE", registries: ["SUNARP", "SMV"] },
    { name: "Cayman Islands", code: "KY", registries: ["CICC", "CIMA"] },
    { name: "British Virgin Islands", code: "VG", registries: ["BVI FSC"] },
    { name: "Bermuda", code: "BM", registries: ["ROC Bermuda", "BMA"] },
    { name: "Panama", code: "PA", registries: ["Registro Público", "SMV Panama"] },
    { name: "Jamaica", code: "JM", registries: ["COJ", "FSC Jamaica"] },
  ],
};

// Global sanctions and watchlist sources
const SANCTIONS_SOURCES = [
  { name: "OFAC SDN List", org: "US Treasury", coverage: "US Sanctions" },
  { name: "UN Sanctions", org: "United Nations", coverage: "Global" },
  { name: "EU Sanctions", org: "European Union", coverage: "EU-wide" },
  { name: "UK Sanctions", org: "OFSI", coverage: "UK" },
  { name: "OpenSanctions", org: "OpenSanctions", coverage: "Consolidated" },
  { name: "World Bank Debarment", org: "World Bank", coverage: "Global" },
];

// Calculate totals
const totalJurisdictions = Object.values(JURISDICTIONS).reduce((acc, countries) => acc + countries.length, 0);
const totalRegistries = Object.values(JURISDICTIONS).reduce(
  (acc, countries) => acc + countries.reduce((sum, c) => sum + c.registries.length, 0),
  0
);

export default function JurisdictionsPage() {
  const { t } = useTranslation("marketing");
  const { href: ctaHref, state: ctaState } = useMarketingCta();
  const heroCtaText =
    ctaState === "signedIn"
      ? t("jurisdictions.hero.getStarted", "Get Started")
      : ctaState === "returning"
      ? t("common:header.signIn", "Sign In")
      : t("jurisdictions.hero.joinWaitlist", "Get Started");
  const ctaSectionText =
    ctaState === "signedIn"
      ? t("jurisdictions.cta.getStarted", "Get Started")
      : ctaState === "returning"
      ? t("common:header.signIn", "Sign In")
      : t("jurisdictions.cta.joinWaitlist", "Get Started");
  return (
    <>
      <Helmet>
        <title>Global Jurisdictions - 190+ Countries Covered | Grep AI</title>
        <meta name="description" content="Grep covers corporate registries, regulatory databases, and compliance sources across 190+ jurisdictions. North America, Europe, Asia-Pacific, and beyond." />
        <meta property="og:title" content="Global Jurisdictions - 190+ Countries Covered | Grep AI" />
        <meta property="og:description" content="Grep covers corporate registries, regulatory databases, and compliance sources across 190+ jurisdictions. North America, Europe, Asia-Pacific, and beyond." />
        <meta property="og:image" content="https://storage.googleapis.com/parcha-ai-public-assets/grep-images/og/jurisdictions.jpg" />
        <meta property="og:url" content="https://grep.ai/jurisdictions" />
        <meta property="og:type" content="website" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Global Jurisdictions - 190+ Countries Covered | Grep AI" />
        <meta name="twitter:description" content="Grep covers corporate registries, regulatory databases, and compliance sources across 190+ jurisdictions. North America, Europe, Asia-Pacific, and beyond." />
        <meta name="twitter:image" content="https://storage.googleapis.com/parcha-ai-public-assets/grep-images/og/jurisdictions.jpg" />
      </Helmet>
    <div className="bg-white">
      {/* Hero Section */}
      <section className="bg-black text-white py-24 px-4 md:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-brand-purple text-white text-xs font-mono uppercase tracking-wider mb-8">
                <Globe className="w-4 h-4" />
                Global Coverage
              </div>
              <h1 className="text-4xl md:text-6xl font-black uppercase tracking-tight mb-6">
                200+ Jurisdictions
                <br />
                <span className="text-brand-purple">Worldwide</span>
              </h1>
              <p className="text-gray-400 text-xl max-w-xl leading-relaxed mb-8">
                Grep accesses corporate registries, regulatory databases, court records, and 
                sanctions lists across 200+ jurisdictions globally. From the SEC to Companies House, 
                from ACRA to the Cayman Islands — we've got you covered.
              </p>
              <div className="flex gap-8 mb-8">
                <div>
                  <div className="text-4xl font-black text-brand-purple">{totalJurisdictions}</div>
                  <div className="text-xs font-mono uppercase tracking-wider text-gray-500">Countries</div>
                </div>
                <div>
                  <div className="text-4xl font-black text-brand-purple">{totalRegistries}+</div>
                  <div className="text-xs font-mono uppercase tracking-wider text-gray-500">Registries</div>
                </div>
                <div>
                  <div className="text-4xl font-black text-brand-purple">5</div>
                  <div className="text-xs font-mono uppercase tracking-wider text-gray-500">Regions</div>
                </div>
              </div>
              <Link
                to={ctaHref}
                className="inline-flex items-center gap-2 px-6 py-3 bg-brand-purple text-white font-mono uppercase tracking-wider text-sm hover:bg-indigo-700 transition-colors"
              >
                {heroCtaText}
                <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
            <div className="hidden lg:flex items-center justify-center">
              <Globe className="w-64 h-64 text-brand-purple/30" />
            </div>
          </div>
        </div>
      </section>

      {/* Jurisdictions by Region */}
      <section className="py-24 px-4 md:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-black text-white text-xs font-mono uppercase tracking-wider mb-8">
              <MapPin className="w-4 h-4" />
              Coverage by Region
            </div>
            <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-4">
              Corporate Registries Worldwide
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Direct access to official corporate registries, regulatory databases, and public records 
              across all major jurisdictions.
            </p>
          </div>

          <div className="space-y-12">
            {Object.entries(JURISDICTIONS).map(([region, countries]) => (
              <div key={region} className="border border-black/10 p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-12 h-12 bg-brand-purple text-white flex items-center justify-center">
                    <Globe className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-black uppercase tracking-tight">{region}</h3>
                    <p className="text-gray-500 text-sm">{countries.length} jurisdictions</p>
                  </div>
                </div>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                  {countries.map((country) => (
                    <div
                      key={country.code}
                      className="border border-black/10 p-4 hover:border-brand-purple transition-colors"
                    >
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-lg">{getFlag(country.code)}</span>
                        <span className="font-bold text-sm">{country.name}</span>
                      </div>
                      <div className="flex flex-wrap gap-1">
                        {country.registries.map((registry, i) => (
                          <span
                            key={i}
                            className="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-600"
                          >
                            {registry}
                          </span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sanctions & Watchlists */}
      <section className="py-24 px-4 md:px-8 bg-black text-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-brand-purple text-white text-xs font-mono uppercase tracking-wider mb-8">
              <Shield className="w-4 h-4" />
              Compliance
            </div>
            <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-4">
              Global Sanctions & Watchlists
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              Comprehensive screening against all major international sanctions lists and watchlists.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SANCTIONS_SOURCES.map((source, index) => (
              <div key={index} className="border border-white/20 p-6 hover:border-brand-purple transition-colors">
                <div className="flex items-center gap-3 mb-4">
                  <Shield className="w-8 h-8 text-brand-purple" />
                  <div>
                    <h4 className="font-bold">{source.name}</h4>
                    <p className="text-xs text-gray-400">{source.org}</p>
                  </div>
                </div>
                <span className="text-xs px-2 py-1 bg-brand-purple/20 text-brand-purple">
                  {source.coverage}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What We Access */}
      <section className="py-24 px-4 md:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-black text-white text-xs font-mono uppercase tracking-wider mb-8">
                <Search className="w-4 h-4" />
                Data Types
              </div>
              <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-6">
                What We Access in Each Jurisdiction
              </h2>
              <p className="text-gray-600 mb-8 leading-relaxed">
                For each jurisdiction, Grep searches across multiple data types to build a complete picture 
                of any entity or individual.
              </p>
            </div>
            <div className="space-y-4">
              <div className="flex items-start gap-4 p-4 border border-black/10 hover:border-brand-purple transition-colors">
                <Building2 className="w-6 h-6 text-brand-purple flex-shrink-0" />
                <div>
                  <h4 className="font-bold mb-1">Corporate Registries</h4>
                  <p className="text-sm text-gray-600">Company formation, directors, shareholders, filings</p>
                </div>
              </div>
              <div className="flex items-start gap-4 p-4 border border-black/10 hover:border-brand-purple transition-colors">
                <FileText className="w-6 h-6 text-brand-purple flex-shrink-0" />
                <div>
                  <h4 className="font-bold mb-1">Regulatory Filings</h4>
                  <p className="text-sm text-gray-600">SEC filings, annual reports, prospectuses, licenses</p>
                </div>
              </div>
              <div className="flex items-start gap-4 p-4 border border-black/10 hover:border-brand-purple transition-colors">
                <Shield className="w-6 h-6 text-brand-purple flex-shrink-0" />
                <div>
                  <h4 className="font-bold mb-1">Sanctions & PEPs</h4>
                  <p className="text-sm text-gray-600">Sanctions lists, PEP databases, watchlists</p>
                </div>
              </div>
              <div className="flex items-start gap-4 p-4 border border-black/10 hover:border-brand-purple transition-colors">
                <Globe className="w-6 h-6 text-brand-purple flex-shrink-0" />
                <div>
                  <h4 className="font-bold mb-1">Court Records</h4>
                  <p className="text-sm text-gray-600">Litigation, judgments, bankruptcies, liens</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 px-4 md:px-8 bg-brand-purple text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-6">
            Research Any Entity, Anywhere
          </h2>
          <p className="text-indigo-100 mb-8 max-w-2xl mx-auto">
            With coverage across 200+ jurisdictions, Grep gives you global research capabilities 
            from a single interface.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to={ctaHref}
              className="inline-flex items-center justify-center gap-3 px-8 py-4 bg-white text-black font-mono uppercase tracking-wider hover:bg-gray-100 transition-colors"
            >
              {ctaSectionText}
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              to="/data-sources"
              className="inline-flex items-center justify-center gap-3 px-8 py-4 bg-transparent border-2 border-white text-white font-mono uppercase tracking-wider hover:bg-white/10 transition-colors"
            >
              View All Data Sources
            </Link>
          </div>
        </div>
      </section>
    </div>
    </>
  );
}

// Helper function to get flag emoji from country code
function getFlag(countryCode: string): string {
  const codePoints = countryCode
    .toUpperCase()
    .split("")
    .map((char) => 127397 + char.charCodeAt(0));
  return String.fromCodePoint(...codePoints);
}