import { useState } from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";

/* ----------------------
 SIMPLE ROUTE SYSTEM (SPA)
 Clean + SEO-ready structure simulation
---------------------- */

function Header({ setPage, page }) {
  const navItem = (name, key) => (
    <button
      onClick={() => setPage(key)}
      className={`hover:text-white transition ${page === key ? "text-white" : "text-white/70"}`}
    >
      {name}
    </button>
  );

  return (
    <div className="sticky top-0 z-50 backdrop-blur-xl bg-slate-950/60 flex justify-between items-center px-6 py-4 border-b border-white/10">
      <h1 className="font-bold text-xl">automationteammember</h1>
      <div className="space-x-5">
        {navItem("Home", "home")}
        {navItem("Pricing", "pricing")}
        {navItem("Blog", "blog")}
        {navItem("About", "about")}
        {navItem("Contact", "contact")}
      </div>
    </div>
  );
}

function ContactPage() {
  return (
    <div className="px-6 py-12 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">Contact Us</h1>
      <p className="text-white/60">We usually reply within 24 hours.</p>
    </div>
  );
}

function PricingPage() {
  const plans = [
    { name: "Free", price: "$0", features: ["1 audit per day"] },
    { name: "Pro", price: "$19", features: ["Unlimited audits", "PDF export"] },
    { name: "Agency", price: "$49", features: ["White label reports", "Client dashboard"] },
  ];

  return (
    <div className="px-6 py-12 max-w-6xl mx-auto">
      <h1 className="text-4xl font-bold text-center mb-10">Simple Pricing</h1>

      <div className="grid md:grid-cols-3 gap-6">
        {plans.map((p, i) => (
          <Card key={i} className="bg-white/5 border-white/10 backdrop-blur-xl">
            <CardContent className="p-6">
              <h2 className="text-xl font-bold">{p.name}</h2>
              <p className="text-3xl text-indigo-400 my-3">{p.price}</p>
              <ul className="text-white/70 space-y-1">
                {p.features.map((f, j) => (
                  <li key={j}>• {f}</li>
                ))}
              </ul>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function BlogPage() {
  const posts = Array.from({ length: 10 }).map((_, i) => ({
    title: `AI Automation Guide ${i + 1}`,
    desc: "Learn automation, AI tools, and SaaS growth strategies",
  }));

  return (
    <div className="px-6 py-12 max-w-6xl mx-auto">
      <h1 className="text-4xl font-bold text-center mb-3">AI Automation Blog</h1>
      <p className="text-center text-white/60 mb-10">Clean insights for scaling with AI</p>

      <div className="grid md:grid-cols-3 gap-6">
        {posts.map((p, i) => (
          <Card key={i} className="bg-white/5 border-white/10 hover:border-indigo-500 transition">
            <CardContent className="p-6">
              <Badge className="mb-2 bg-indigo-500">AI</Badge>
              <h2 className="font-bold mb-2">{p.title}</h2>
              <p className="text-white/70 text-sm">{p.desc}</p>
              <Button className="mt-4 w-full bg-indigo-500">Read</Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div className="px-6 py-12 max-w-3xl mx-auto">
      <h1 className="text-4xl font-bold mb-4">About Us</h1>
      <p className="text-white/70 leading-relaxed">
        automationteammember is a modern AI SaaS platform that helps users audit websites,
        improve SEO, and increase conversions using automation and AI insights.
      </p>
    </div>
  );
}

function HomePage({ url, setUrl, email, setEmail, auditType, setAuditType }) {
  return (
    <div className="px-6 py-16 text-center">
      <motion.h1 className="text-4xl md:text-6xl font-bold">
        AI Website Audit & SEO Analyzer
      </motion.h1>

      <p className="text-white/60 mt-4">
        Clean, fast and AI-powered insights for better conversions
      </p>

      <div className="mt-10 max-w-3xl mx-auto">
        <Card className="bg-white/5 border-white/10 backdrop-blur-xl">
          <CardContent className="p-6 grid md:grid-cols-2 gap-4">
            <Input placeholder="Website URL" value={url} onChange={(e) => setUrl(e.target.value)} />
            <Input placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />

            <select
              value={auditType}
              onChange={(e) => setAuditType(e.target.value)}
              className="md:col-span-2 bg-white/10 p-2 rounded text-white"
            >
              <option value="landing">Landing Page Audit</option>
              <option value="seo">SEO Audit</option>
            </select>

            <Button className="md:col-span-2 bg-indigo-500">
              Run AI Analysis
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default function App() {
  const [page, setPage] = useState("home");
  const [url, setUrl] = useState("");
  const [email, setEmail] = useState("");
  const [auditType, setAuditType] = useState("landing");

  const renderPage = () => {
    switch (page) {
      case "pricing": return <PricingPage />;
      case "blog": return <BlogPage />;
      case "about": return <AboutPage />;
      case "contact": return <ContactPage />;
      default:
        return (
          <HomePage
            url={url}
            setUrl={setUrl}
            email={email}
            setEmail={setEmail}
            auditType={auditType}
            setAuditType={setAuditType}
          />
        );
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white">
      <Header setPage={setPage} page={page} />
      {renderPage()}
    </div>
  );
}