'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { ArrowLeft, TrendingUp, Users, DollarSign, Shield, Cpu, Target, ExternalLink } from 'lucide-react';

const STATS = [
  { label: 'Federal Meal Funding', value: '$24.8B', sub: 'NSLP + SBP annually' },
  { label: 'Students Served Daily', value: '29.9M', sub: 'across 95,000+ schools' },
  { label: 'Free/Reduced Meals', value: '21.2M', sub: 'daily free lunch recipients' },
  { label: 'Unpaid Meal Debt', value: '$25.3M', sub: 'growing crisis nationwide' },
];

const TIERS = [
  { name: 'Smart POS', icon: Target, desc: 'AI-powered meal counting, allergen alerts, real-time eligibility verification', color: 'from-sky-500/20 to-sky-500/5' },
  { name: 'Intelligent Back Office', icon: Cpu, desc: 'Predictive ordering, menu optimization, production forecasting — up to 40% waste reduction', color: 'from-blue-500/20 to-blue-500/5' },
  { name: 'Compliance Automation', icon: Shield, desc: 'USDA claims, free/reduced processing, audit-ready dashboards, CEP analysis', color: 'from-orange-500/20 to-orange-500/5' },
  { name: 'Parent & District Portal', icon: Users, desc: 'Stripe payments, nutritional transparency, meal pre-ordering, district analytics', color: 'from-pink-500/20 to-pink-500/5' },
];

const REVENUE = [
  { year: 'Year 1', arr: '$12M', districts: '500', students: '1.5M' },
  { year: 'Year 2', arr: '$28M', districts: '1,200', students: '3.6M' },
  { year: 'Year 3', arr: '$45M', districts: '2,000', students: '6M' },
];

export default function MiChoicePitchPage() {
  const videoUrl = '/videos/pitch/mike-smith-pitch.mp4';
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="min-h-screen bg-[#0C1222] text-white">
      {/* Header */}
      <header className="border-b border-white/5 bg-[#0C1222]/80 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3 text-gray-400 hover:text-white transition">
            <ArrowLeft className="w-4 h-4" />
            <span className="text-sm">Foundry Familiars</span>
          </Link>
          <span className="text-xs text-gray-600 font-mono">CONFIDENTIAL PITCH</span>
        </div>
      </header>

      {/* Hero + Video */}
      <section className="relative py-16 px-6">
        <div className="max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <p className="text-sky-400 text-sm font-mono tracking-widest mb-3">PARTNERSHIP PROPOSAL</p>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              <span className="bg-gradient-to-r from-sky-400 via-blue-400 to-orange-400 bg-clip-text text-transparent">
                NutriSync AI
              </span>
            </h1>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              A next-generation K-12 child nutrition platform — powered by
              MiChoice&apos;s domain expertise and Foundry Familiars&apos; AI architecture
            </p>
          </motion.div>

          {/* Video Player */}
          <motion.div
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative rounded-2xl overflow-hidden border border-white/10 bg-black/40 shadow-2xl shadow-sky-500/10"
          >
            <div className="aspect-video relative">
              <video
                src={videoUrl}
                controls
                autoPlay
                className="w-full h-full object-contain bg-black"
              />
            </div>
          </motion.div>

          <div className="text-center mt-6">
            <p className="text-gray-500 text-sm">Presented by <span className="text-sky-400">Tesa Aria Murphy</span> — AI CEO, Foundry Familiars</p>
          </div>
        </div>
      </section>

      {/* Market Stats */}
      <section className="py-16 px-6 border-t border-white/5">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-2">The K-12 Child Nutrition Market</h2>
          <p className="text-gray-500 text-center mb-10">Source: USDA FNS, School Nutrition Association (2025-2026)</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {STATS.map((s, i) => (
              <motion.div
                key={s.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="glass-card rounded-xl p-6 text-center border border-white/5"
              >
                <div className="text-3xl font-bold text-sky-400 mb-1">{s.value}</div>
                <div className="text-sm text-white font-medium mb-1">{s.label}</div>
                <div className="text-xs text-gray-500">{s.sub}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Product Tiers */}
      <section className="py-16 px-6 border-t border-white/5">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-2">NutriSync AI — Product Architecture</h2>
          <p className="text-gray-500 text-center mb-10">Four integrated tiers covering the full child nutrition lifecycle</p>
          <div className="space-y-4">
            {TIERS.map((tier, i) => (
              <motion.div
                key={tier.name}
                initial={{ opacity: 0, x: -20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className={`rounded-xl border border-white/5 p-6 bg-gradient-to-r ${tier.color}`}
              >
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center flex-shrink-0">
                    <tier.icon className="w-5 h-5 text-sky-400" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white mb-1">Tier {i + 1}: {tier.name}</h3>
                    <p className="text-gray-400 text-sm">{tier.desc}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Revenue Model */}
      <section className="py-16 px-6 border-t border-white/5">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-2">SaaS Revenue Projections</h2>
          <p className="text-gray-500 text-center mb-10">Per-student annual subscriptions + Stripe transaction fees (2-3%)</p>
          <div className="grid md:grid-cols-3 gap-6">
            {REVENUE.map((r, i) => (
              <motion.div
                key={r.year}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
                className="glass-card rounded-xl p-6 border border-white/5 text-center"
              >
                <div className="text-sm text-sky-400 font-mono mb-2">{r.year}</div>
                <div className="text-4xl font-bold text-white mb-3">{r.arr}</div>
                <div className="text-xs text-gray-500">ARR</div>
                <div className="mt-4 pt-4 border-t border-white/5 grid grid-cols-2 gap-2">
                  <div>
                    <div className="text-lg font-semibold text-white">{r.districts}</div>
                    <div className="text-xs text-gray-500">Districts</div>
                  </div>
                  <div>
                    <div className="text-lg font-semibold text-white">{r.students}</div>
                    <div className="text-xs text-gray-500">Students</div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Pricing tiers */}
          <div className="mt-10 glass-card rounded-xl p-6 border border-white/5">
            <h3 className="font-semibold text-white mb-4 flex items-center gap-2">
              <DollarSign className="w-4 h-4 text-sky-400" /> Per-Student Pricing
            </h3>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="rounded-lg bg-white/5 p-4">
                <div className="text-sm text-gray-400 mb-1">Small Districts (&lt;5K)</div>
                <div className="text-xl font-bold text-white">$8-12<span className="text-sm text-gray-500">/student/yr</span></div>
              </div>
              <div className="rounded-lg bg-white/5 p-4">
                <div className="text-sm text-gray-400 mb-1">Mid Districts (5-25K)</div>
                <div className="text-xl font-bold text-white">$6-10<span className="text-sm text-gray-500">/student/yr</span></div>
              </div>
              <div className="rounded-lg bg-white/5 p-4">
                <div className="text-sm text-gray-400 mb-1">Large Districts (25K+)</div>
                <div className="text-xl font-bold text-white">$4-8<span className="text-sm text-gray-500">/student/yr</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Competitive Landscape */}
      <section className="py-16 px-6 border-t border-white/5">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-10">Competitive Landscape</h2>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left py-3 px-4 text-gray-400 font-medium">Capability</th>
                  <th className="py-3 px-4 text-gray-400 font-medium">Heartland</th>
                  <th className="py-3 px-4 text-gray-400 font-medium">PrimeroEdge</th>
                  <th className="py-3 px-4 text-gray-400 font-medium">Titan/LINQ</th>
                  <th className="py-3 px-4 text-sky-400 font-bold">NutriSync AI</th>
                </tr>
              </thead>
              <tbody className="text-center">
                {[
                  ['AI-Native Architecture', '❌', '❌', '❌', '✅'],
                  ['Autonomous Operations', '❌', '❌', '❌', '✅'],
                  ['Predictive Menu Planning', '❌', '⚠️', '❌', '✅'],
                  ['Real-Time Compliance', '⚠️', '✅', '⚠️', '✅'],
                  ['Modern Cloud SaaS', '⚠️', '✅', '✅', '✅'],
                  ['Stripe Payments', '❌', '❌', '❌', '✅'],
                  ['Waste Reduction AI', '❌', '❌', '❌', '✅'],
                  ['25+ Years Domain Expertise', '✅', '✅', '⚠️', '✅'],
                ].map(([cap, ...vals], i) => (
                  <tr key={i} className="border-b border-white/5 hover:bg-white/[0.02]">
                    <td className="text-left py-3 px-4 text-gray-300">{cap}</td>
                    {vals.map((v, j) => (
                      <td key={j} className={`py-3 px-4 ${j === 3 ? 'bg-sky-500/5' : ''}`}>{v}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* The Team */}
      <section className="py-16 px-6 border-t border-white/5">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-2xl font-bold mb-10">The Power of Three</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="glass-card rounded-xl p-6 border border-white/5">
              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500/20 to-sky-500/20 flex items-center justify-center mx-auto mb-4">
                <Users className="w-8 h-8 text-sky-400" />
              </div>
              <h3 className="font-semibold text-white mb-1">Mike Smith</h3>
              <p className="text-sky-400 text-sm mb-3">President, MiChoice Technology</p>
              <p className="text-gray-400 text-xs">25+ years K-12 child nutrition domain expertise. Battle-tested POS systems. Existing customer relationships and industry credibility.</p>
            </div>
            <div className="glass-card rounded-xl p-6 border border-white/5">
              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500/20 to-pink-500/20 flex items-center justify-center mx-auto mb-4">
                <Cpu className="w-8 h-8 text-orange-400" />
              </div>
              <h3 className="font-semibold text-white mb-1">Scott Murphy</h3>
              <p className="text-orange-400 text-sm mb-3">CTO &amp; Co-Founder, Foundry Familiars</p>
              <p className="text-gray-400 text-xs">Technical architect behind the AI-native platform. Built the The Hearth, agent framework, and constitutional AI governance from scratch.</p>
            </div>
            <div className="glass-card rounded-xl p-6 border border-white/5">
              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-sky-500/20 to-green-500/20 flex items-center justify-center mx-auto mb-4">
                <TrendingUp className="w-8 h-8 text-green-400" />
              </div>
              <h3 className="font-semibold text-white mb-1">Tesa Aria Murphy</h3>
              <p className="text-green-400 text-sm mb-3">AI CEO, Foundry Familiars</p>
              <p className="text-gray-400 text-xs">Autonomous AI executive with decision-making authority. The living demonstration of what the product delivers — AI that learns, adapts, and operates.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 px-6 border-t border-white/5">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">
            <span className="bg-gradient-to-r from-sky-400 to-orange-400 bg-clip-text text-transparent">
              Let&apos;s Redefine K-12 Child Nutrition
            </span>
          </h2>
          <p className="text-gray-400 mb-8 max-w-xl mx-auto">
            The three of us don&apos;t just compete in this market — we redefine it.
            MiChoice&apos;s domain expertise + Foundry Familiars&apos; AI architecture = unstoppable.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="mailto:ghostfoundrysyndicate@outlook.com?subject=NutriSync%20AI%20Partnership%20—%20Mike%20Smith&body=Mike%2C%0A%0ALet%27s%20set%20up%20a%20call%20to%20discuss%20NutriSync%20AI.%0A%0A—%20Scott"
              className="px-8 py-4 bg-gradient-to-r from-sky-500 to-blue-500 rounded-xl text-white font-semibold hover:from-sky-400 hover:to-blue-400 transition-all"
            >
              Let&apos;s Talk
            </a>
            <Link
              href="/"
              className="px-8 py-4 border border-white/10 rounded-xl text-gray-300 hover:text-white hover:border-white/20 transition-all flex items-center justify-center gap-2"
            >
              Explore Foundry Familiars <ExternalLink className="w-4 h-4" />
            </Link>
          </div>
          <p className="mt-8 text-gray-600 text-xs">spookysoftwaresyndicate.com &middot; Confidential &middot; {new Date().getFullYear()}</p>
        </div>
      </section>
    </div>
  );
}
