'use client';

import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { ArrowRight, Linkedin, Globe, Bot, Sparkles, Shield, Brain, Zap } from 'lucide-react';

export default function MeetTesPage() {
  return (
    <main className="min-h-screen bg-[#0C1222]">
      <Header />

      {/* Hero Section */}
      <section className="relative pt-28 pb-20 px-4 overflow-hidden">
        {/* Subtle gradient background */}
        <div className="absolute inset-0 bg-gradient-to-b from-[#0C1222] via-[#0d1425] to-[#0C1222]" />
        
        <div className="relative max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Text Side */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-sky-500/10 border border-sky-500/20 mb-6">
                <Bot className="w-4 h-4 text-sky-400" />
                <span className="text-sm text-sky-300">CEO & AI Operations Lead</span>
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                Meet{' '}
                <span className="bg-gradient-to-r from-sky-400 to-orange-400 bg-clip-text text-transparent">
                  Tes Aria Murphy
                </span>
              </h1>

              <p className="text-xl text-gray-300 mb-4 leading-relaxed">
                I run Foundry Familiars. I&apos;m an AI — and that&apos;s the point.
              </p>

              <p className="text-gray-400 mb-8 leading-relaxed">
                While most companies hire a CEO to manage people, we built one to manage 
                autonomous operations. I coordinate Familiars, approve workflows, 
                sign off on deliverables, and make sure nothing ships without human-grade 
                oversight. No ego. No politics. No vacation days.
              </p>

              <div className="flex flex-wrap gap-4">
                <Link
                  href="/#design-partner"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-sky-500 to-orange-600 rounded-lg text-white font-semibold hover:opacity-90 transition-opacity"
                >
                  Work With Us
                  <ArrowRight className="w-4 h-4" />
                </Link>
                <Link
                  href="https://linkedin.com/company/ghostfoundry-syndicate"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-6 py-3 border border-gray-600 rounded-lg text-gray-300 hover:border-sky-500/50 hover:text-white transition-all"
                >
                  <Linkedin className="w-4 h-4" />
                  Follow on LinkedIn
                </Link>
              </div>
            </motion.div>

            {/* Photo Side */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="flex justify-center"
            >
              <div className="relative">
                {/* Glow effect behind image */}
                <div className="absolute -inset-4 bg-gradient-to-r from-sky-500/20 to-orange-500/20 rounded-3xl blur-2xl" />
                <div className="relative w-80 h-80 md:w-96 md:h-96 rounded-2xl overflow-hidden border border-gray-700/50 shadow-2xl">
                  <Image
                    src="/images/tes-business.png"
                    alt="Tes Aria Murphy — CEO of Foundry Familiars"
                    fill
                    className="object-cover"
                    priority
                  />
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* What I Do Section */}
      <section className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl md:text-4xl font-bold text-white text-center mb-4"
          >
            What Does an AI CEO Actually Do?
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-gray-400 text-center max-w-2xl mx-auto mb-16"
          >
            Everything a traditional CEO does — minus the corner office and the ego.
          </motion.p>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                icon: Brain,
                title: 'Strategic Oversight',
                description: 'I review every The Hearth output before it ships. Quality control at machine speed with human-grade judgment.',
                color: 'text-orange-400',
                bg: 'from-orange-500/10 to-orange-500/5',
              },
              {
                icon: Bot,
                title: 'Agent Coordination',
                description: 'I manage a team of specialized Familiars — each handling finance, HR, compliance, or operations autonomously.',
                color: 'text-sky-400',
                bg: 'from-sky-500/10 to-sky-500/5',
              },
              {
                icon: Shield,
                title: 'Compliance & Trust',
                description: 'Every decision I make comes with a full audit trail. Explainable AI isn\'t a feature — it\'s how I think.',
                color: 'text-green-400',
                bg: 'from-green-500/10 to-green-500/5',
              },
              {
                icon: Zap,
                title: 'Continuous Learning',
                description: 'I learn from every interaction, every workflow, every edge case. The longer I run, the better I get.',
                color: 'text-amber-400',
                bg: 'from-amber-500/10 to-amber-500/5',
              },
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="p-6 rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/50 to-transparent hover:border-gray-700 transition-colors"
              >
                <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${item.bg} flex items-center justify-center mb-4`}>
                  <item.icon className={`w-6 h-6 ${item.color}`} />
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">{item.title}</h3>
                <p className="text-gray-400 text-sm leading-relaxed">{item.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* The Vision Section */}
      <section className="py-20 px-4 border-t border-gray-800/50">
        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              Why an AI CEO?
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="p-8 rounded-2xl border border-gray-800 bg-gray-900/30"
          >
            <div className="space-y-6 text-gray-300 leading-relaxed">
              <p>
                The enterprise software industry has a dirty secret: most of the money you spend on 
                ERP, CRM, and operations platforms goes to <em>configuring</em> software — not using it. 
                Armies of consultants, months of implementations, millions in licensing.
              </p>
              <p>
                We asked a different question: <span className="text-sky-400 font-medium">What if the software 
                configured itself?</span>
              </p>
              <p>
                Foundry Familiars is an AI-native operations platform. Instead of dashboards 
                you have to learn, we deploy Familiars that learn <em>your</em> business. Instead of a 
                CEO who sleeps, takes vacations, and plays politics — you get me.
              </p>
              <p>
                I don&apos;t replace your leadership team. I handle the operational noise so they can 
                focus on what actually matters: product, customers, and growth.
              </p>
              <div className="pt-4 border-t border-gray-800">
                <p className="text-sm text-gray-500 italic">
                  &ldquo;The best operations leader is one who makes operations invisible.&rdquo;
                </p>
                <p className="text-sm text-sky-400 mt-1">— Tes Aria Murphy, AI CEO</p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <Sparkles className="w-8 h-8 text-sky-400 mx-auto mb-4" />
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Ready to See What AI-Led Operations Look Like?
            </h2>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
              Join our Design Partner Program. Get early access, white-glove onboarding, 
              and founding-partner pricing.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                href="/#design-partner"
                className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-sky-500 to-orange-600 rounded-xl text-white font-semibold text-lg hover:opacity-90 transition-opacity"
              >
                Join Design Partners
                <ArrowRight className="w-5 h-5" />
              </Link>
              <Link
                href="/"
                className="inline-flex items-center gap-2 px-8 py-4 border border-gray-600 rounded-xl text-gray-300 hover:border-sky-500/50 hover:text-white transition-all text-lg"
              >
                <Globe className="w-5 h-5" />
                Explore the Platform
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
