<%# Variant 1: Centered simple — centered text, headline, subtitle, 2 CTAs, no image %>
<section class="bg-background py-20 lg:py-32">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
      Build faster, ship sooner
    </h1>
    <p class="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg sm:text-xl leading-relaxed">
      The modern toolkit for teams who want to move fast without breaking things.
      Design, develop, and deploy with confidence.
    </p>
    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <%= ui.btn size: :lg, url: "#" do %>
        Get started free
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
      <%= ui.btn "See how it works", variant: :outline, size: :lg, url: "#" %>
    </div>
  </div>
</section>

<%# Variant 2: Centered with badge — badge on top, headline, description, 2 CTAs, trusted-by logos row %>
<section class="bg-background py-20 lg:py-32">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <div class="mb-6 inline-flex">
      <%= ui.badge variant: :info, size: :md, rounded: true do %>
        <%= ui.icon "sparkles", size: 4 %>
        <span class="ml-1">New: AI-powered workflows just launched</span>
      <% end %>
    </div>

    <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
      The platform that grows<br class="hidden sm:block"> with your ambition
    </h1>
    <p class="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed">
      From your first prototype to your millionth user, we provide the infrastructure,
      tools, and support you need at every stage.
    </p>

    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <%= ui.btn size: :lg, url: "#" do %>
        Start building today
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
      <%= ui.btn "Talk to sales", variant: :ghost, size: :lg, url: "#" %>
    </div>

    <div class="mt-16 border-t border-border pt-10">
      <p class="text-muted-foreground mb-8 text-sm font-medium uppercase tracking-wider">
        Trusted by teams at
      </p>
      <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        <% ["Acme Corp", "Globex", "Initech", "Hooli", "Piedmont"].each do |name| %>
          <div class="text-muted-foreground/50 text-lg font-bold tracking-tight">
            <%= name %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</section>

<%# Variant 3: Split left text / right image %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
      <%# Left: Text content %>
      <div>
        <p class="text-primary text-sm font-semibold uppercase tracking-wider">
          Developer-first platform
        </p>
        <h1 class="text-foreground mt-3 text-4xl font-bold tracking-tight sm:text-5xl">
          Ship production-ready apps in half the time
        </h1>
        <p class="text-muted-foreground mt-6 text-lg leading-relaxed">
          Stop wrestling with infrastructure. Our platform handles the heavy lifting so your
          team can focus on building features that matter to your users.
        </p>
        <div class="mt-8 flex flex-col gap-4 sm:flex-row">
          <%= ui.btn size: :lg, url: "#" do %>
            <%= ui.icon "rocket-launch", size: 5 %>
            Start free trial
          <% end %>
          <%= ui.btn "View documentation", variant: :outline, size: :lg, url: "#" %>
        </div>
        <div class="text-muted-foreground mt-6 flex items-center gap-2 text-sm">
          <%= ui.icon "check-circle", size: 5 %>
          <span>No credit card required. Free for up to 3 projects.</span>
        </div>
      </div>

      <%# Right: Image placeholder %>
      <div class="bg-muted relative overflow-hidden rounded-2xl border border-border">
        <div class="aspect-[4/3] flex items-center justify-center">
          <div class="text-center">
            <div class="text-muted-foreground/40 mb-2">
              <%= ui.icon "photo", size: 10 %>
            </div>
            <p class="text-muted-foreground text-sm">App screenshot</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<%# Variant 4: Split right text / left image (reversed layout of #3) %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
      <%# Left: Image placeholder %>
      <div class="order-2 lg:order-1">
        <div class="bg-muted relative overflow-hidden rounded-2xl border border-border">
          <div class="aspect-[4/3] flex items-center justify-center">
            <div class="text-center">
              <div class="text-muted-foreground/40 mb-2">
                <%= ui.icon "chart-bar", size: 10 %>
              </div>
              <p class="text-muted-foreground text-sm">Dashboard preview</p>
            </div>
          </div>
        </div>
      </div>

      <%# Right: Text content %>
      <div class="order-1 lg:order-2">
        <%= ui.badge "Analytics", variant: :success, size: :sm, rounded: true %>
        <h1 class="text-foreground mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
          Understand your users like never before
        </h1>
        <p class="text-muted-foreground mt-6 text-lg leading-relaxed">
          Real-time analytics, cohort tracking, and predictive insights that help you
          make data-driven decisions. No SQL required.
        </p>

        <ul class="mt-8 space-y-3">
          <% ["Real-time event streaming", "Custom dashboards in minutes", "Privacy-first by default"].each do |feature| %>
            <li class="flex items-center gap-3">
              <span class="text-primary flex-shrink-0">
                <%= ui.icon "check", size: 5 %>
              </span>
              <span class="text-foreground"><%= feature %></span>
            </li>
          <% end %>
        </ul>

        <div class="mt-8 flex flex-col gap-4 sm:flex-row">
          <%= ui.btn "Explore analytics", size: :lg, url: "#" %>
          <%= ui.btn "Live demo", variant: :link, size: :lg, url: "#" do %>
            Live demo
            <%= ui.icon "arrow-right", size: 5 %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</section>

<%# Variant 5: Centered with app screenshot — centered text, CTAs, large screenshot/mockup below %>
<section class="bg-background overflow-hidden py-20 lg:py-28">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-3xl text-center">
      <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
        Your entire workflow,<br class="hidden sm:block"> one beautiful interface
      </h1>
      <p class="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed">
        Manage projects, track progress, and collaborate with your team
        in a workspace designed for focus and clarity.
      </p>
      <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
        <%= ui.btn size: :lg, url: "#" do %>
          Try it free
          <%= ui.icon "arrow-right", size: 5 %>
        <% end %>
        <%= ui.btn "Schedule a demo", variant: :secondary, size: :lg, url: "#" %>
      </div>
    </div>

    <%# Screenshot mockup %>
    <div class="relative mt-16 lg:mt-20">
      <div class="bg-muted mx-auto max-w-5xl overflow-hidden rounded-xl border border-border shadow-2xl">
        <%# Browser chrome %>
        <div class="flex items-center gap-2 border-b border-border px-4 py-3">
          <div class="flex gap-1.5">
            <div class="size-3 rounded-full bg-border"></div>
            <div class="size-3 rounded-full bg-border"></div>
            <div class="size-3 rounded-full bg-border"></div>
          </div>
          <div class="bg-background mx-auto w-1/3 rounded-md border border-border px-3 py-1 text-center">
            <span class="text-muted-foreground text-xs">app.example.com</span>
          </div>
        </div>
        <%# Screenshot area %>
        <div class="aspect-[16/9] flex items-center justify-center">
          <div class="text-center">
            <div class="text-muted-foreground/40 mb-3">
              <%= ui.icon "window", size: 10 %>
            </div>
            <p class="text-muted-foreground text-sm">Application screenshot</p>
          </div>
        </div>
      </div>

      <%# Decorative fade at bottom %>
      <div class="from-background pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t"></div>
    </div>
  </div>
</section>

<%# Variant 6: Gradient background — subtle gradient bg, centered text, glowing CTA %>
<section class="relative overflow-hidden bg-primary py-24 lg:py-36">
  <%# Decorative gradient orbs %>
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute top-0 left-1/4 h-96 w-96 rounded-full bg-primary-foreground/5 blur-3xl"></div>
    <div class="absolute bottom-0 right-1/4 h-96 w-96 rounded-full bg-primary-foreground/10 blur-3xl"></div>
  </div>

  <div class="relative mx-auto max-w-3xl px-6 text-center">
    <h1 class="text-primary-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
      Where great ideas become great products
    </h1>
    <p class="text-primary-foreground/70 mx-auto mt-6 max-w-2xl text-lg leading-relaxed">
      Join thousands of makers, founders, and teams who use our platform
      to turn their vision into reality. No complexity, no compromise.
    </p>

    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <%= ui.btn "Get started for free", variant: :secondary, size: :lg, url: "#" %>
      <%= ui.btn variant: :ghost, size: :lg, url: "#", class: "text-primary-foreground hover:text-primary-foreground border border-primary-foreground/20 hover:bg-primary-foreground/10" do %>
        <%= ui.icon "play", size: 5 %>
        Watch the tour
      <% end %>
    </div>

    <p class="text-primary-foreground/50 mt-8 text-sm">
      Free forever for personal projects. No credit card needed.
    </p>
  </div>
</section>

<%# Variant 7: With video placeholder — centered text, play button overlay on video placeholder %>
<section class="bg-background py-20 lg:py-28">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-3xl text-center">
      <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
        See what's possible in<br class="hidden sm:block"> under two minutes
      </h1>
      <p class="text-muted-foreground mx-auto mt-6 max-w-xl text-lg leading-relaxed">
        Watch how leading teams use our platform to streamline their
        entire product development lifecycle.
      </p>
    </div>

    <%# Video placeholder with play button %>
    <div class="relative mx-auto mt-14 max-w-4xl">
      <div class="bg-muted group relative cursor-pointer overflow-hidden rounded-2xl border border-border">
        <div class="aspect-video flex items-center justify-center">
          <%# Play button overlay %>
          <div class="relative z-10 flex flex-col items-center gap-4">
            <div class="bg-primary text-primary-foreground flex size-20 items-center justify-center rounded-full shadow-lg transition-transform group-hover:scale-110">
              <%= ui.icon "play", size: 8 %>
            </div>
            <span class="text-muted-foreground text-sm font-medium">Watch the 2-minute overview</span>
          </div>
        </div>
      </div>
    </div>

    <%# CTAs below video %>
    <div class="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <%= ui.btn size: :lg, url: "#" do %>
        Start your free trial
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
      <%= ui.btn "Read the docs", variant: :outline, size: :lg, url: "#" %>
    </div>
  </div>
</section>

<%# Variant 8: Minimal with stats — minimal headline + subtitle, row of 3-4 stat numbers below %>
<section class="bg-background py-20 lg:py-28">
  <div class="mx-auto max-w-5xl px-6">
    <div class="max-w-2xl">
      <h1 class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
        Infrastructure that scales with you
      </h1>
      <p class="text-muted-foreground mt-6 text-xl leading-relaxed">
        Reliable, fast, and secure. We power the backends of the world's
        fastest-growing companies so they can focus on what they do best.
      </p>
      <div class="mt-8">
        <%= ui.btn size: :lg, url: "#" do %>
          Get started
          <%= ui.icon "arrow-right", size: 5 %>
        <% end %>
      </div>
    </div>

    <%# Stats row %>
    <div class="mt-16 grid grid-cols-2 gap-8 border-t border-border pt-12 lg:grid-cols-4">
      <%
        stats = [
          { value: "99.99%", label: "Uptime SLA" },
          { value: "150ms", label: "Avg. response time" },
          { value: "50M+", label: "API requests / day" },
          { value: "2,500+", label: "Companies worldwide" }
        ]
      %>
      <% stats.each do |stat| %>
        <div>
          <div class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
            <%= stat[:value] %>
          </div>
          <div class="text-muted-foreground mt-1 text-sm">
            <%= stat[:label] %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 9: Split with feature list — text + checklist of features on left, image on right %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
      <%# Left: Text + feature checklist %>
      <div>
        <%= ui.badge "All-in-one platform", variant: :default, size: :sm, rounded: true %>
        <h1 class="text-foreground mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
          Everything you need to launch and grow
        </h1>
        <p class="text-muted-foreground mt-6 text-lg leading-relaxed">
          Replace your patchwork of tools with one cohesive platform.
          From deployment to monitoring, we have you covered.
        </p>

        <%# Feature checklist %>
        <div class="mt-10 grid gap-4 sm:grid-cols-2">
          <%
            features = [
              { icon: "bolt", text: "Instant deployments" },
              { icon: "shield-check", text: "Enterprise-grade security" },
              { icon: "globe-alt", text: "Global CDN included" },
              { icon: "chart-bar", text: "Built-in analytics" },
              { icon: "users", text: "Team collaboration" },
              { icon: "clock", text: "24/7 expert support" }
            ]
          %>
          <% features.each do |feature| %>
            <div class="flex items-start gap-3">
              <span class="text-primary mt-0.5 flex-shrink-0">
                <%= ui.icon feature[:icon], size: 5 %>
              </span>
              <span class="text-foreground text-sm font-medium"><%= feature[:text] %></span>
            </div>
          <% end %>
        </div>

        <div class="mt-10 flex flex-col gap-4 sm:flex-row">
          <%= ui.btn "Start free trial", size: :lg, url: "#" %>
          <%= ui.btn "Compare plans", variant: :outline, size: :lg, url: "#" %>
        </div>
      </div>

      <%# Right: Image placeholder %>
      <div class="bg-muted relative overflow-hidden rounded-2xl border border-border">
        <div class="aspect-square flex items-center justify-center lg:aspect-[4/5]">
          <div class="text-center">
            <div class="text-muted-foreground/40 mb-2">
              <%= ui.icon "squares-2x2", size: 10 %>
            </div>
            <p class="text-muted-foreground text-sm">Product interface</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<%# Variant 10: Dark hero (inverted) — dark bg section with light text, bold CTA %>
<section class="relative overflow-hidden bg-foreground py-24 lg:py-36">
  <%# Subtle grid pattern overlay %>
  <div class="pointer-events-none absolute inset-0 opacity-[0.03]"
       style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 fill=%22none%22 stroke=%22white%22 stroke-width=%220.5%22/></svg>');">
  </div>

  <div class="relative mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
      <%# Text content — takes 7 columns %>
      <div class="lg:col-span-7">
        <div class="inline-flex items-center gap-2 rounded-full border border-background/10 bg-background/5 px-4 py-1.5">
          <span class="size-2 animate-pulse rounded-full bg-green-400"></span>
          <span class="text-background/70 text-sm font-medium">Now available worldwide</span>
        </div>

        <h1 class="text-background mt-6 text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
          The next generation<br class="hidden lg:block"> of cloud computing
        </h1>
        <p class="text-background/60 mt-6 max-w-xl text-lg leading-relaxed">
          Zero-config deployments, automatic scaling, and edge-first architecture.
          Built for the applications of tomorrow, available today.
        </p>

        <div class="mt-10 flex flex-col gap-4 sm:flex-row">
          <%= ui.btn variant: :secondary, size: :lg, url: "#" do %>
            Deploy your first app
            <%= ui.icon "arrow-right", size: 5 %>
          <% end %>
          <%= ui.btn variant: :ghost, size: :lg, url: "#", class: "text-background/80 hover:text-background border border-background/15 hover:bg-background/5" do %>
            <%= ui.icon "book-open", size: 5 %>
            Read documentation
          <% end %>
        </div>
      </div>

      <%# Right side — terminal-style card %>
      <div class="lg:col-span-5">
        <div class="overflow-hidden rounded-xl border border-background/10 bg-background/5 shadow-2xl backdrop-blur-sm">
          <%# Terminal header %>
          <div class="flex items-center gap-2 border-b border-background/10 px-4 py-3">
            <div class="size-3 rounded-full bg-background/10"></div>
            <div class="size-3 rounded-full bg-background/10"></div>
            <div class="size-3 rounded-full bg-background/10"></div>
            <span class="text-background/30 ml-2 text-xs font-mono">terminal</span>
          </div>
          <%# Terminal body %>
          <div class="p-5 font-mono text-sm leading-relaxed">
            <div class="text-background/40">$ npx create-app my-project</div>
            <div class="text-background/60 mt-2">Creating project...</div>
            <div class="text-green-400/80 mt-1">Done in 2.4s</div>
            <div class="text-background/40 mt-3">$ deploy --prod</div>
            <div class="text-background/60 mt-2">Deploying to 12 regions...</div>
            <div class="text-green-400/80 mt-1">Live at app.example.com</div>
            <div class="text-background/30 mt-3">$<span class="ml-1 inline-block h-4 w-2 animate-pulse bg-background/50"></span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>