import React from "react";
import { motion } from "framer-motion";
import { Rocket, ShieldCheck, CreditCard, GraduationCap, Scale, CheckCircle2, ArrowRight, Headset } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

// Simple utility components
const Section = ({ id, children, className = "" }) => (
  <section id={id} className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${className}`}>{children}</section>
);

const GlassCard = ({ children, className = "" }) => (
  <Card className={`backdrop-blur-xl bg-white/10 border-white/20 shadow-xl rounded-2xl ${className}`}>
    <CardContent className="p-6">{children}</CardContent>
  </Card>
);

const bullets = [
  "Done‑for‑you funnels and automated follow‑ups",
  "Recurring revenue systems that work year‑round",
  "Guided setup with experts who’ve built six‑figure firms",
  "Compliance and legal guardrails so you scale safely",
];

const features = [
  {
    icon: <Rocket className="w-6 h-6" />, title: "All‑in‑One Software",
    body: "Log in and go—no tech headaches. File faster, manage your team virtually, and maximize revenue from day one.",
  },
  {
    icon: <Headset className="w-6 h-6" />, title: "Automated Marketing",
    body: "Stop chasing leads. Get a steady flow of qualified clients with done‑for‑you funnels, outreach, and nurture systems.",
  },
  {
    icon: <CreditCard className="w-6 h-6" />, title: "Launch Financing",
    body: "No capital? Not a problem. Secure $25k+ in flexible funding so you can start strong without draining savings.",
  },
  {
    icon: <GraduationCap className="w-6 h-6" />, title: "1:1 Coaching & Training",
    body: "Your personal Tax GPS. Get real‑time feedback, step‑by‑step support, and the blueprint to win faster and smarter.",
  },
  {
    icon: <ShieldCheck className="w-6 h-6" />, title: "IRS Compliance & Legal",
    body: "Build something that lasts. Stay compliant, avoid costly mistakes, and operate audit‑ready with confidence.",
  },
  {
    icon: <Scale className="w-6 h-6" />, title: "Resolution Revenue",
    body: "Go beyond basic returns—solve garnishments, back taxes, audits, and more to unlock larger fees and lifelong clients.",
  },
];

export default function TaxLaunchLandingPage() {
  return (
    <div className="min-h-screen text-white relative overflow-x-hidden">
      {/* Background */}
      <div className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-[#0b1020] via-[#0b1020] to-[#0e0620]"/>
      <div className="pointer-events-none absolute -top-40 -left-40 h-[520px] w-[520px] rounded-full bg-gradient-to-tr from-cyan-500/30 to-fuchsia-500/30 blur-3xl"></div>
      <div className="pointer-events-none absolute -bottom-40 -right-40 h-[520px] w-[520px] rounded-full bg-gradient-to-tr from-fuchsia-500/30 to-cyan-500/30 blur-3xl"></div>

      {/* Nav */}
      <nav className="sticky top-0 z-40 backdrop-blur-md bg-black/30 border-b border-white/10">
        <Section className="py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Rocket className="w-6 h-6 text-cyan-400" />
            <span className="font-semibold tracking-tight">Tax Launch</span>
          </div>
          <div className="hidden md:flex items-center gap-6 text-sm">
            <a href="#program" className="hover:text-cyan-300">Program</a>
            <a href="#pillars" className="hover:text-cyan-300">Pillars</a>
            <a href="#results" className="hover:text-cyan-300">Results</a>
            <a href="#pricing" className="hover:text-cyan-300">Pricing</a>
            <a href="#faq" className="hover:text-cyan-300">FAQ</a>
          </div>
          <div className="flex items-center gap-3">
            <a href="#apply"><Button size="sm" className="bg-cyan-500 hover:bg-cyan-400 text-black font-semibold rounded-xl">Apply Now</Button></a>
          </div>
        </Section>
      </nav>

      {/* Hero */}
      <Section id="program" className="py-20 lg:py-28">
        <div className="grid lg:grid-cols-2 gap-10 items-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
            <div className="inline-flex items-center gap-2 text-xs font-medium px-3 py-1 rounded-full bg-white/10 border border-white/20 mb-4">
              <BoltIcon />
              <span>Launch a Six‑Figure Tax Firm</span>
            </div>
            <h1 className="text-3xl sm:text-5xl font-black leading-tight tracking-tight">
              From filing returns to <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-fuchsia-400">running the show</span>.
            </h1>
            <p className="mt-5 text-lg text-white/80 max-w-2xl">
              Build and launch a profitable, year‑round tax business without compliance anxiety. Our done‑for‑you, step‑by‑step game plan turns IRS nightmares into paydays and installs recurring revenue systems that run while you sleep.
            </p>
            <div className="mt-8 flex flex-col sm:flex-row gap-4">
              <a href="#apply"><Button size="lg" className="bg-cyan-500 hover:bg-cyan-400 text-black font-semibold rounded-xl">
                Get Started <ArrowRight className="ml-2 w-4 h-4" />
              </Button></a>
              <a href="#pillars"><Button variant="outline" size="lg" className="rounded-xl border-white/30 text-white hover:bg-white/10">
                See How It Works
              </Button></a>
            </div>
            <ul className="mt-8 grid sm:grid-cols-2 gap-3 text-sm text-white/80">
              {bullets.map((b, i) => (
                <li key={i} className="flex items-start gap-2"><CheckCircle2 className="mt-0.5 w-4 h-4 text-cyan-400"/><span>{b}</span></li>
              ))}
            </ul>
          </motion.div>
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: 0.1 }}>
            <GlassCard className="">
              <div className="aspect-video rounded-xl bg-gradient-to-br from-cyan-500/20 to-fuchsia-500/20 border border-white/10 flex items-center justify-center">
                <div className="text-center p-8">
                  <p className="text-2xl font-semibold">Your Personal Tax GPS</p>
                  <p className="mt-2 text-white/80">Guided setup · Automation · Compliance · Resolution Revenue</p>
                  <div className="mt-6">
                    <Button className="rounded-xl bg-white text-black hover:bg-white/90">Play Overview (Coming Soon)</Button>
                  </div>
                </div>
              </div>
            </GlassCard>
          </motion.div>
        </div>
      </Section>

      {/* Pillars */}
      <Section id="pillars" className="py-10 lg:py-16">
        <h2 className="text-2xl sm:text-4xl font-extrabold tracking-tight text-center">The Tax Launch Pillars</h2>
        <p className="text-center text-white/70 mt-3 max-w-3xl mx-auto">Everything you need to launch, grow, and scale a tax firm that earns year‑round.</p>

        <div className="mt-10 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((f, idx) => (
            <motion.div key={idx} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.4, delay: idx * 0.06 }}>
              <GlassCard>
                <div className="flex items-center gap-3">
                  <div className="p-2 rounded-xl bg-white/10 border border-white/10">
                    {f.icon}
                  </div>
                  <h3 className="text-lg font-semibold">{f.title}</h3>
                </div>
                <p className="mt-3 text-white/80">{f.body}</p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </Section>

      {/* Results / Resolution */}
      <Section id="results" className="py-10 lg:py-16">
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          <div>
            <h2 className="text-2xl sm:text-4xl font-extrabold tracking-tight">Turn IRS problems into profit</h2>
            <p className="mt-4 text-white/80">Become the go‑to expert for garnishments, back taxes, audits, and more—without needing to be a CPA. Unlock larger fees, build lifelong clients, and resolve serious tax issues on autopilot.</p>
            <ul className="mt-6 grid sm:grid-cols-2 gap-3 text-sm text-white/80">
              {[
                "High‑value resolution services",
                "Proven case workflows",
                "Templates & checklists included",
                "Year‑round revenue engine",
              ].map((b, i) => (
                <li key={i} className="flex items-start gap-2"><CheckCircle2 className="mt-0.5 w-4 h-4 text-fuchsia-400"/><span>{b}</span></li>
              ))}
            </ul>
          </div>
          <GlassCard>
            <div className="grid grid-cols-2 gap-4">
              <Stat label="Avg. Case Value" value="$3k–$10k+"/>
              <Stat label="Setup Time" value="< 14 days"/>
              <Stat label="Lead Response" value="> 5× faster"/>
              <Stat label="Nurture Touches" value="100% automated"/>
            </div>
          </GlassCard>
        </div>
      </Section>

      {/* Pricing / CTA */}
      <Section id="pricing" className="py-10 lg:py-16">
        <h2 className="text-2xl sm:text-4xl font-extrabold tracking-tight text-center">Pick your path</h2>
        <p className="text-center text-white/70 mt-3 max-w-3xl mx-auto">Apply today. Financing available. Build a legally sound, automated, six‑figure firm—fast.</p>
        <div className="mt-10 grid lg:grid-cols-3 gap-6">
          <Plan
            name="Starter"
            tagline="Everything to launch"
            price="$497/mo"
            bullets={[
              "All‑in‑one software access",
              "Core funnels + automations",
              "Templates & checklists",
              "Community Q&A",
            ]}
          />
          <Plan
            highlight
            name="Pro"
            tagline="Scale with confidence"
            price="$997/mo"
            bullets={[
              "Everything in Starter",
              "1:1 Coaching (monthly)",
              "Resolution workflows",
              "Brand kit + landing pages",
            ]}
          />
          <Plan
            name="Elite"
            tagline="Done‑with‑you acceleration"
            price="$1,997/mo"
            bullets={[
              "Everything in Pro",
              "Weekly coaching",
              "Compliance review",
              "Launch financing concierge",
            ]}
          />
        </div>
        <div className="text-center mt-8">
          <a href="#apply"><Button size="lg" className="bg-cyan-500 hover:bg-cyan-400 text-black font-semibold rounded-xl">Apply Now</Button></a>
        </div>
      </Section>

      {/* Apply / Form */}
      <Section id="apply" className="py-10 lg:py-16">
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          <div>
            <h2 className="text-2xl sm:text-4xl font-extrabold tracking-tight">Tell us about your goals</h2>
            <p className="mt-3 text-white/80">We’ll review your application and map the fastest route to your first six‑figure year—one IRS case at a time.</p>
            <ul className="mt-6 space-y-2 text-white/80 text-sm">
              <li className="flex gap-2 items-start"><CheckCircle2 className="mt-0.5 w-4 h-4 text-cyan-400"/><span>5‑minute application</span></li>
              <li className="flex gap-2 items-start"><CheckCircle2 className="mt-0.5 w-4 h-4 text-cyan-400"/><span>Financing options available</span></li>
              <li className="flex gap-2 items-start"><CheckCircle2 className="mt-0.5 w-4 h-4 text-cyan-400"/><span>Launch plan delivered on your kickoff call</span></li>
            </ul>
          </div>
          <GlassCard>
            {/* HubSpot form embed slot */}
            <div className="space-y-4">
              <label className="block text-sm font-medium">Full Name</label>
              <input className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/15 outline-none focus:ring-2 focus:ring-cyan-400" placeholder="Jane Doe" />
              <label className="block text-sm font-medium">Email</label>
              <input type="email" className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/15 outline-none focus:ring-2 focus:ring-cyan-400" placeholder="jane@firm.com" />
              <label className="block text-sm font-medium">Current Status</label>
              <select className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/15 outline-none focus:ring-2 focus:ring-cyan-400">
                <option>Exploring</option>
                <option>Starting now</option>
                <option>Growing existing firm</option>
              </select>
              <label className="block text-sm font-medium">Biggest Goal</label>
              <textarea rows={4} className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/15 outline-none focus:ring-2 focus:ring-cyan-400" placeholder="Tell us what six‑figure success looks like for you…" />
              <Button className="w-full rounded-xl bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">Submit Application</Button>
              <p className="text-xs text-white/60">By submitting, you agree to be contacted about Tax Launch. You can unsubscribe anytime.</p>
            </div>
          </GlassCard>
        </div>
      </Section>

      {/* FAQ */}
      <Section id="faq" className="py-10 lg:py-20">
        <h2 className="text-2xl sm:text-4xl font-extrabold tracking-tight text-center">Frequently Asked Questions</h2>
        <div className="mt-8 grid md:grid-cols-2 gap-6">
          <Faq q="Do I need prior tax experience?" a="It helps, but it’s not required. We give you the software, workflows, and coaching to launch and grow quickly."/>
          <Faq q="Is financing really available?" a="Yes—most applicants can secure $25k+ to fund launch costs and initial growth, subject to approval."/>
          <Faq q="How fast can I launch?" a="Many members complete setup within 14 days and start closing resolution cases shortly after."/>
          <Faq q="Will you help with compliance?" a="Absolutely. Our team keeps you audit‑ready and legally protected as you scale."/>
        </div>
      </Section>

      {/* Footer */}
      <footer className="border-t border-white/10 py-10">
        <Section className="flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="text-white/70 text-sm">© {new Date().getFullYear()} Tax Launch • All rights reserved.</div>
          <div className="flex items-center gap-6 text-sm text-white/70">
            <a href="#program" className="hover:text-white">Program</a>
            <a href="#pillars" className="hover:text-white">Pillars</a>
            <a href="#apply" className="hover:text-white">Apply</a>
            <a href="#" className="hover:text-white">Terms</a>
            <a href="#" className="hover:text-white">Privacy</a>
          </div>
        </Section>
      </footer>
    </div>
  );
}

function Plan({ name, tagline, price, bullets, highlight }) {
  return (
    <GlassCard className={`relative ${highlight ? "ring-2 ring-cyan-400" : ""}`}>
      {highlight && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 text-xs bg-cyan-500 text-black font-semibold px-3 py-1 rounded-full">Most Popular</div>
      )}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-xl font-semibold">{name}</h3>
          <p className="text-white/70 text-sm">{tagline}</p>
        </div>
        <div className="text-right">
          <div className="text-2xl font-bold">{price}</div>
          <div className="text-xs text-white/60">Financing available</div>
        </div>
      </div>
      <ul className="mt-4 space-y-2 text-sm">
        {bullets.map((b, i) => (
          <li key={i} className="flex items-start gap-2">
            <CheckCircle2 className="mt-0.5 w-4 h-4 text-cyan-400"/>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <Button className="mt-6 w-full rounded-xl bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">Choose {name}</Button>
    </GlassCard>
  );
}

function Faq({ q, a }) {
  return (
    <GlassCard>
      <div className="text-base font-semibold">{q}</div>
      <p className="mt-2 text-white/80 text-sm">{a}</p>
    </GlassCard>
  );
}

function Stat({ label, value }) {
  return (
    <div className="rounded-2xl bg-white/5 border border-white/10 p-5">
      <div className="text-xs uppercase tracking-wider text-white/60">{label}</div>
      <div className="mt-1 text-2xl font-bold">{value}</div>
    </div>
  );
}

function BoltIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4 text-cyan-400">
      <path d="M11 21h-1l1-7H7l6-11h1l-1 7h4l-6 11z" />
    </svg>
  );
}