import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default function SoftGlowBestieLanding() {
  return (
    <div className="p-6 space-y-12 max-w-4xl mx-auto text-center">
      <section className="space-y-4">
        <h1 className="text-4xl font-bold">Your AI Bestie for That “Clean Girl” Glow</h1>
        <p className="text-lg text-muted-foreground">
          Glow up your skincare game with a dreamy, personalized AI that knows <em>exactly</em> what your skin needs — and how to help you shine.
        </p>
        <Button className="text-lg px-6 py-3 mt-4">✨ Try Soft Glow Bestie Now</Button>
      </section>

      <Card className="bg-pink-50">
        <CardContent className="p-6 space-y-4">
          <h2 className="text-2xl font-semibold">Meet Soft Glow Bestie</h2>
          <p>
            Your custom ChatGPT assistant for dreamy skincare support. Personalized tips, curated product picks, and self-care routines — always on, always glowing.
          </p>
          <ul className="text-left list-disc list-inside space-y-2">
            <li>Tailored skincare tips</li>
            <li>Dreamy product recommendations</li>
            <li>Routines that *actually* work</li>
          </ul>
        </CardContent>
      </Card>

      <section className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {["Personalized Glow Plan", "Product Picks You’ll Obsess Over", "Self-Care, Simplified", "Always-On Support"].map((title, i) => (
          <Card key={i}>
            <CardContent className="p-4 space-y-2">
              <h3 className="text-xl font-semibold">{title}</h3>
              <p>
                {[
                  "Tailored advice based on your skin type, lifestyle, and aesthetic — no generic routines here.",
                  "Curated skincare products that fit your vibe and goals. No more endless scrolling.",
                  "Confidence-boosting rituals you’ll actually stick to — feel pampered & aligned.",
                  "Available 24/7 for those midnight skincare emergencies or Sephora runs."
                ][i]}
              </p>
            </CardContent>
          </Card>
        ))}
      </section>

      <section className="bg-white border rounded-2xl p-6 shadow-sm space-y-4">
        <h2 className="text-2xl font-semibold">Trusted & Loved</h2>
        <p>
          Created by skincare enthusiast Ramon McCullough. Built with OpenAI's trusted ChatGPT. Loved by thousands chasing that dreamy glow.
        </p>
        <blockquote className="italic text-muted-foreground">“It’s like having a skincare influencer in your pocket — but one who actually listens.” – Jasmine L.</blockquote>
      </section>

      <section className="bg-pink-100 rounded-2xl p-6 space-y-4">
        <h2 className="text-2xl font-semibold">Free to Start. Luxe Results.</h2>
        <p>
          Unlock your glow journey for $0 — just log into ChatGPT and start chatting with your new AI bestie. Instant access. Dreamy value.
        </p>
        <Button className="text-lg px-6 py-3">💖 Chat with Soft Glow Bestie Now</Button>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">FAQs</h2>
        {[
          ["Do I need to install anything?", "Nope! Just log into ChatGPT and start chatting."],
          ["Is this really personalized?", "Yes! She adapts to your skin type, goals, and preferences."],
          ["Can she recommend actual products?", "Totally — you’ll get specific, on-brand skincare recs."],
          ["Is it free?", "100% free to access via ChatGPT. Just bring your skincare dreams."]
        ].map(([q, a], i) => (
          <div key={i}>
            <h3 className="font-semibold">{q}</h3>
            <p className="text-muted-foreground">{a}</p>
          </div>
        ))}
      </section>
    </div>
  );
}