"use client";

import {
  ArrowRight,
  Bank,
  ChartBar,
  CheckCircle,
  Fingerprint,
  GlobeHemisphereWest,
  MapPinArea,
  Broadcast,
  Plant,
  Timer,
  Tractor
} from "@phosphor-icons/react";
import dynamic from "next/dynamic";

const AgriNetworkScene = dynamic(() => import("./AgriNetworkScene"), {
  ssr: false,
  loading: () => <div className="scene-loader">Routing finance</div>
});

const metrics = [
  ["$3.8B", "Uzbekistan TAM"],
  ["4.7M+", "Underserved farms"],
  ["83%", "Without formal finance"],
  ["14", "Province rollout target"]
];

const brandAddress =
  "SGCI American Corporation IT-park resident, Uzbekistan Ovozi street 21 office number 2, Mirzo Uluqbek District, Tashkent Uzbekistan";

const modules = [
  {
    icon: Bank,
    title: "AGNET Finance",
    body: "Eligibility, complaint tracking, SLA escalation, bank routing, and traceable disbursement workflows."
  },
  {
    icon: GlobeHemisphereWest,
    title: "AGNET Trade",
    body: "Verified buyer marketplace, export documentation, price benchmarking, contracts, and logistics coordination."
  },
  {
    icon: Fingerprint,
    title: "AGNET Identity",
    body: "GIS mapping, eKYC, digital farm records, yield history, and compliance-ready profiles."
  },
  {
    icon: Tractor,
    title: "AGNET Inputs",
    body: "Transparent seed, fertiliser, equipment, supplier ratings, and digital procurement support."
  },
  {
    icon: ChartBar,
    title: "AGNET Analytics",
    body: "Commodity signals, district risk scores, demand maps, and institution-grade rural intelligence."
  },
  {
    icon: Broadcast,
    title: "Agent Network",
    body: "Field teams assist low-literacy farmers with onboarding, documents, cases, and digital adoption."
  }
];

const financeFlow = [
  "Submit Issue",
  "Eligibility Engine",
  "Institution Routing",
  "Document Checklist",
  "Approval",
  "Disbursement",
  "Monitoring",
  "Analytics Feed"
];

export default function AgnetHome() {
  return (
    <main>
      <header className="site-header" aria-label="Global navigation">
        <a className="brand" href="#top" aria-label="AGNET home">
          <img src="/agnet-global-logo.png" alt="AgNet Global" />
        </a>
        <nav aria-label="Primary navigation">
          <a href="#platform">Platform</a>
          <a href="#finance">Finance</a>
          <a href="#institutions">Institutions</a>
          <a href="#market">Market</a>
          <a href="#contact">Contact</a>
        </nav>
        <a className="nav-cta" href="#contact">
          Request Pilot
        </a>
      </header>

      <section id="top" className="hero-section">
        <div className="map-grid" aria-hidden="true" />
        <div className="hero-scene" aria-hidden="true">
          <AgriNetworkScene />
        </div>
        <div className="hero-content">
          <div className="eyebrow">
            <span />
            Uzbekistan farmer finance infrastructure
          </div>
          <h1>Connecting Uzbekistan&apos;s farmers to finance, buyers, inputs, and global markets.</h1>
          <p>
            AGNET is the integrated AgriTech platform for farmer finance, trade, digital identity,
            and institutional rural intelligence.
          </p>
          <div className="hero-actions">
            <a className="primary-action" href="#contact">
              Launch district pilot <ArrowRight size={18} weight="bold" />
            </a>
            <a className="secondary-action" href="#platform">
              View platform
            </a>
          </div>
        </div>
        <aside className="hero-console" aria-label="Live AGNET workflow preview">
          <div className="console-topline">
            <span>Finance case AG-FV-2026-0184</span>
            <strong>Bank route open</strong>
          </div>
          <div className="workflow-mini" aria-label="Financing workflow">
            <span>Bank</span>
            <ArrowRight size={14} weight="bold" />
            <span>AGNET</span>
            <ArrowRight size={14} weight="bold" />
            <span>Farmer</span>
          </div>
          <div className="console-farm">
            <MapPinArea size={18} weight="duotone" />
            <div>
              <strong>Ferghana Valley</strong>
              <span>2.4 ha cotton + vegetables · GIS verified</span>
            </div>
          </div>
          <div className="console-progress">
            <span style={{ width: "68%" }} />
          </div>
          <div className="console-row">
            <span>AGNET eligibility</span>
            <strong>Matched to Agrobank</strong>
          </div>
          <div className="console-row">
            <span>Farmer outcome</span>
            <strong>Voucher + cash route</strong>
          </div>
        </aside>
        <div className="hero-metrics" aria-label="AGNET market metrics">
          {metrics.map(([value, label]) => (
            <div key={label}>
              <strong>{value}</strong>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="problem-section">
        <div>
          <span className="section-kicker">The infrastructure gap</span>
          <h2>4.7 million farms. Zero connected operating layer.</h2>
        </div>
        <blockquote>
          “I grow the food. But I cannot get a loan, find a buyer, or prove my farm exists to any
          bank.”
          <cite>Farmer, Ferghana Valley</cite>
        </blockquote>
      </section>

      <section id="platform" className="platform-section">
        <div className="section-heading">
          <span className="section-kicker">One platform</span>
          <h2>Farmer to global market.</h2>
          <p>
            Six connected modules replace fragmented brokers, paper documents, invisible loan
            queues, and one-off agri apps.
          </p>
        </div>
        <div className="module-grid">
          {modules.map((item) => {
            const Icon = item.icon;
            return (
              <article className="module-tile" key={item.title}>
                <Icon size={22} weight="duotone" />
                <h3>{item.title}</h3>
                <p>{item.body}</p>
              </article>
            );
          })}
        </div>
      </section>

      <section id="finance" className="finance-section">
        <div className="section-heading compact">
          <span className="section-kicker">From complaint to cash</span>
          <h2>Every farmer gets a case ID, a route, and a resolution clock.</h2>
        </div>
        <div className="flow-rail">
          {financeFlow.map((step, index) => (
            <div className="flow-step" key={step}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{step}</strong>
            </div>
          ))}
        </div>
        <div className="sla-strip">
          <div>
            <Timer size={22} weight="duotone" />
            <strong>3-day first response SLA</strong>
          </div>
          <div>
            <CheckCircle size={22} weight="duotone" />
            <strong>7-21 day resolution target</strong>
          </div>
          <div>
            <Bank size={22} weight="duotone" />
            <strong>Direct bank + MFI routing</strong>
          </div>
        </div>
      </section>

      <section id="institutions" className="institution-section">
        <div className="institution-copy">
          <span className="section-kicker">Institutional workflow</span>
          <h2>The dashboard banks and buyers have been missing.</h2>
          <p>
            AGNET gives officers, exporters, cooperatives, and government teams the shared queue
            they need to move rural finance and supply from informal follow-up to accountable
            execution.
          </p>
        </div>
        <div className="ops-board" aria-label="Institution dashboard preview">
          <div className="ops-head">
            <span>District queue</span>
            <strong>Live</strong>
          </div>
          {["Incoming case queue", "SLA countdown", "Document quality score", "Verified farm profiles", "Contract and eSign"].map(
            (item, index) => (
              <div className="ops-row" key={item}>
                <span>{item}</span>
                <strong>{index === 2 ? "91%" : index === 3 ? "2,804" : "Active"}</strong>
              </div>
            )
          )}
        </div>
      </section>

      <section id="market" className="market-section">
        <div className="market-figure">
          <span>TAM</span>
          <strong>$3.8B</strong>
          <em>0.8% top-down / bottom-up convergence</em>
        </div>
        <div className="market-copy">
          <span className="section-kicker">Why now</span>
          <h2>Uzbekistan&apos;s reform window is open.</h2>
          <p>
            A $400M government mechanisation fund, digital farm registration mandate, mobile
            adoption, Telegram-scale communication, and no integrated direct competitor create the
            first-mover opening.
          </p>
        </div>
      </section>

      <section id="contact" className="cta-section">
        <Plant size={38} weight="duotone" />
        <h2>Build the rural finance layer Uzbekistan is missing.</h2>
        <p>
          Start with two districts, 500 farmers, measurable SLA adherence, and verified buyer
          demand.
        </p>
        <a className="primary-action" href="mailto:invest@agnet-global.com">
          Partner with AGNET <ArrowRight size={18} weight="bold" />
        </a>
        <div className="brand-contact" aria-label="AGNET contact details">
          <strong>AGNET</strong>
          <span>Agnet-global.com</span>
          <span>{brandAddress}</span>
        </div>
      </section>
    </main>
  );
}