import React, { useEffect } from 'react'
import ContentSection from '../components/ContentSection'
import CTAAndFooter from '../components/CTAAndFooter'
import HeroSection from '../components/HeroSection'
import FeatureHighlights from '../components/FeatureHighlights'
import FeaturesCarousel from '../components/FeaturesCarousel'
import TestimonialsSection from '../components/TestimonialsSection'
import '../../public/next-assets/css/main.css'

export default function Landing() {
  useEffect(() => {
    const s = document.createElement('script')
    s.src = '/next-assets/js/main.js'
    s.async = true
    document.body.appendChild(s)
    return () => { document.body.removeChild(s) }
  }, [])
  return (
    <div className="bg-white">
      <header className="bg-white py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
          <a href="/" className="text-2xl font-bold">AvanzaCast</a>
          <div className="space-x-4">
            <a href="/auth/login" className="text-gray-700">Accede</a>
            <a href="/auth/register" className="bg-blue-600 text-white px-4 py-2 rounded-lg">Empezamos</a>
          </div>
        </div>
      </header>

      <main>
        <HeroSection />
        <FeaturesCarousel />
        <FeatureHighlights />
        <ContentSection />
        <TestimonialsSection />
        <CTAAndFooter />
      </main>
    </div>
  )
}
