import { Button } from "@/components/ui/button"
import { ArrowRight, BarChart2, BookOpen, PieChart, RefreshCw, GraduationCap, Users, Star } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useEffect, useRef } from "react"

export default function LandingPage() {
  const brokerLogosRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const scrollLogos = () => {
      if (brokerLogosRef.current) {
        if (brokerLogosRef.current.scrollLeft >= brokerLogosRef.current.scrollWidth / 2) {
          brokerLogosRef.current.scrollLeft = 0
        } else {
          brokerLogosRef.current.scrollLeft += 1
        }
      }
    }

    const intervalId = setInterval(scrollLogos, 30)
    return () => clearInterval(intervalId)
  }, [])

  return (
    <div className="flex flex-col min-h-screen">
      <header className="px-4 lg:px-6 h-16 flex items-center justify-between">
        <Link className="flex items-center justify-center" href="#">
          <BookOpen className="h-6 w-6" />
          <span className="sr-only">TradeJournal</span>
        </Link>
        <nav className="flex items-center gap-4 sm:gap-6">
          <Link className="text-sm font-medium hover:underline underline-offset-4" href="#features">
            Features
          </Link>
          <Link className="text-sm font-medium hover:underline underline-offset-4" href="#testimonials">
            Testimonials
          </Link>
          <Link className="text-sm font-medium hover:underline underline-offset-4" href="#pricing">
            Pricing
          </Link>
          <Button>Get Started</Button>
        </nav>
      </header>
      <main className="flex-1">
        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-4 text-center">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                  Powerful and Automated Trade Journaling
                </h1>
                <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                  You focus on trading while we focus on helping you get better. With automated journaling, we do the heavy lifting for you.
                </p>
              </div>
              <div className="space-x-4">
                <Button>Get Started <ArrowRight className="ml-2 h-4 w-4" /></Button>
                <Button variant="outline">Learn More</Button>
              </div>
            </div>
          </div>
        </section>
        <section className="w-full py-12 bg-gray-100 dark:bg-gray-800">
          <div className="container px-4 md:px-6">
            <h2 className="text-2xl font-bold text-center mb-8">Broker Integrations</h2>
            <div ref={brokerLogosRef} className="flex overflow-hidden space-x-8 whitespace-nowrap">
              {[
                "/placeholder.svg?height=40&width=150",
                "/placeholder.svg?height=40&width=150",
                "/placeholder.svg?height=40&width=150",
                "/placeholder.svg?height=40&width=150",
                "/placeholder.svg?height=40&width=150",
                "/placeholder.svg?height=40&width=150",
              ].map((src, index) => (
                <Image
                  key={index}
                  src={src}
                  alt={`Broker ${index + 1}`}
                  width={150}
                  height={40}
                  className="object-contain"
                />
              ))}
            </div>
          </div>
        </section>
        <section id="features" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <FeatureCard
                icon={<BookOpen className="h-10 w-10" />}
                title="Journal"
                description="Easily log your trades and thoughts with our user-friendly interface."
              />
              <FeatureCard
                icon={<BarChart2 className="h-10 w-10" />}
                title="Analytics"
                description="Gain insights into your trading patterns and performance metrics."
              />
              <FeatureCard
                icon={<PieChart className="h-10 w-10" />}
                title="Reporting"
                description="Generate comprehensive reports to track your progress over time."
              />
              <FeatureCard
                icon={<RefreshCw className="h-10 w-10" />}
                title="Backtesting"
                description="Test your strategies against historical data to refine your approach."
              />
              <FeatureCard
                icon={<GraduationCap className="h-10 w-10" />}
                title="Education"
                description="Access a wealth of educational resources to improve your trading skills."
              />
              <FeatureCard
                icon={<Users className="h-10 w-10" />}
                title="Mentoring"
                description="Get personalized guidance from experienced traders to accelerate your growth."
              />
            </div>
          </div>
        </section>
        <section id="testimonials" className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">What Traders Say</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <TestimonialCard
                quote="TradeJournal has completely transformed my trading strategy. I can now easily track my progress and identify areas for improvement."
                author="Alex T."
                role="Forex Trader"
              />
              <TestimonialCard
                quote="The analytics provided by TradeJournal are second to none. It's like having a personal trading coach."
                author="Sarah L."
                role="Stock Trader"
              />
              <TestimonialCard
                quote="I've tried many trading journals, but TradeJournal stands out with its clean interface and powerful features."
                author="Mike R."
                role="Crypto Trader"
              />
            </div>
          </div>
        </section>
        <section id="pricing" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">Simple Pricing</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <PricingCard
                title="Basic"
                price="$9.99"
                features={["Basic journaling", "Performance metrics", "1 year data retention"]}
              />
              <PricingCard
                title="Pro"
                price="$19.99"
                features={["Advanced analytics", "Trade replay", "Unlimited data retention"]}
                highlighted={true}
              />
              <PricingCard
                title="Enterprise"
                price="Custom"
                features={["Custom integrations", "Dedicated support", "Team collaboration"]}
              />
            </div>
          </div>
        </section>
      </main>
      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
        <p className="text-xs text-gray-500 dark:text-gray-400">© 2024 TradeJournal. All rights reserved.</p>
        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
          <Link className="text-xs hover:underline underline-offset-4" href="#">
            Terms of Service
          </Link>
          <Link className="text-xs hover:underline underline-offset-4" href="#">
            Privacy
          </Link>
        </nav>
      </footer>
    </div>
  )
}

function FeatureCard({ icon, title, description }) {
  return (
    <div className="flex flex-col items-center text-center">
      <div className="mb-4">{icon}</div>
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <p className="text-gray-500 dark:text-gray-400">{description}</p>
    </div>
  )
}

function TestimonialCard({ quote, author, role }) {
  return (
    <div className="flex flex-col items-center text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
      <div className="flex mb-4">
        {[...Array(5)].map((_, i) => (
          <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
        ))}
      </div>
      <p className="italic mb-4">"{quote}"</p>
      <p className="font-bold">{author}</p>
      <p className="text-sm text-gray-500 dark:text-gray-400">{role}</p>
      <p className="text-sm text-yellow-400 mt-2">5/5</p>
    </div>
  )
}

function PricingCard({ title, price, features, highlighted = false }) {
  return (
    <div className={`flex flex-col p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg ${highlighted ? 'ring-2 ring-blue-500' : ''}`}>
      <h3 className="text-2xl font-bold mb-4">{title}</h3>
      <p className="text-4xl font-bold mb-6">{price}<span className="text-sm font-normal">/month</span></p>
      <ul className="mb-6 space-y-2">
        {features.map((feature, index) => (
          <li key={index} className="flex items-center">
            <ArrowRight className="h-4 w-4 mr-2 text-green-500" />
            {feature}
          </li>
        ))}
      </ul>
      <Button className={highlighted ? 'bg-blue-500 hover:bg-blue-600' : ''}>
        Get Started
      </Button>
    </div>
  )
}

i have this coed, im extremely new to programming, i have vscode installed and an account in github. how do i run it and start program please, help me step by step