Hero Section

import { HeroSection } from "@/components/ui/hero-section";
import { Mountain, Facebook, Twitter, Instagram } from "lucide-react";

export default function HeroSectionDemo() {
  // Data for the component props
  const navLinks = [
    { href: "#", label: "About Us" },
    { href: "#", label: "Store" },
    { href: "#", label: "Offers" },
    { href: "#", label: "Blog" },
  ];

  const socialIcons = [
    {
      href: "#",
      label: "Facebook",
      icon: <Facebook className="h-5 w-5 text-muted-foreground" />,
    },
    {
      href: "#",
      label: "Twitter",
      icon: <Twitter className="h-5 w-5 text-muted-foreground" />,
    },
    {
      href: "#",
      label: "Instagram",
      icon: <Instagram className="h-5 w-5 text-muted-foreground" />,
    },
  ];

  const logo = (
    <>
      <Mountain className="h-8 w-8 text-foreground" />
      <span className="font-bold text-lg tracking-wider uppercase">Mountain</span>
    </>
  );

  const title = (
    <>
      Let's hike and <span className="block font-extrabold">breathe!</span>
    </>
  );

  return (
    <div className="w-full">
      <HeroSection
        logo={logo}
        navLinks={navLinks}
        socialIcons={socialIcons}
        title={title}
        subtitle="Learn more about our packs!"
        formLabel="Subscribe to our newsletter and get special offers!"
        inputPlaceholder="Your Email"
        submitButtonText="SUBMIT"
        imageUrl="https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=2070&auto=format&fit=crop"
        imageAlt="Hiker on a mountain trail during sunset"
      />
    </div>
  );
}