import { ComparisonCards } from "@/components/ComparisonCards";
import { ComparisonSlider } from "@/components/ComparisonSlider";
import { ContactCTA } from "@/components/ContactCTA";
import { Hero } from "@/components/Hero";
import { SectionHeader } from "@/components/SectionHeader";
import { VideoSection } from "@/components/VideoSection";

export default function Page() {
  return (
    <main className="w-full">
      <Hero 
        title="Turn Your Cables Into Pure Art"
        subtitle1="Why settle for boring cable photos when you can have jaw-dropping 3D visuals? We make your products look so good, they practically sell themselves."
        subtitle2="Forget expensive photo shoots and prototypes. We create stunning visuals from just your specs – and yeah, we're that good at it."
        primaryButtonText="Request a Quote"
        primaryButtonLink="/contact"
        secondaryButtonText="Learn How It Works"
        secondaryButtonLink="#how-it-works"
        videoSrc="/animations/cables/ymekrvaslqwd-fca-1x-al_tower_v01_s01_horizontal_c03.4k.webm"
      />

      <section id="how-it-works" className="py-24 container mx-auto px-4">
        <SectionHeader 
          label="WHAT IS 3D VISUALIZATION?"
          title="See It to Understand It"
          description="3D visualization creates photorealistic images of products before they're even built. It's like having a crystal ball for your products – but way more useful."
        />

        <ComparisonSlider 
          beforeImage="/img/cable-comparison/na2xsfl2y-drawing.png"
          afterImage="/img/cable-comparison/na2xsfl2y-rendered.png"
        />

        <div className="mt-32">
          <SectionHeader 
            label="COMPARISON"
            title="Traditional Photography vs. 3D Visualization"
            description="Understanding the fundamental differences and advantages."
          />

          <ComparisonCards 
            traditionalImage="/img/industry-standard/NA2XS(F)2Y-6_10kV,12_20kV,1.png"
            visualizationImage="/img/cable-comparison/na2xsfl2y-rendered.png"
            points={[
              { traditional: "Requires physical products", visualization: "Creates images before physical production" },
              { traditional: "Limited to what exists in reality", visualization: "Shows products in any environment or scenario" },
              { traditional: "Needs studio setup, lighting, photographers", visualization: "Can be modified instantly (colors, materials, angles)" }
            ]}
          />
        </div>
      </section>

      <VideoSection 
        title="Dynamic Cable Animations"
        description="Captivate your audience with eye-catching 3D animations that bring your cable products to life, perfect for marketing, trade shows, and digital campaigns."
        videoSrc="/animations/cables/na2xsfl2y-helix.webm"
        features={[
          "Brand integration",
          "Visual storytelling",
          "Attention-grabbing",
          "Multi-platform use"
        ]}
      />



      <ContactCTA 
        title="Have a Question or Project Idea?"
        description="We'd love to hear from you. Reach out to discuss your 3D modeling needs or get a custom quote."
        buttonText="Contact Us"
        buttonLink="/contact"
      />
    </main>
  );
}
