```tsx
"use client";

import Link from "next/link";
import {
  Activity,
  ArrowRight,
  BrainCircuit,
  Building2,
  ChartCandlestick,
  ChevronRight,
  CircleDollarSign,
  Database,
  FileSearch,
  Globe2,
  Landmark,
  LockKeyhole,
  Network,
  Radar,
  ShieldCheck,
  Sparkles,
  WalletCards,
  Zap
} from "lucide-react";

const domains = [
  {
    title: "Real Estate",
    description:
      "Property intelligence, valuation, rental analytics, location intelligence, developer research and scenario analysis.",
    href: "/real-estate",
    icon: Building2
  },
  {
    title: "Investment",
    description:
      "Market research, valuation, risk analysis, portfolio intelligence, macro research and scenario analysis.",
    href: "/investment",
    icon: ChartCandlestick
  },
  {
    title: "Wealth",
    description:
      "Asset allocation, liquidity, concentration, cash flow, portfolio monitoring and wealth intelligence.",
    href: "/wealth",
    icon: WalletCards
  },
  {
    title: "Global Markets",
    description:
      "Countries, currencies, securities, commodities, economic indicators and global market intelligence.",
    href: "/markets",
    icon: Globe2
  },
  {
    title: "Government",
    description:
      "Government publications, jurisdiction intelligence, regulatory monitoring and policy-change tracking.",
    href: "/regulatory",
    icon: Landmark
  },
  {
    title: "Evidence",
    description:
      "Research, sources, provenance, citations, evidence verification and temporal information.",
    href: "/research",
    icon: FileSearch
  }
];

const pillars = [
  {
    number: "01",
    title: "Observe",
    text: "Continuously collect information from approved data and evidence sources."
  },
  {
    number: "02",
    title: "Verify",
    text: "Check source quality, provenance, timestamps, contradictions and freshness."
  },
  {
    number: "03",
    title: "Understand",
    text: "Connect entities, relationships and events inside the world model."
  },
  {
    number: "04",
    title: "Predict",
    text: "Generate forecasts with assumptions, uncertainty and model provenance."
  },
  {
    number: "05",
    title: "Simulate",
    text: "Test alternative futures through scenarios and digital twins."
  },
  {
    number: "06",
    title: "Decide",
    text: "Present evidence, trade-offs, risks and approval requirements."
  }
];

const agentFamilies = [
  {
    title: "Discovery Agents",
    description:
      "Scout properties, companies, markets, documents, regulations and opportunities.",
    icon: Radar
  },
  {
    title: "Evidence Agents",
    description:
      "Verify sources, preserve provenance, identify contradictions and monitor freshness.",
    icon: FileSearch
  },
  {
    title: "Analysis Agents",
    description:
      "Perform valuation, financial analysis, portfolio analysis, risk and scenario work.",
    icon: Activity
  },
  {
    title: "Security Agents",
    description:
      "Monitor identities, access, anomalies, threats, incidents and defensive controls.",
    icon: ShieldCheck
  }
];

const architecture = [
  "Edge & Access",
  "Identity",
  "Experience",
  "Jarvis Missions",
  "Agent Colony",
  "World Model",
  "Knowledge Graph",
  "Evidence Fabric",
  "Temporal Intelligence",
  "Data Ingestion",
  "Event Bus",
  "Hybrid RAG",
  "Model Layer",
  "Prediction",
  "Simulation",
  "Digital Twins",
  "Universal Asset Engine",
  "Security",
  "Cyber Defense",
  "Governance",
  "Audit",
  "Observability"
];

export default function HomePage() {
  return (
    <main className="page">
      {/* =====================================================
          HEADER
      ===================================================== */}

      <header className="site-header">
        <div className="container site-header-inner">
          <Link href="/" className="logo" aria-label="SafeHandsInvest">
            <span className="logo-mark">SH</span>

            <span className="logo-text">
              <span className="logo-name">SafeHandsInvest</span>
              <span className="logo-subtitle">
                SUPREME GLOBAL AI V9
              </span>
            </span>
          </Link>

          <nav className="main-nav" aria-label="Main navigation">
            <Link href="#platform">Platform</Link>
            <Link href="#domains">Domains</Link>
            <Link href="#architecture">Architecture</Link>
            <Link href="#jarvis">Jarvis</Link>
            <Link href="#security">Security</Link>
          </nav>

          <div className="header-actions">
            <Link href="/login" className="btn btn-secondary">
              Login
            </Link>

            <Link href="/signup" className="btn btn-primary">
              Get Started
            </Link>
          </div>
        </div>
      </header>

      {/* =====================================================
          HERO
      ===================================================== */}

      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="eyebrow">
              <span className="eyebrow-dot" />
              SUPREME GLOBAL AI V9
            </div>

            <h1 className="hero-title">
              Intelligence for
              <span className="gradient-text">
                the world of assets.
              </span>
            </h1>

            <p className="hero-description">
              SafeHandsInvest is building a unified intelligence
              architecture for real estate, investment, wealth,
              global markets, government and evidence.
            </p>

            <div className="hero-actions">
              <Link href="/jarvis" className="btn btn-primary">
                Start with Jarvis
                <ArrowRight size={17} />
              </Link>

              <Link href="#platform" className="btn btn-secondary">
                Explore V9
              </Link>
            </div>

            <div className="hero-meta">
              <span>
                Architecture: <strong>V9</strong>
              </span>

              <span>
                Topology: <strong>Butterfly + Ant Colony</strong>
              </span>

              <span>
                Model: <strong>Evidence-driven</strong>
              </span>
            </div>
          </div>

          <div className="architecture-visual">
            <div className="arch-node arch-node-one">
              <span className="arch-node-dot" />
              Evidence
            </div>

            <div className="arch-node arch-node-two">
              <span className="arch-node-dot" />
              Markets
            </div>

            <div className="arch-node arch-node-three">
              <span className="arch-node-dot" />
              Real Estate
            </div>

            <div className="arch-node arch-node-four">
              <span className="arch-node-dot" />
              Wealth
            </div>

            <div className="butterfly">
              <div className="wing wing-left" />
              <div className="wing wing-right" />

              <div className="core">
                <div className="core-inner">
                  <div>
                    <BrainCircuit size={26} />
                    <strong>JARVIS</strong>
                    <span>V9 CORE</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* =====================================================
          PLATFORM
      ===================================================== */}

      <section id="platform" className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">
              One intelligence architecture
            </div>

            <h2 className="section-title">
              From raw information to governed intelligence.
            </h2>

            <p className="section-description">
              V9 connects data ingestion, evidence verification,
              world modeling, specialist agents, prediction,
              simulation and decision support inside one system.
            </p>
          </div>

          <div className="grid-3">
            {pillars.map((pillar) => (
              <div
                className="card domain-card card-interactive"
                key={pillar.number}
              >
                <div>
                  <div className="card-icon">
                    {pillar.number}
                  </div>

                  <h3>{pillar.title}</h3>

                  <p>{pillar.text}</p>
                </div>

                <span className="card-link">
                  V9 intelligence layer
                  <ChevronRight size={14} />
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* =====================================================
          DOMAINS
      ===================================================== */}

      <section id="domains" className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">
              World asset intelligence
            </div>

            <h2 className="section-title">
              Multiple domains. One shared intelligence fabric.
            </h2>

            <p className="section-description">
              A common world model, evidence fabric and mission
              system allows the same intelligence architecture to
              work across asset and investment domains.
            </p>
          </div>

          <div className="grid-3">
            {domains.map((domain) => {
              const Icon = domain.icon;

              return (
                <Link
                  href={domain.href}
                  key={domain.title}
                  className="card domain-card card-interactive"
                >
                  <div>
                    <div className="card-icon">
                      <Icon size={19} />
                    </div>

                    <h3>{domain.title}</h3>

                    <p>{domain.description}</p>
                  </div>

                  <span className="card-link">
                    Explore
                    <ChevronRight size={14} />
                  </span>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* =====================================================
          ARCHITECTURE
      ===================================================== */}

      <section id="architecture" className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">
              V9 architecture
            </div>

            <h2 className="section-title">
              A modular intelligence operating system.
            </h2>

            <p className="section-description">
              V9 is structured as independent layers so services
              can be tested, governed, replaced and scaled without
              rebuilding the entire platform.
            </p>
          </div>

          <div
            className="card"
            style={{
              padding: "28px"
            }}
          >
            <div className="grid-4">
              {architecture.map((layer, index) => (
                <div
                  className="metric-card"
                  key={layer}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "10px"
                    }}
                  >
                    <span
                      style={{
                        color: "var(--gold-light)",
                        fontSize: "0.70rem",
                        fontWeight: 800
                      }}
                    >
                      {String(index + 1).padStart(2, "0")}
                    </span>

                    <strong
                      style={{
                        fontSize: "0.78rem"
                      }}
                    >
                      {layer}
                    </strong>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* =====================================================
          JARVIS
      ===================================================== */}

      <section id="jarvis" className="section">
        <div className="container">
          <div className="jarvis-shell">
            <div className="jarvis-layout">
              <div>
                <span className="jarvis-badge">
                  Persistent Mission Intelligence
                </span>

                <h2 className="jarvis-title">
                  Jarvis turns a request into a mission.
                </h2>

                <p className="jarvis-copy">
                  Jarvis can interpret an objective, decompose the
                  work, coordinate specialist agents, collect
                  evidence, run analysis and simulations, monitor
                  uncertainty and present the result with governance
                  and approval context.
                </p>

                <div className="hero-actions">
                  <Link href="/jarvis" className="btn btn-primary">
                    Open Jarvis
                    <Zap size={16} />
                  </Link>

                  <Link href="/missions" className="btn btn-secondary">
                    Mission Center
                  </Link>
                </div>
              </div>

              <div className="console">
                <div className="console-header">
                  <span className="console-title">
                    MISSION / SHI-V9-000001
                  </span>

                  <span className="status status-success">
                    READY
                  </span>
                </div>

                <div className="console-body">
                  <div className="console-row">
                    <span className="console-key">
                      Objective
                    </span>

                    <span className="console-value">
                      Evaluate an asset opportunity
                    </span>
                  </div>

                  <div className="console-row">
                    <span className="console-key">
                      Evidence
                    </span>

                    <span className="console-value">
                      Source verification required
                    </span>
                  </div>

                  <div className="console-row">
                    <span className="console-key">
                      Agents
                    </span>

                    <span className="console-value">
                      Specialist swarm
                    </span>
                  </div>

                  <div className="console-row">
                    <span className="console-key">
                      Prediction
                    </span>

                    <span className="console-value">
                      Scenario-based
                    </span>
                  </div>

                  <div className="console-row">
                    <span className="console-key">
                      Risk
                    </span>

                    <span className="console-value">
                      Continuous assessment
                    </span>
                  </div>

                  <div className="console-row">
                    <span className="console-key">
                      Approval
                    </span>

                    <span className="console-value">
                      Governed when required
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* =====================================================
          AGENT COLONY
      ===================================================== */}

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">
              Ant-colony intelligence
            </div>

            <h2 className="section-title">
              Specialist agents working as one colony.
            </h2>

            <p className="section-description">
              Agents operate with bounded responsibilities and
              communicate through governed mission and event
              interfaces.
            </p>
          </div>

          <div className="grid-4">
            {agentFamilies.map((family) => {
              const Icon = family.icon;

              return (
                <div
                  className="card"
                  style={{
                    padding: "22px"
                  }}
                  key={family.title}
                >
                  <div className="card-icon">
                    <Icon size={18} />
                  </div>

                  <h3
                    style={{
                      marginTop: "18px"
                    }}
                  >
                    {family.title}
                  </h3>

                  <p
                    style={{
                      marginTop: "8px",
                      color: "var(--muted)",
                      fontSize: "0.80rem",
                      lineHeight: 1.65
                    }}
                  >
                    {family.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* =====================================================
          SECURITY
      ===================================================== */}

      <section id="security" className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">
              Trust architecture
            </div>

            <h2 className="section-title">
              Security and governance are built into V9.
            </h2>

            <p className="section-description">
              Identity, permissions, evidence integrity, audit,
              defensive monitoring and controlled autonomy are
              designed as core platform functions.
            </p>
          </div>

          <div className="grid-4">
            <div className="card" style={{ padding: "22px" }}>
              <div className="card-icon">
                <LockKeyhole size={18} />
              </div>

              <h3 style={{ marginTop: "18px" }}>
                Identity
              </h3>

              <p
                style={{
                  marginTop: "8px",
                  color: "var(--muted)",
                  fontSize: "0.80rem"
                }}
              >
                Authentication, MFA, RBAC, ABAC and service identities.
              </p>
            </div>

            <div className="card" style={{ padding: "22px" }}>
              <div className="card-icon">
                <Database size={18} />
              </div>

              <h3 style={{ marginTop: "18px" }}>
                Evidence Integrity
              </h3>

              <p
                style={{
                  marginTop: "8px",
                  color: "var(--muted)",
                  fontSize: "0.80rem"
                }}
              >
                Provenance, timestamps, source quality and audit context.
              </p>
            </div>

            <div className="card" style={{ padding: "22px" }}>
              <div className="card-icon">
                <Network size={18} />
              </div>

              <h3 style={{ marginTop: "18px" }}>
                Adaptive Defense
              </h3>

              <p
                style={{
                  marginTop: "8px",
                  color: "var(--muted)",
                  fontSize: "0.80rem"
                }}
              >
                Continuous monitoring, detection, containment and recovery.
              </p>
            </div>

            <div className="card" style={{ padding: "22px" }}>
              <div className="card-icon">
                <ShieldCheck size={18} />
              </div>

              <h3 style={{ marginTop: "18px" }}>
                Governed Evolution
              </h3>

              <p
                style={{
                  marginTop: "8px",
                  color: "var(--muted)",
                  fontSize: "0.80rem"
                }}
              >
                Testing, approval and controlled deployment for system changes.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* =====================================================
          FINAL CTA
      ===================================================== */}

      <section className="section-lg">
        <div className="container">
          <div
            className="card"
            style={{
              padding: "64px 30px",
              textAlign: "center",
              borderColor: "var(--border-gold)",
              background:
                "radial-gradient(circle at 50% 0, rgba(215,181,109,0.11), transparent 45%), rgba(13,27,46,0.80)"
            }}
          >
            <h2
              className="section-title"
              style={{
                marginInline: "auto"
              }}
            >
              Build intelligence around the asset.
            </h2>

            <p
              className="section-description"
              style={{
                marginInline: "auto"
              }}
            >
              A unified platform for researching, evaluating,
              comparing, simulating and monitoring assets,
              investments and markets.
            </p>

            <div
              className="hero-actions"
              style={{
                justifyContent: "center"
              }}
            >
              <Link href="/signup" className="btn btn-primary">
                Create Account
                <ArrowRight size={17} />
              </Link>

              <Link href="/jarvis" className="btn btn-secondary">
                Talk to Jarvis
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* =====================================================
          DISCLAIMER
      ===================================================== */}

      <div className="container">
        <div className="disclaimer">
          <strong>Important:</strong>{" "}
          SafeHandsInvest is designed as an information,
          research and intelligence platform. Forecasts,
          valuations, scenarios and analytical outputs can
          contain uncertainty and are not guarantees of
          investment performance. Financial, legal, tax and
          regulatory matters may require appropriately
          qualified professional advice and authorization.
        </div>
      </div>

      {/* =====================================================
          FOOTER
      ===================================================== */}

      <footer className="site-footer">
        <div className="container">
          <div className="footer-grid">
            <div>
              <Link href="/" className="logo">
                <span className="logo-mark">SH</span>

                <span className="logo-text">
                  <span className="logo-name">
                    SafeHandsInvest
                  </span>

                  <span className="logo-subtitle">
                    SUPREME GLOBAL AI V9
                  </span>
                </span>
              </Link>

              <p className="footer-brand-copy">
                World Asset & Investment Intelligence across
                real estate, investment, wealth, global markets,
                government and evidence.
              </p>
            </div>

            <div className="footer-column">
              <h4>Platform</h4>
              <Link href="/real-estate">Real Estate</Link>
              <Link href="/investment">Investment</Link>
              <Link href="/wealth">Wealth</Link>
              <Link href="/markets">Global Markets</Link>
            </div>

            <div className="footer-column">
              <h4>Intelligence</h4>
              <Link href="/jarvis">Jarvis</Link>
              <Link href="/missions">Missions</Link>
              <Link href="/research">Research</Link>
              <Link href="/regulatory">Regulatory</Link>
            </div>

            <div className="footer-column">
              <h4>Company</h4>
              <Link href="/about">About</Link>
              <Link href="/security">Security</Link>
              <Link href="/privacy">Privacy</Link>
              <Link href="/terms">Terms</Link>
              <Link href="/disclaimer">Disclaimer</Link>
            </div>
          </div>

          <div className="footer-bottom">
            <span>
              © {new Date().getFullYear()} SafeHandsInvest.
              All rights reserved.
            </span>

            <span>
              SUPREME GLOBAL AI V9
            </span>
          </div>
        </div>
      </footer>
    </main>
  );
}
```