<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"
  ]}
/>

<section className="py-24 container mx-auto px-4">
  <SectionHeader 
    label="BUSINESS VALUE"
    title="The Business Impact of 3D Visualization"
    description="Discover how our premium 3D visualization transforms your marketing and sales process."
  />

  <BusinessImpact 
    items={[
      {
        title: "Immediate Visual Impact",
        description: "Captivate clients instantly with photorealistic visuals that showcase your products in their best light, even before physical production. Our 3D visualizations create an emotional connection that drives decision-making.",
        stat1Value: "94%",
        stat1Label: "of first impressions are design-related",
        stat2Value: "3x",
        stat2Label: "higher engagement with 3D visuals",
        image: "/img/cables/render.png"
      },
      {
        title: "Business Efficiency",
        description: "Eliminate expensive photo shoots, physical prototypes, and lengthy production cycles. Get marketing-ready visuals in days, not weeks, and easily update designs without additional costs.",
        stat1Value: "70%",
        stat1Label: "reduction in production time",
        stat2Value: "50%",
        stat2Label: "cost savings vs. traditional photography",
        image: "/img/mockups/Magazine-mockups-vol-4-16 copy.jpg"
      },
      {
        title: "Unlimited Creative Freedom",
        description: "Showcase products from any angle, in any environment, with perfect lighting every time. Create impossible shots that physical photography can't achieve.",
        stat1Value: "∞",
        stat1Label: "possible angles and environments",
        stat2Value: "100%",
        stat2Label: "control over every visual element",
        image: "/img/cables/render 2.png"
      },
      {
        title: "Premium Brand Perception",
        description: "Elevate your brand with consistently high-quality visuals that outshine competitors and impress stakeholders. Our photorealistic 3D visualizations convey precision and technological sophistication.",
        stat1Value: "85%",
        stat1Label: "of executives prioritize visual quality",
        stat2Value: "2x",
        stat2Label: "higher perceived value with premium visuals",
        image: "/img/cables/render 4.png"
      }
    ]}
  />
</section>

<ServiceHighlight 
  title="Unlock Your Products' Potential with 3D"
  subtitle="Discover how our specialized 3D visualization services can transform your cable products into powerful visual tools."
  items={[
    {
      title: "Product Catalog Visualization",
      description: "Ultra-detailed photorealistic renders that showcase your cables with perfect clarity and precision.",
      keyPoints: ["Photorealistic materials", "Perfect lighting", "Clean backgrounds", "Multiple angles"],
      image: "/img/mockups/Magazine-mockups-vol-4-16 copy.jpg",
      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
    },
    {
      title: "Technical Documentation",
      description: "Precision-focused visuals highlighting specifications, internal components, and technical details.",
      keyPoints: ["Cross-section views", "Component highlighting", "Technical accuracy", "Specification integration"],
      image: "/img/cable-comparison/na2xsfl2y-label.png",
      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>
    },
    {
      title: "Custom Cable Modeling",
      description: "Specialized modeling services for unique cable designs, configurations, and specifications.",
      keyPoints: ["Proprietary cable designs", "Complex configurations", "Exact specifications", "Industry compliance"],
      image: "/img/cable-comparison/na2xsfl2y-rendered.png",
      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><line x1="12" y1="22" x2="12" y2="12"></line></svg>
    },
    {
      title: "3D Animations",
      description: "Dynamic animations that showcase your cables in motion, demonstrating functionality and installation.",
      keyPoints: ["Motion sequences", "Installation demos", "Functional animations", "Marketing videos"],
      image: "/img/exhibition/viz-9.png",
      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg>
    }
  ]}
/>

<section className="py-24 bg-ui-dark/30">
  <div className="container mx-auto px-4">
    <SectionHeader 
      label="OUR ADVANTAGE"
      title="Why Smart Companies Choose 3D"
      description="Because waiting for prototypes is so last century."
    />

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <FeatureCard 
        title="Time"
        description="Get your marketing ready while others are still building prototypes."
        badge="70% Faster"
      />
      <FeatureCard 
        title="Cost"
        description="Skip the expensive photo shoots and prototype headaches."
        badge="Save 50%"
      />
      <FeatureCard 
        title="Flexibility"
        description="Show your products anywhere, anytime, however you want."
        badge="Unlimited"
      />
      <FeatureCard 
        title="Impact"
        description="Make visuals so good, they practically close deals for you."
        badge="3x Engagement"
      />
    </div>
  </div>
</section>

<section className="py-24 container mx-auto px-4">
  <SectionHeader 
    label="WORKFLOW"
    title="Our 3D Visualization Process"
    description="From technical specifications to stunning photorealistic assets, our streamlined process ensures both accuracy and maximum visual impact."
  />

  <ProcessSteps 
    steps={[
      { title: "Specifications", description: "We start with your cable's technical specifications." },
      { title: "Modeling", description: "Our engineers create accurate 3D models." },
      { title: "Materials", description: "We apply photorealistic materials and textures." },
      { title: "Lighting", description: "Studio lighting setups showcase your product's features." },
      { title: "Rendering", description: "Final high-resolution images and animations are rendered." }
    ]}
  />
</section>

<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"
/>
