// VoxRiver Portfolio Website using React + Tailwind CSS
// This is a professional, modern portfolio structure designed to build trust and convert clients.

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { Sparkles } from "lucide-react";

const services = [
  "Copywriting",
  "Content Writing",
  "Podcast Script Writing",
  "Brand Storytelling",
  "E-book Writing",
  "High-Impact Marketing Content"
];

const sampleWorks = [
  { title: "Brand Story for Luxury Clothing Line", description: "Complete brand messaging revamp increasing sales by 30%." },
  { title: "Podcast Scripts for Tech Series", description: "40+ episodes with over 200k listeners." },
  { title: "SEO Blog Series", description: "Ranked Top 3 in Google within 2 months." }
];

const testimonials = [
  { name: "Sarah L.", quote: "VoxRiver completely transformed our brand voice. Highly recommend!" },
  { name: "David K.", quote: "Our podcast script quality skyrocketed with VoxRiver's help." }
];

export default function VoxRiverPortfolio() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-700 text-white font-sans">
      <header className="text-center py-16">
        <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }} className="text-5xl font-bold tracking-tight">
          Welcome to <span className="text-blue-400">VoxRiver</span>
        </motion.h1>
        <p className="mt-4 text-xl">Your Voice, Amplified Through Words</p>
      </header>

      <section className="py-12 px-6 md:px-20">
        <h2 className="text-3xl font-semibold mb-6">Our Services</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {services.map((service, idx) => (
            <Card key={idx} className="bg-gray-800">
              <CardContent className="p-6 text-lg flex items-center gap-2">
                <Sparkles className="text-blue-300" /> {service}
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="py-12 px-6 md:px-20 bg-gray-800">
        <h2 className="text-3xl font-semibold mb-6">Sample Work</h2>
        <div className="space-y-4">
          {sampleWorks.map((work, idx) => (
            <Card key={idx} className="bg-gray-700">
              <CardContent className="p-6">
                <h3 className="text-xl font-bold">{work.title}</h3>
                <p className="text-gray-300 mt-2">{work.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="py-12 px-6 md:px-20">
        <h2 className="text-3xl font-semibold mb-6">Testimonials</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {testimonials.map((t, idx) => (
            <Card key={idx} className="bg-gray-800">
              <CardContent className="p-6">
                <blockquote className="italic">"{t.quote}"</blockquote>
                <p className="mt-2 font-semibold">— {t.name}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="py-12 px-6 md:px-20 bg-gray-800">
        <h2 className="text-3xl font-semibold mb-6">About Us</h2>
        <p className="text-gray-300 max-w-3xl">
          At VoxRiver, we blend creativity with strategy to craft words that convert. Our team of experienced writers and brand storytellers works closely with clients to deliver tailor-made copy for brands, podcasts, products, and more. We believe in the power of words to shape perceptions and drive action.
        </p>
      </section>

      <section className="py-12 px-6 md:px-20">
        <h2 className="text-3xl font-semibold mb-6">Contact Us</h2>
        <form className="max-w-xl space-y-4">
          <input type="text" placeholder="Your Name" className="w-full p-3 rounded bg-gray-700 text-white" />
          <input type="email" placeholder="Your Email" className="w-full p-3 rounded bg-gray-700 text-white" />
          <textarea placeholder="Your Message" rows="5" className="w-full p-3 rounded bg-gray-700 text-white" />
          <Button className="bg-blue-500 hover:bg-blue-600 text-white w-full py-3 rounded">Send Message</Button>
        </form>
      </section>

      <footer className="py-6 text-center text-sm text-gray-400">
        © 2025 VoxRiver. All rights reserved.
      </footer>
    </div>
  );
}