import Link from 'next/link'
import { Header } from '@/components/Header'
import { EcosystemFooter } from '@/components/EcosystemFooter'

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
      {/* Nav */}
      <Header
        current="funds"
        actions={
          <>
            <Link
              href="/tbff"
              className="text-sm text-slate-300 hover:text-white transition-colors"
            >
              Demo
            </Link>
            <Link
              href="/space"
              className="text-sm px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg transition-colors font-medium"
            >
              Create Space
            </Link>
          </>
        }
      />

      {/* Hero */}
      <section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-amber-300 via-emerald-300 to-blue-300 bg-clip-text text-transparent">
            Threshold-Based Flow Funding
          </h1>
          <p className="text-xl text-slate-300 mb-8 leading-relaxed">
            Design continuous funding flows that respond dynamically to threshold conditions.
            Connect funnels, set overflow rules, and track outcomes in real-time.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Link
              href="/tbff"
              className="px-6 py-3 bg-slate-700 hover:bg-slate-600 rounded-xl text-lg font-medium transition-all border border-slate-600"
            >
              Try the Demo
            </Link>
            <Link
              href="/space"
              className="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-emerald-900/30"
            >
              Create Your Own
            </Link>
          </div>
        </div>
      </section>

      {/* How it Works */}
      <section className="max-w-6xl mx-auto px-6 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {/* Funnel Card */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">Create Funnels</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              Each funnel represents a funding pool with three zones: overflow (above max),
              healthy (between thresholds), and critical (below min). Set thresholds by
              dragging handles.
            </p>
          </div>

          {/* Flow Card */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">Connect Flows</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              Connect funnels with overflow edges (sideways) so excess funds automatically
              route to other pools. Add spending edges (downward) to fund outcomes and
              deliverables.
            </p>
          </div>

          {/* Simulate Card */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">Simulate & Share</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              Run simulations to see how funds flow through your system. Watch edge widths
              scale proportionally. Save your space locally and share it with a link.
            </p>
          </div>
        </div>
      </section>

      {/* Funnel Diagram */}
      <section className="max-w-6xl mx-auto px-6 py-16">
        <div className="bg-slate-800/30 rounded-2xl border border-slate-700/50 p-8">
          <h2 className="text-2xl font-bold mb-8 text-center">The Funnel Metaphor</h2>
          <div className="max-w-md mx-auto">
            {/* ASCII-art style funnel */}
            <div className="font-mono text-sm space-y-0 text-center">
              <div className="text-amber-400">
                <div className="bg-amber-500/10 border border-amber-500/30 rounded-t-xl px-8 py-3">
                  <div className="font-semibold">OVERFLOW ZONE</div>
                  <div className="text-xs text-amber-300">Above MAX threshold</div>
                  <div className="text-xs text-amber-300/70">Excess funds redistribute to other funnels</div>
                </div>
              </div>
              <div className="text-xs text-amber-500 font-bold border-b-2 border-dashed border-amber-500/50 py-1 bg-amber-500/5">
                -- MAX THRESHOLD --
              </div>
              <div className="text-emerald-400">
                <div className="bg-emerald-500/10 border-x border-emerald-500/30 px-8 py-4">
                  <div className="font-semibold">HEALTHY ZONE</div>
                  <div className="text-xs text-emerald-300">Normal operations</div>
                  <div className="text-xs text-emerald-300/70">Full flow rate, balanced funding</div>
                </div>
              </div>
              <div className="text-xs text-red-500 font-bold border-b-2 border-dashed border-red-500/50 py-1 bg-red-500/5">
                -- MIN THRESHOLD --
              </div>
              <div className="text-slate-400">
                <div className="bg-slate-700/30 border border-slate-600/30 rounded-b-xl px-8 py-3 clip-funnel">
                  <div className="font-semibold text-red-400">CRITICAL ZONE</div>
                  <div className="text-xs text-red-300">Below MIN threshold</div>
                  <div className="text-xs text-slate-500">Outflow restricted, conservation mode</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-6xl mx-auto px-6 py-16 text-center">
        <h2 className="text-3xl font-bold mb-4">Ready to design your funding flows?</h2>
        <p className="text-slate-400 mb-8 max-w-lg mx-auto">
          Start with the interactive demo or create your own space with custom funnels and connections.
        </p>
        <Link
          href="/space"
          className="inline-block px-8 py-4 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-emerald-900/30"
        >
          Create Your Space
        </Link>
      </section>

      {/* Footer */}
      <EcosystemFooter current="rFunds" />
    </div>
  )
}