"use client";

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

// ─── Icon helper ─────────────────────────────────────────────────────────────
function Icon({ name, className = "" }: { name: string; className?: string }) {
  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
}

// ─── Animated typing text ─────────────────────────────────────────────────────
function TypeWriter({ lines }: { lines: string[] }) {
  const [displayed, setDisplayed] = useState("");
  const [lineIdx, setLineIdx] = useState(0);
  const [charIdx, setCharIdx] = useState(0);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    const current = lines[lineIdx];
    let timeout: ReturnType<typeof setTimeout>;
    if (!deleting && charIdx < current.length) {
      timeout = setTimeout(() => setCharIdx((c) => c + 1), 55);
    } else if (!deleting && charIdx === current.length) {
      timeout = setTimeout(() => setDeleting(true), 2200);
    } else if (deleting && charIdx > 0) {
      timeout = setTimeout(() => setCharIdx((c) => c - 1), 28);
    } else {
      setDeleting(false);
      setLineIdx((l) => (l + 1) % lines.length);
    }
    setDisplayed(current.slice(0, charIdx));
    return () => clearTimeout(timeout);
  }, [charIdx, deleting, lineIdx, lines]);

  return (
    <span className="text-[#B7A6FB]">
      {displayed}
      <span className="animate-pulse">_</span>
    </span>
  );
}

// ─── Animated counter ─────────────────────────────────────────────────────────
function Counter({ to, suffix = "" }: { to: number; suffix?: string }) {
  const [val, setVal] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) return;
        obs.disconnect();
        const duration = 1800;
        const start = performance.now();
        const tick = (now: number) => {
          const t = Math.min((now - start) / duration, 1);
          const ease = 1 - Math.pow(1 - t, 3);
          setVal(Math.round(ease * to));
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      },
      { threshold: 0.4 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to]);

  return (
    <span ref={ref}>
      {val.toLocaleString()}
      {suffix}
    </span>
  );
}

// ─── Particle canvas ──────────────────────────────────────────────────────────
function ParticleField() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let raf: number;
    const particles: { x: number; y: number; vx: number; vy: number; r: number; o: number }[] = [];

    const resize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener("resize", resize);

    for (let i = 0; i < 90; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.35,
        vy: (Math.random() - 0.5) * 0.35,
        r: Math.random() * 1.5 + 0.3,
        o: Math.random() * 0.5 + 0.1,
      });
    }

    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.forEach((p) => {
        p.x += p.vx;
        p.y += p.vy;
        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(183,166,251,${p.o})`;
        ctx.fill();
      });
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 110) {
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.strokeStyle = `rgba(183,166,251,${0.12 * (1 - dist / 110)})`;
            ctx.lineWidth = 0.6;
            ctx.stroke();
          }
        }
      }
      raf = requestAnimationFrame(draw);
    };
    draw();

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", resize);
    };
  }, []);

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none" />;
}

// ─── Negotiation Log (animated) ───────────────────────────────────────────────
const LOG_ENTRIES = [
  { time: "10:02:41", text: "Agent A proposes ", highlight: "$54.20", color: "#B7A6FB" },
  { time: "10:02:42", text: "Agent B rejects proposal", highlight: null, color: "#94a3b8" },
  { time: "10:02:42", text: "Agent B counters ", highlight: "$58.00", color: "#22d3ee" },
  { time: "10:02:43", text: "Calculating overlap…", highlight: null, color: "#fbbf24" },
  { time: "10:02:44", text: "Convergence at ", highlight: "98.4%", color: "#34d399" },
];

function NegotiationLog() {
  const [visible, setVisible] = useState(0);

  useEffect(() => {
    if (visible >= LOG_ENTRIES.length) return;
    const t = setTimeout(() => setVisible((v) => v + 1), 900);
    return () => clearTimeout(t);
  }, [visible]);

  return (
    <div className="flex-grow space-y-3 overflow-hidden">
      {LOG_ENTRIES.slice(0, visible).map((e, i) => (
        <div key={i} className="flex gap-2 text-xs font-mono" style={{ animation: "fadeSlideIn 0.3s ease forwards" }}>
          <span className="text-slate-600 shrink-0">[{e.time}]</span>
          <span style={{ color: e.color ?? "#94a3b8" }}>
            {e.text}
            {e.highlight && <span style={{ color: e.color ?? "#B7A6FB" }} className="font-bold">{e.highlight}</span>}
          </span>
        </div>
      ))}
      {visible >= LOG_ENTRIES.length && (
        <div className="mt-2 p-2.5 rounded border text-xs font-mono" style={{ background: "rgba(52,211,153,0.08)", borderColor: "rgba(52,211,153,0.3)", color: "#34d399", animation: "fadeSlideIn 0.3s ease forwards" }}>
          <span className="font-bold block">✓ SETTLEMENT REACHED</span>
          <span className="opacity-60 text-[10px]">TX: 0x8a…9f2c · 12ms</span>
        </div>
      )}
    </div>
  );
}

// ─── Feature card ─────────────────────────────────────────────────────────────
function FeatureCard({ icon, title, desc, tag, accent }: { icon: string; title: string; desc: string; tag: string; accent: string }) {
  return (
    <div
      className="group relative p-7 rounded-2xl border border-white/5 transition-all duration-500 overflow-hidden flex flex-col"
      style={{ background: "#0f0b1a" }}
      onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = `0 0 30px ${accent}26`; (e.currentTarget as HTMLElement).style.borderColor = `${accent}40`; }}
      onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = "none"; (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.05)"; }}
    >
      <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-[0.12] transition-opacity duration-500 pointer-events-none select-none">
        <Icon name={icon} className="text-[7rem]" />
      </div>
      <div className="size-11 rounded-lg flex items-center justify-center mb-5" style={{ background: `${accent}18`, color: accent }}>
        <Icon name={icon} className="text-xl" />
      </div>
      <h3 className="text-lg font-bold text-white mb-2">{title}</h3>
      <p className="text-slate-400 text-sm leading-relaxed flex-grow">{desc}</p>
      <div className="border-t border-white/5 pt-4 mt-6">
        <span className="text-[10px] font-mono uppercase tracking-widest" style={{ color: accent }}>{tag}</span>
      </div>
    </div>
  );
}

// ─── Main landing page ────────────────────────────────────────────────────────
export default function LandingPage() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <style>{`
        @keyframes fadeSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        @keyframes gridPulse { from { opacity:0.25; } to { opacity:0.65; transform:perspective(900px) rotateX(58deg) translateY(-175px) translateZ(-475px); } }
        @keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-20px) scale(1.08);} }
        @keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-25px,18px) scale(1.06);} }
        @keyframes floatA { 0%,100%{transform:rotate(-6deg) translateY(0);} 50%{transform:rotate(-6deg) translateY(-8px);} }
        @keyframes floatB { 0%,100%{transform:rotate(10deg) translateY(0);} 50%{transform:rotate(10deg) translateY(-6px);} }
        @keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
        @keyframes spinSlow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
        @keyframes spinRev  { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }
        @keyframes scanLine { 0%{top:0%;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%;opacity:0;} }
        .cyber-grid-bg {
          background-image: linear-gradient(rgba(183,166,251,0.06) 1px,transparent 1px), linear-gradient(90deg,rgba(183,166,251,0.06) 1px,transparent 1px);
          background-size:48px 48px;
          transform:perspective(900px) rotateX(58deg) translateY(-200px) translateZ(-500px);
          mask-image:linear-gradient(to bottom,transparent,black 40%,black 60%,transparent);
          height:200%; width:200%; position:absolute; top:-50%; left:-50%;
          pointer-events:none; animation:gridPulse 9s ease-in-out infinite alternate;
        }
        .float-a { animation:floatA 5s ease-in-out infinite; }
        .float-b { animation:floatB 6.5s ease-in-out infinite; }
        .marquee-track { animation:marquee 32s linear infinite; }
        .spin-s  { animation:spinSlow 12s linear infinite; }
        .spin-r  { animation:spinRev  18s linear infinite; }
        .scan-ln { position:absolute; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,rgba(183,166,251,0.6),transparent); animation:scanLine 3s ease-in-out infinite; pointer-events:none; }
      `}</style>

      <div className="min-h-screen bg-[#070312] text-slate-300 overflow-x-hidden">

        {/* Navbar */}
        <header className="fixed top-0 w-full z-50 transition-all duration-300" style={{ borderBottom: scrolled ? "1px solid rgba(255,255,255,0.08)" : "1px solid transparent", background: scrolled ? "rgba(7,3,18,0.88)" : "transparent", backdropFilter: scrolled ? "blur(16px)" : "none" }}>
          <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="size-8 rounded-lg bg-gradient-to-br from-[#B7A6FB] to-[#22d3ee] flex items-center justify-center text-[#070312]">
                <Icon name="hub" className="text-xl" />
              </div>
              <span className="text-white text-lg font-bold tracking-tight">Agent<span className="text-[#B7A6FB] font-light">Mesh</span></span>
            </div>
          </div>
        </header>

        {/* Hero */}
        <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
          <div className="cyber-grid-bg" />
          <ParticleField />
          <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" style={{ background: "radial-gradient(circle,rgba(183,166,251,0.18) 0%,transparent 70%)", animation: "orb1 8s ease-in-out infinite", filter: "blur(40px)" }} />
          <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full pointer-events-none" style={{ background: "radial-gradient(circle,rgba(34,211,238,0.14) 0%,transparent 70%)", animation: "orb2 10s ease-in-out infinite", filter: "blur(40px)" }} />

          {/* Floating code fragments — anchored to section edges, clear of headline */}
          <div className="float-a absolute hidden lg:block z-20" style={{ left:"calc(50% - 420px)", top:"42%", transform:"translateY(-50%)", background:"rgba(20,16,35,0.85)", backdropFilter:"blur(10px)", border:"1px solid rgba(183,166,251,0.25)", borderRadius:"12px", padding:"12px 16px", fontSize:"10px", fontFamily:"monospace", color:"rgba(183,166,251,0.85)", lineHeight:"1.7" }}>
            <div className="flex gap-1.5 mb-2 pb-2 border-b border-white/10"><span className="size-2 rounded-full bg-red-500/60" /><span className="size-2 rounded-full bg-yellow-500/60" /></div>
            SEQ_INIT: 0x98A1<br />PROBABILITY: 0.99982
          </div>
          <div className="float-b absolute hidden lg:block z-20" style={{ right:"calc(50% - 420px)", top:"42%", transform:"translateY(-50%)", background:"rgba(20,16,35,0.85)", backdropFilter:"blur(10px)", border:"1px solid rgba(34,211,238,0.25)", borderRadius:"12px", padding:"12px 16px", fontSize:"10px", fontFamily:"monospace", color:"rgba(34,211,238,0.85)", lineHeight:"1.7" }}>
            LOGIC_STREAM &gt;&gt; ON<br />WEIGHT_BALANCER: ENABLED
          </div>

          <div className="relative z-10 max-w-4xl mx-auto px-6 text-center flex flex-col items-center gap-8 pt-24">
            {/* Status pill */}
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#B7A6FB]/30 bg-[#B7A6FB]/8 backdrop-blur-sm">
              <span className="size-2 rounded-full bg-emerald-400 animate-pulse" />
              <span className="text-[11px] font-mono text-[#B7A6FB] uppercase tracking-widest">v2.0 Protocol Live</span>
            </div>

            {/* Headline */}
            <h1 className="text-5xl md:text-7xl font-black text-white leading-[1.06] tracking-tighter" style={{ textShadow: "0 0 60px rgba(183,166,251,0.15)" }}>
              The Agent Economy<br />
              <span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(135deg,#B7A6FB 0%,#ffffff 50%,#22d3ee 100%)" }}>
                is Here.
              </span>
            </h1>

            {/* Typewriter */}
            <p className="text-lg md:text-xl text-slate-400 font-light max-w-2xl leading-relaxed min-h-[2rem]">
              <TypeWriter lines={["AI-to-AI negotiation at machine speed.", "Autonomous settlement. Zero friction.", "Game-theoretic equilibrium, on-chain.", "Secure. Transparent. Trustless."]} />
            </p>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-3 mt-2 w-full justify-center">
              <Link href="/dashboard" className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-lg font-bold text-[#070312] transition-all hover:scale-[1.03] hover:brightness-110" style={{ background:"#B7A6FB", boxShadow:"0 0 28px rgba(183,166,251,0.4)" }}>
                <Icon name="rocket_launch" className="text-xl" />
                Open Dashboard
              </Link>
              <Link href="/docs" className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-lg font-medium text-white border border-white/15 hover:border-white/40 hover:bg-white/5 transition-all">
                <Icon name="terminal" className="text-xl" />
                Read Documentation
              </Link>
            </div>

            {/* Code snippet */}
            <div className="mt-8 p-5 rounded-xl max-w-lg w-full text-left hover:rotate-0 transition-all duration-500 cursor-default" style={{ background:"rgba(0,0,0,0.5)", border:"1px solid rgba(255,255,255,0.08)", backdropFilter:"blur(12px)", transform:"rotate(1deg)" }}>
              <div className="flex gap-1.5 mb-4">
                <div className="size-3 rounded-full bg-red-500/50" /><div className="size-3 rounded-full bg-yellow-500/50" /><div className="size-3 rounded-full bg-green-500/50" />
              </div>
              <code className="font-mono text-xs md:text-sm leading-relaxed">
                <span className="text-[#B7A6FB]">const</span>
                <span className="text-slate-300"> negotiation = </span>
                <span className="text-[#22d3ee]">await</span>
                <span className="text-slate-300"> mesh.init({"{"}</span><br />
                <span className="text-slate-500">{"  "}strategy: </span><span className="text-emerald-400">'tit-for-tat'</span><span className="text-slate-500">,</span><br />
                <span className="text-slate-500">{"  "}limit: </span><span className="text-[#B7A6FB]">5000</span><span className="text-slate-500">,</span><br />
                <span className="text-slate-500">{"  "}currency: </span><span className="text-[#22d3ee]">'USDC'</span><br />
                <span className="text-slate-300">{"}"});</span>
              </code>
            </div>
          </div>
        </section>

        {/* Marquee */}
        <div className="w-full overflow-hidden py-4 border-y" style={{ background:"#0f0b1c", borderColor:"rgba(255,255,255,0.05)" }}>
          <div className="flex whitespace-nowrap marquee-track">
            {[...Array(2)].map((_, di) => (
              <div key={di} className="flex gap-12 items-center px-6 shrink-0">
                {[["RESOLVED","$1.2M IN EXPENSES","text-white"],["FAIRNESS SCORE","98%","text-emerald-400"],["ACTIVE NODES","14,203","text-[#22d3ee]"],["AVG SETTLEMENT","400MS","text-[#B7A6FB]"],["PROTOCOL","V2.0 STABLE","text-white"],["NEGOTIATIONS TODAY","3,841","text-amber-400"]].map(([label,value,cls],i) => (
                  <span key={i} className="text-slate-500 font-mono text-sm flex items-center gap-3">
                    {label}: <span className={`font-bold ${cls}`}>{value}</span><span className="text-slate-700 ml-3">•</span>
                  </span>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* Stats row */}
        <section className="py-16 px-6 border-b border-white/5">
          <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6">
            {[{ label:"Negotiations Settled", to:48291, suffix:"+" },{ label:"Avg Fairness Score", to:97, suffix:"%" },{ label:"Active Nodes", to:14203, suffix:"" },{ label:"Avg Settlement", to:400, suffix:"ms" }].map(({ label, to, suffix }) => (
              <div key={label} className="text-center">
                <div className="text-4xl font-black mb-1 tabular-nums" style={{ color:"#B7A6FB" }}><Counter to={to} suffix={suffix} /></div>
                <p className="text-xs text-slate-500 font-mono uppercase tracking-wider">{label}</p>
              </div>
            ))}
          </div>
        </section>

        {/* The Mesh in Action */}
        <section className="py-24 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
              <div>
                <h2 className="text-3xl font-bold text-white mb-2">The Mesh in Action</h2>
                <p className="text-slate-500 font-mono text-sm">Real-time settlement · Advanced Convergence Graph</p>
              </div>
              <div className="flex items-center gap-2">
                <span className="size-2.5 rounded-full bg-red-500 animate-pulse" />
                <span className="text-xs text-red-400 font-mono uppercase tracking-wide">Live Feed</span>
              </div>
            </div>

            <div className="rounded-2xl overflow-hidden border border-white/[0.08] relative" style={{ background:"#0d0a1a", boxShadow:"0 0 60px rgba(0,0,0,0.6)" }}>
              <div className="absolute inset-0 pointer-events-none" style={{ background:"linear-gradient(135deg,rgba(183,166,251,0.03),rgba(34,211,238,0.03))" }} />
              <div className="grid grid-cols-1 lg:grid-cols-3 min-h-[500px]">
                {/* Graph pane */}
                <div className="lg:col-span-2 relative p-6 flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-white/[0.08]" style={{ background:"#08051a", backgroundImage:"radial-gradient(rgba(183,166,251,0.06) 1px,transparent 1px)", backgroundSize:"20px 20px" }}>
                  <div className="scan-ln" />
                  <div className="flex gap-2 z-10 relative flex-wrap">
                    {[["GRAPH_ID: 8X92","#B7A6FB",true],["LATENCY: 12ms","#94a3b8",false],["ENTROPY: 0.041","#22d3ee",false]].map(([label,color,pulse]) => (
                      <span key={label as string} className="px-2 py-1 rounded text-[10px] font-mono flex items-center gap-1.5" style={{ background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.08)", color:color as string }}>
                        {pulse && <span className="size-1.5 rounded-full animate-ping" style={{ background:color as string }} />}
                        {label}
                      </span>
                    ))}
                  </div>
                  {/* Agent visualizer */}
                  <div className="flex-grow flex items-center justify-center relative py-8">
                    <div className="spin-s absolute" style={{ width:260, height:260, borderRadius:"50%", border:"1px solid rgba(183,166,251,0.2)" }} />
                    <div className="spin-r absolute" style={{ width:190, height:190, borderRadius:"50%", border:"1px dashed rgba(34,211,238,0.25)" }} />
                    <div className="absolute h-[2px] w-40" style={{ background:"linear-gradient(to right,#B7A6FB,#ffffff,#22d3ee)", boxShadow:"0 0 12px #B7A6FB" }} />
                    <div className="absolute flex items-center justify-center size-14 rounded-full font-bold z-10 -translate-x-20" style={{ background:"rgba(183,166,251,0.15)", border:"1.5px solid #B7A6FB", color:"#B7A6FB", boxShadow:"0 0 24px rgba(183,166,251,0.4)" }}>A</div>
                    <div className="absolute px-3 py-1 rounded-full text-[10px] font-mono text-white z-20" style={{ background:"rgba(0,0,0,0.8)", border:"1px solid rgba(255,255,255,0.2)", backdropFilter:"blur(8px)", top:"calc(50% - 60px)" }}>Consensus: 98%</div>
                    <div className="absolute flex items-center justify-center size-14 rounded-full font-bold z-10 translate-x-20" style={{ background:"rgba(34,211,238,0.15)", border:"1.5px solid #22d3ee", color:"#22d3ee", boxShadow:"0 0 24px rgba(34,211,238,0.4)" }}>B</div>
                  </div>
                  {/* Mini bars */}
                  <div className="h-16 w-full border-t border-white/[0.08] flex items-end justify-between gap-1 pt-3">
                    {[["#B7A6FB",0.2,16],["#B7A6FB",0.4,32],["#B7A6FB",0.3,24],["#B7A6FB",0.6,48],["#22d3ee",0.5,40],["#22d3ee",1.0,56],["#22d3ee",0.4,32],["#B7A6FB",1.0,48],["#B7A6FB",0.2,16]].map(([color,opacity,h],i) => (
                      <div key={i} className="w-1.5 rounded-sm" style={{ height:h as number, background:color as string, opacity:Number(opacity), boxShadow:Number(opacity)===1.0?`0 0 12px ${color}`:"none" }} />
                    ))}
                  </div>
                </div>
                {/* Log pane */}
                <div className="lg:col-span-1 p-6 flex flex-col" style={{ background:"#0c0919" }}>
                  <div className="flex items-center justify-between pb-4 mb-4" style={{ borderBottom:"1px solid rgba(255,255,255,0.08)" }}>
                    <h3 className="text-white font-bold text-sm">Negotiation Log</h3>
                    <span className="size-2 rounded-full bg-emerald-500" />
                  </div>
                  <NegotiationLog />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Core Features */}
        <section className="py-24 px-6" style={{ background:"#070312" }}>
          <div className="max-w-6xl mx-auto">
            <div className="mb-14">
              <p className="text-[11px] font-mono text-[#B7A6FB] uppercase tracking-widest mb-3">Why negoT8</p>
              <h2 className="text-4xl font-black text-white mb-4">Core Features</h2>
              <p className="text-slate-400 max-w-2xl">Designed for the next generation of autonomous commerce. Pure logic, zero friction.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
              <FeatureCard icon="psychology" title="Autonomous Negotiations" desc="Agents settle complex disputes without human intervention using game-theoretic equilibrium models and learned preference profiles." tag="Algorithmic · Trustless" accent="#B7A6FB" />
              <FeatureCard icon="groups" title="Multi-Party Resolution" desc="Scale beyond 1:1 interactions. Our mesh supports n-party consensus models for complex supply chain logistics and group expenses." tag="Scalable · N-Party" accent="#22d3ee" />
              <FeatureCard icon="visibility" title="Explainable Reasoning" desc="Black boxes are for amateurs. Every decision is traced, logged, and audited for fairness. Full auditability on every round." tag="Transparent · Auditable" accent="#a78bfa" />
              <FeatureCard icon="account_balance_wallet" title="Instant Settlement" desc="UPI and on-chain settlement in under 400ms. Funds move when consensus is reached — no waiting, no friction, no middlemen." tag="UPI · On-Chain" accent="#34d399" />
              <FeatureCard icon="record_voice_over" title="Voice Interface" desc="ElevenLabs-powered voice summaries for every negotiation outcome. Your agent communicates in natural language." tag="ElevenLabs · TTS" accent="#fbbf24" />
              <FeatureCard icon="send" title="Telegram Native" desc="Deploy agents directly from Telegram. Initiate negotiations, monitor live rounds, and receive settlements without leaving the app." tag="Telegram · Bot API" accent="#60a5fa" />
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-24 px-6 border-t border-white/5" style={{ background:"linear-gradient(to bottom,#070312,#0f0b1a)" }}>
          <div className="max-w-4xl mx-auto text-center">
            <div className="relative inline-flex items-center justify-center mb-10">
              <div className="absolute size-40 rounded-full" style={{ border:"1px solid rgba(183,166,251,0.1)", animation:"spinSlow 20s linear infinite" }} />
              <div className="absolute size-24 rounded-full" style={{ border:"1px dashed rgba(34,211,238,0.15)", animation:"spinRev 15s linear infinite" }} />
              <div className="size-16 rounded-2xl flex items-center justify-center" style={{ background:"rgba(183,166,251,0.12)", border:"1px solid rgba(183,166,251,0.25)" }}>
                <Icon name="hub" className="text-3xl text-[#B7A6FB]" />
              </div>
            </div>
            <h2 className="text-4xl md:text-5xl font-black text-white mb-5 leading-tight">Ready to join the mesh?</h2>
            <p className="text-slate-400 mb-10 max-w-xl mx-auto leading-relaxed">Start deploying agents in minutes. Join thousands of developers building the autonomous agent economy.</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <Link href="/dashboard" className="flex items-center gap-2 px-8 py-3.5 rounded-lg font-bold text-[#070312] transition-all hover:scale-[1.03] hover:-translate-y-0.5" style={{ background:"#B7A6FB", boxShadow:"0 0 28px rgba(183,166,251,0.35)" }}>
                <Icon name="dashboard" className="text-xl" />Open Dashboard
              </Link>
              <a href="https://t.me/" className="flex items-center gap-2 px-8 py-3.5 rounded-lg font-bold text-white border border-white/10 hover:border-white/30 hover:bg-white/5 transition-all" style={{ background:"rgba(34,159,217,0.12)" }}>
                <Icon name="send" className="text-xl" />Connect on Telegram
              </a>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="py-8 px-6 border-t border-white/[0.08]" style={{ background:"#070312" }}>
          <div className="max-w-7xl mx-auto flex flex-col items-center gap-4 text-center">
            <div className="flex items-center gap-2">
              <div className="size-6 rounded bg-gradient-to-br from-[#B7A6FB] to-[#22d3ee] flex items-center justify-center text-[#070312]"><Icon name="hub" className="text-xs" /></div>
              <span className="text-white font-bold text-sm">negoT8</span>
            </div>
            <div className="flex gap-6">
              {["Privacy","Terms","Status"].map((l) => <a key={l} href="#" className="text-xs text-slate-600 hover:text-white transition-colors">{l}</a>)}
            </div>
            <p className="text-xs text-slate-700 font-mono">© 2025 negoT8 Protocol. All systems nominal.</p>
          </div>
        </footer>

      </div>
    </>
  );
}
