import MinimalistHero from "@/components/home-components/MinimalistHero";

/** 1) Solid color */
<MinimalistHero
  backgroundType="color"
  backgroundValue="#111827"
  height="min-h-[60vh]"
  className="text-white"
>
  <h1 className="text-4xl md:text-5xl font-bold">Solid Color Hero</h1>
  <p className="mt-3 text-lg text-white/80">Fundal simplu, setat prin culoare.</p>
</MinimalistHero>

/** 2) Gradient (Tailwind classes) */
<MinimalistHero
  backgroundType="gradient"
  backgroundValue="bg-gradient-to-r from-yellow-500 via-pink-500 to-purple-600"
  height="min-h-[60vh]"
  className="text-white"
>
  <h1 className="text-4xl md:text-5xl font-bold">Gradient Hero</h1>
  <p className="mt-3 text-lg text-white/90">Clasa Tailwind în backgroundValue.</p>
</MinimalistHero>

/** 3) Image + overlay */
<MinimalistHero
  backgroundType="image"
  backgroundValue="/bgimagetest.png"
  height="min-h-[60vh]"
  className="text-white"
  overlay="tint"
/>
  <h1 className="text-4xl md:text-5xl font-bold">Image Hero</h1>
  <p className="mt-3 text-lg text-white/90">Overlay de tip 'tint' pentru contrast.</p>
</MinimalistHero>

/** 4) Video + overlay gradient */
<MinimalistHero
  backgroundType="video"
  backgroundValue="https://v1.pinimg.com/videos/mc/hls/fd/4b/dd/fd4bdd2ab0f900b2222badaf0bb5b236.m3u8"
  height="min-h-[60vh]"
  className="text-white"
  overlay="gradient"
>
  <h1 className="text-4xl md:text-5xl font-bold">Video Hero</h1>
  <p className="mt-3 text-lg text-white/90">Autoplay + gradient pentru lizibilitate.</p>
</MinimalistHero>

import HeroWithTwoSections from "@/components/home-components/HeroWithTwoSections";

/** 1) Image background + gradient overlay */
<HeroWithTwoSections
  backgroundType="image"
  backgroundValue="/bgimagetest.png"
  overlay="gradient"
  height="min-h-[70vh]"
  sectionGapClass="gap-10 md:gap-16"
  left={{
    title: "Build faster",
    subtitle: "Ship UI in hours, not weeks.",
    buttons: [
      { label: "Get started", href: "/get-started", variant: "primary" },
      { label: "Docs", href: "/docs", variant: "ghost" },
    ],
    textColorClass: "text-white",
    contentBgType: "glass",
    align: "left",
  }}
  right={{
    media: { type: "image", src: "/softeneerscool.png", alt: "Softeneers", className: "h-36 w-36" },
    title: "Softeneers Framework",
    subtitle: "Next.js + Tailwind components",
    textColorClass: "text-white",
    align: "center",
  }}
/>

/** 2) Video background + tint overlay, reverse on desktop */
<HeroWithTwoSections
  backgroundType="video"
  backgroundValue="https://v1.pinimg.com/videos/mc/hls/fd/4b/dd/fd4bdd2ab0f900b2222badaf0bb5b236.m3u8"
  overlay="tint"
  height="min-h-[65vh]"
  reverseOnDesktop
  left={{
    title: "Design beautifully",
    subtitle: "New themes, faster workflow",
    buttons: [{ label: "Try it", href: "/try", variant: "secondary" }],
    textColorClass: "text-white",
    align: "right",
  }}
  right={{
    media: { type: "video", src: "/demo-loop.mp4" },
    title: "Live preview",
    subtitle: "See it in action",
    textColorClass: "text-white",
    align: "center",
  }}
/>

/** 3) Solid color background + per-section colors */
<HeroWithTwoSections
  backgroundType="color"
  backgroundValue="bg-neutral-950"
  height="min-h-[60vh]"
  sectionGapClass="gap-8 md:gap-12"
  left={{
    title: "All-in-one UI kit",
    subtitle: "A curated set of building blocks",
    textColorClass: "text-white",
    buttons: [{ label: "Explore", href: "/components", variant: "primary" }],
    align: "left",
  }}
  right={{
    title: "Powered by Next.js",
    subtitle: "Optimized for performance",
    textColorClass: "text-white/90",
    contentBgType: "color",
    contentBgValue: "bg-white/5",
    align: "center",
  }}
/>

import AboutCard from "@/components/home-components/AboutCard";

/** 1) Implicit (light) */
<AboutCard
  title="Who we are"
  description="Construim componente rapide, accesibile și elegante."
  imageUrl="/bgimagetest.png"
/>

/** 2) Dark section + white card */
<AboutCard
  title="Our mission"
  description="UI impecabil în ore, nu săptămâni."
  imageUrl="/bgimagetest.png"
  bgColor="bg-neutral-950"
  textColor="text-black"
  cardColor="bg-white"
/>

/** 3) Colored section + colored card */
<AboutCard
  title="What we do"
  description="Next.js + Tailwind, API clar și flexibil."
  imageUrl="/softeneerscool.png"
  bgColor="bg-amber-50"
  textColor="text-amber-900"
  cardColor="bg-amber-100"
/>

import AboutCentered from "@/components/home-components/AboutCentered";

// Light
<AboutCentered
  title="Who we are"
  subtitle="About us"
  description="Construim experiențe UI rapide și plăcute, cu unelte moderne și atenție la detaliu."
  imageSrc="/softeneerscool.png"
  bgColor="bg-white"
  textColor="text-gray-900"
  subtitleColor="text-indigo-600"
/>

// Dark
<AboutCentered
  title="Crafted for speed"
  subtitle="Our mission"
  description="Componente tip-safe, accesibile, ușor de compus. Focus pe DX și performanță."
  imageSrc="/bgimagetest.png"
  bgColor="bg-neutral-950"
  textColor="text-white"
  subtitleColor="text-amber-400"
/>

// Gradient
<AboutCentered
  title="Design that scales"
  subtitle="Principles"
  description="Sisteme de design flexibile, reutilizabile, adaptate pentru echipe mici și mari."
  imageSrc="/softeneerscool.png"
  bgColor="bg-gradient-to-r from-indigo-600 via-violet-600 to-fuchsia-600"
  textColor="text-white"
  subtitleColor="text-white"
/>

import AboutSplit from "@/components/home-components/AboutSplit";

/** Light */
<AboutSplit
  title="About Softeneers"
  subtitle="Who we are"
  description="Construim componente Next.js + Tailwind rapid personalizabile."
  imageSrc="/softeneerscool.png"
  ctaText="Learn more"
  onCtaClick={() => alert('CTA clicked')}
  bgColor="bg-white"
  textColor="text-gray-900"
  subtitleColor="text-indigo-600"
  ctaBgColor="bg-indigo-600"
  ctaHoverBgColor="hover:bg-indigo-700"
/>

/** Dark */
<AboutSplit
  title="Built for speed"
  subtitle="Performance-first"
  description="Arhitectură atent gândită, styling previzibil și API coerent."
  imageSrc="/bgimagetest.png"
  ctaText="Get started"
  onCtaClick={() => console.log('Start')}
  bgColor="bg-neutral-950"
  textColor="text-white"
  subtitleColor="text-amber-400"
  ctaBgColor="bg-amber-500"
  ctaHoverBgColor="hover:bg-amber-600"
/>

/** Gradient */
<AboutSplit
  title="Design that feels effortless"
  subtitle="Modern UX"
  description="Layout-uri prietenoase, adaptabile, preset-uri ușor de extins."
  imageSrc="/bgimagetest.png"
  ctaText="Explore components"
  onCtaClick={() => console.log('Explore')}
  bgColor="bg-gradient-to-r from-indigo-600 via-violet-600 to-fuchsia-600"
  textColor="text-white"
  subtitleColor="text-white/90"
  ctaBgColor="bg-white/20"
  ctaHoverBgColor="hover:bg-white/30"
/>

import ContactFormCard from "@/components/home-components/ContactFormCard";

/** Varianta implicită (RO) */
<ContactFormCard />

/** Etichete și mesaje ENG */
<ContactFormCard
  title="Get in touch"
  description="Fill in the form and we will reach back shortly."
  nameLabel="Name"
  emailLabel="Email"
  messageLabel="Your message"
  submitLabel="Send"
  successMessage="Your message was sent successfully!"
  errorMessage="Something went wrong. Please try again."
/>

/** Mesaje mai lungi */
<ContactFormCard
  title="Suport &amp; Întrebări"
  description="Completează câmpurile cu cât mai multe detalii. Revenim rapid."
  submitLabel="Trimite mesajul"
  successMessage="Mulțumim! Am înregistrat mesajul."
  errorMessage="A apărut o eroare. Încearcă din nou."
/>

/** Culori personalizate pentru text */
<ContactFormCard
  title="Contact Sales"
  description="Let us know what you need and we’ll reach out."
  titleColor="text-indigo-700"
  descriptionColor="text-slate-600"
  labelColor="text-slate-700"
  inputTextColor="text-slate-900"
/>

/** Fundaluri personalizate (container & card) */
<ContactFormCard
  title="Suport nocturn"
  description="Scrie-ne oricând. Răspundem rapid."
  containerBgColor="bg-slate-900"
  cardBgColor="bg-slate-800"
  titleColor="text-white"
  descriptionColor="text-slate-300"
  labelColor="text-slate-300"
  inputTextColor="text-white"
/>

import ContactFormCentered from "@/components/home-components/ContactFormCentered";

/** Varianta implicită */
<ContactFormCentered />

/** Etichete RO */
<ContactFormCentered
  title="Contactează-ne"
  description="Completează formularul și revenim în scurt timp."
  nameLabel="Nume"
  emailLabel="Email"
  messageLabel="Mesaj"
  buttonText="Trimite"
/>

/** Temă dark */
<ContactFormCentered
  title="Suport nocturn"
  description="Suntem disponibili și noaptea."
  containerBgColor="bg-slate-900"
  cardBgColor="bg-slate-800"
  titleColor="text-white"
  descriptionColor="text-slate-300"
  labelColor="text-slate-300"
  inputTextColor="text-white"
  inputBorderColor="border-slate-600"
  inputFocusRingColor="focus:ring-indigo-500"
  buttonBgColor="bg-indigo-600"
  buttonHoverBgColor="hover:bg-indigo-700"
  buttonTextColor="text-white"
/>

/** Temă brand (accent verde) */
<ContactFormCentered
  title="Talk to Sales"
  description="Tell us about your needs and we’ll reach out."
  containerBgColor="bg-emerald-50"
  cardBgColor="bg-white"
  titleColor="text-emerald-900"
  descriptionColor="text-emerald-700"
  labelColor="text-emerald-900"
  inputTextColor="text-emerald-900"
  inputBorderColor="border-emerald-300"
  inputFocusRingColor="focus:ring-emerald-500"
  buttonBgColor="bg-emerald-600"
  buttonHoverBgColor="hover:bg-emerald-700"
  buttonTextColor="text-white"
/>

import ContactFormSplit from "@/components/home-components/ContactFormSplit";

/** Varianta implicită */
<ContactFormSplit />

/** RO + accent albastru */
<ContactFormSplit
  title="Hai să discutăm"
  description="Spune-ne pe scurt ce ai nevoie și revenim rapid."
  emailLabel="Ori scrie-ne direct la"
  nameLabel="Nume"
  emailFieldLabel="Email"
  messageLabel="Mesaj"
  buttonText="Trimite mesajul"
  accentColor="bg-blue-600"
  buttonTextColor="text-white"
/>

/** Temă dark */
<ContactFormSplit
  title="Suport nocturn"
  description="Suntem disponibili și după program."
  emailLabel="Ne poți scrie și la"
  containerBgColor="bg-slate-900"
  leftTextColor="text-white"
  formBgColor="bg-slate-800"
  labelColor="text-slate-300"
  inputTextColor="text-white"
  inputBorderColor="border-slate-600"
  inputFocusRingColor="focus:ring-indigo-500"
  accentColor="bg-indigo-600"
  buttonTextColor="text-white"
  buttonHover="hover:bg-indigo-700"
  contactEmail="support@example.com"
/>

/** Temă brand (emerald) */
<ContactFormSplit
  title="Talk to Sales"
  description="Tell us about your use case and we’ll reach out."
  emailLabel="Prefer email?"
  containerBgColor="bg-emerald-50"
  leftTextColor="text-emerald-900"
  formBgColor="bg-white"
  labelColor="text-emerald-900"
  inputTextColor="text-emerald-900"
  inputBorderColor="border-emerald-300"
  inputFocusRingColor="focus:ring-emerald-500"
  accentColor="bg-emerald-600"
  buttonTextColor="text-white"
  buttonHover="hover:bg-emerald-700"
  contactEmail="sales@example.com"
/>

import CTASectionCentered from "@/components/home-components/CTASectionCentered";

/** Varianta implicită */
<CTASectionCentered />

/** Dark mode */
<CTASectionCentered
  title="Ready for night mode?"
  description="Switch your app to a sleek dark interface."
  primaryButtonText="Enable"
  secondaryButtonText="Learn more"
  bgColor="bg-slate-900"
  textColor="text-white"
/>

/** Brand accent (emerald) */
<CTASectionCentered
  title="Grow with us"
  description="Simple pricing, flexible scaling for teams of any size."
  primaryButtonText="Start trial"
  secondaryButtonText="See pricing"
  bgColor="bg-emerald-50"
  textColor="text-emerald-900"
/>

import CTASectionHero from "@/components/home-components/CTASectionHero";

/** Varianta implicită */
<CTASectionHero />

/** Cu imagine pe fundal deschis */
<CTASectionHero
  title="Scale fără bătăi de cap"
  subtitle="Construiește rapid"
  description="Arhitectură modernă, performanță stabilă și integrare ușoară."
  primaryAction={{ label: "Începe acum", href: "#" }}
  secondaryAction={{ label: "Află mai multe", href: "#" }}
  backgroundColor="bg-white"
  textColor="text-gray-900"
  imageSrc="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1200&auto=format&fit=crop"
  imageAlt="Hero illustration"
/ >

/** Dark mode */
<CTASectionHero
  title="Ready for night mode?"
  subtitle="Switch today"
  description="A sleek, accessible dark theme for your app."
  primaryAction={{ label: "Enable", href: "#" }}
  secondaryAction={{ label: "Docs", href: "#" }}
  backgroundColor="bg-slate-900"
  textColor="text-white"
  imageSrc="https://images.unsplash.com/photo-1527443154391-507e9dc6c5cc?q=80&w=1200&auto=format&fit=crop"
  imageAlt="Dark UI"
/ >

import CTASectionSplit from "@/components/home-components/CTASectionSplit";

/** Varianta implicită */
<CTASectionSplit />

/** Fundal deschis + imagine */
<CTASectionSplit
  title="Build confidently"
  description="Modern tooling and best practices out of the box."
  buttonText="Start now"
  buttonLink="#build"
  bgColor="bg-gray-50"
  textColor="text-gray-900"
  image="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?q=80&w=1200&auto=format&fit=crop"
/>

/** Dark mode */
<CTASectionSplit
  title="Switch to dark"
  description="Accessible contrast and elegant visuals."
  buttonText="Enable dark"
  buttonLink="#dark"
  bgColor="bg-slate-900"
  textColor="text-white"
  image="https://images.unsplash.com/photo-1527443154391-507e9dc6c5cc?q=80&w=1200&auto=format&fit=crop"
/>

import FeaturesAlternating from "@/components/home-components/FeaturesAlternating";

/** Minimalist dark */
<FeaturesAlternating
  heading="De ce noi"
  subheading="UI rapid, flexibil și coerent"
  backgroundType="color"
  backgroundValue="bg-neutral-950"
  textColorClass="text-neutral-100"
  items=[
    {
      title: "Performanță",
      description: "Componente optimizate, fără dependențe inutile.",
      media: { type: "image", src: "/bgimagetest.png" },
    },
    {
      title: "Accesibilitate",
      description: "Respectăm bunele practici a11y by default.",
      media: { type: "image", src: "/softeneerscool.png" },
    },
  ]
/>

/** Light complex */
<FeaturesAlternating
  backgroundType="color"
  backgroundValue="bg-white"
  textColorClass="text-zinc-900"
  items=[
    {
      title: "Discovery",
      media: { type: "image", src: "/bgimagetest.png" },
      bullets: [{ label: "Interviuri" }, { label: "Audit" }],
      contentBgType: "color",
      contentBgValue: "bg-zinc-50",
      buttons: [{ label: "Detalii", href: "#", variant: "secondary" }],
    },
    {
      title: "Delivery",
      media: { type: "video", src: "/showreel.mp4" },
      contentBgType: "glass",
    },
  ]
/>

/** Dark v2 */
<FeaturesAlternating
  backgroundType="video"
  backgroundValue="/bg-video.mp4"
  overlay="gradient"
  textColorClass="text-neutral-100"
  items=[
    { title: "Branding coerent", media: { type: "image", src: "/bgimagetest.png" }, contentBgType: "gradient" },
    { title: "Video friendly", media: { type: "video", src: "/feature.mp4" }, contentBgType: "color", contentBgValue: "bg-black/40" },
  ]
/>

import FeaturesGrid from "@/components/home-components/FeaturesGrid";

/** Minimalist dark */
<FeaturesGrid
  backgroundType="color"
  backgroundValue="bg-neutral-950"
  textColorClass="text-neutral-100"
  items={[
    { title: "Type-safe", description: "Props tipate", icon: { type: "emoji", value: "✅" } },
    { title: "A11y", description: "Semantic corect", icon: { type: "emoji", value: "♿" } },
  ]}
  variant="plain"
/>

/** Light complex */
<FeaturesGrid
  backgroundType="color"
  backgroundValue="bg-white"
  textColorClass="text-zinc-900"
  items={[
    { title: "Imagine", icon: { type: "image", src: "/logo.png" }, badge: { label: "New" }, href: "#" },
    { title: "Număr", icon: { type: "number", value: 2 } },
  ]}
  variant="card"
/>

/** Dark v2 */
<FeaturesGrid
  backgroundType="video"
  backgroundValue="/bg-video.mp4"
  overlay="gradient"
  textColorClass="text-neutral-100"
  items={[
    { title: "Glass", icon: { type: "emoji", value: "🫧" } },
    { title: "Soft", icon: { type: "emoji", value: "🌫️" } },
  ]}
  variant="glass"
/>

import FeaturesTabs from "@/components/home-components/FeaturesTabs";

/** Minimalist dark (underline) */
<FeaturesTabs
  backgroundType="color"
  backgroundValue="bg-neutral-950"
  textColorClass="text-neutral-100"
  variant="underline"
  tabs={[{ id: "a", label: "A", panel: { title: "Panel A" } }, { id: "b", label: "B", panel: { title: "Panel B" } }]}
/>

/** Light complex (pill) */
<FeaturesTabs
  backgroundType="color"
  backgroundValue="bg-white"
  textColorClass="text-zinc-900"
  variant="pill"
  defaultActiveTabId="design"
  tabs={[{ id: "design", label: "Design", panel: { title: "Themeable" } }, { id: "workflow", label: "Workflow", panel: { title: "DX" } }]}
/>

/** Dark v2 (segmented + glass) */
<FeaturesTabs
  backgroundType="color"
  backgroundValue="bg-neutral-950"
  textColorClass="text-neutral-100"
  variant="segmented"
  panelBgType="glass"
  tabs={[{ id: "obs", label: "Observability", panel: { title: "Monitorizare" } }]} 
/>

import NewsletterCard from "@/components/home-components/NewsletterCard";

<NewsletterCard
  title="Subscribe to our newsletter"
  description="Get the latest updates and offers."
  placeholder="Enter your email"
  buttonText="Subscribe"
/>

import NewsletterSimple from "@/components/home-components/NewsletterSimple";

<NewsletterSimple
  title="Subscribe to our Newsletter"
  description="Get the latest updates and offers."
  placeholder="Enter your email"
  buttonText="Subscribe"
/>

import PartnersGrid from "@/components/home-components/PartenersGrid";

<PartnersGrid
  eyebrow="Trusted by"
  title="Teams of all sizes"
  partners={[
    { name: "Softeneers", logo: "/softeneerscool.png", href: "https://softeneers.com" },
    { name: "Acme", logo: "/logos/acme.svg" },
    { name: "Globex", logo: "/logos/globex.svg", grayscale: false },
  ]}
  columnsClass="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
  variant="plain"
  logoGrayscale
  logoHoverEffect="ungray"
/>

import PartnersMarquee from "@/components/home-components/PartnersMarquee";

<PartnersMarquee
  title="Our Trusted Partners"
  partners={[
    { name: "Stripe", logo: "/logos/stripe.svg", url: "#" },
    { name: "Vercel", logo: "/logos/vercel.svg", url: "#" },
  ]}
  speed={30}
/>

import ShowcaseCarousel from "@/components/home-components/ShowcaseCarousel";

<ShowcaseCarousel
  items={[
    {
      title: "Fast DX",
      description: "Componente tipate, API clar, zero friction.",
      image: "/bgimagetest.png",
      bgColor: "bg-neutral-950",
      textColor: "text-neutral-100",
      titleColor: "text-white",
      descriptionColor: "text-neutral-300",
    },
  ]}
/>

import ShowcaseGrid from "@/components/home-components/ShowcaseGrid";

<ShowcaseGrid
  items={[
    { title: "Case study A", description: "Rezultate măsurabile.", image: "/bgimagetest.png", href: "#" },
    { title: "Case study B", description: "Stack modern.", image: "/softeneerscool.png" },
  ]}
/>

import StatsCards from "@/components/home-components/StatsCards";

<StatsCards
  items={[
    { label: "Utilizatori", value: "1.2k", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
    { label: "Conversie", value: "3.8%", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
    { label: "MRR", value: "€18k", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
  ]}
/>

import StatsRow from "@/components/home-components/StatsRow";

<StatsRow
  items={[
    { label: "Utilizatori", value: "1.2k", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
    { label: "Conversie", value: "3.8%", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
    { label: "MRR", value: "€18k", bgColor: "bg-neutral-900", textColor: "text-neutral-100" },
  ]}
/>

import TestimonialsCarousel from "@/components/home-components/TestimonialsCarousel";

<TestimonialsCarousel
  autoPlay
  interval={5000}
  showArrows
  showIndicators
  pauseOnHover
  items={[
    { quote: "Produsul ne-a redus timpul de dezvoltare.", author: "Alex P.", role: "Tech Lead", rating: 5, bgColor: "bg-white" },
    { quote: "Integrare simplă și documentație clară.", author: "Mara I.", role: "Frontend", rating: 4, bgColor: "bg-white" },
  ]}
/>

import TestimonialsMasonry from "@/components/home-components/TestimonialsMasonry";

<TestimonialsMasonry
  showRatings
  items={[
    { quote: "Produsul ne‑a redus timpul de dezvoltare.", author: "Alex P.", role: "Tech Lead", rating: 5, bgColor: "bg-white" },
    { quote: "Integrare simplă și documentație clară.", author: "Mara I.", role: "Frontend", rating: 4, bgColor: "bg-white" },
  ]}
/>

import TestimonialsSimple from "@/components/home-components/TestimonialsSimple";

<TestimonialsSimple
  columns={2}
  showRatings
  items={[
    { quote: "Produsul ne‑a redus timpul de dezvoltare.", author: "Alex P.", role: "Tech Lead", rating: 5, bgColor: "bg-white" },
    { quote: "Integrare simplă și documentație clară.", author: "Mara I.", role: "Frontend", rating: 4, bgColor: "bg-white" },
  ]}
/>