<MarketingLayouts.marketing flash={@flash}>
  <!-- Hero Section -->
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
    <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
      Network monitoring
      <span class="relative whitespace-nowrap text-blue-600">
        <svg
          aria-hidden="true"
          viewBox="0 0 418 42"
          class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
          preserveAspectRatio="none"
        >
          <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
        </svg>
        <span class="relative">made simple</span>
      </span>
      for network operators.
    </h1>
    <p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
      Monitor network devices via SNMP, track performance metrics in real-time, and respond to alerts instantly.
      Built specifically for telecom tower infrastructure.
    </p>
    <div class="mt-10 flex justify-center gap-x-6">
      <.link
        navigate={~p"/users/register"}
        class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
      >
        Get 1 month free
      </.link>
    </div>
  </div>
  <!-- Primary Features Section -->
  <section
    id="features"
    aria-label="Features for monitoring your infrastructure"
    class="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
  >
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
      <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
          Everything you need to monitor your network.
        </h2>
        <p class="mt-6 text-lg tracking-tight text-blue-100">
          Comprehensive SNMP monitoring with real-time alerts and performance tracking.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Feature 1 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-signal" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">SNMP Monitoring</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Automatic device discovery via SNMP. Track interface statistics, sensor readings,
            and device health with support for MikroTik, Cisco, and generic SNMP devices.
          </p>
        </div>
        <!-- Feature 2 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-bell-alert" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Real-time Alerts</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Get instant notifications when devices go down or thresholds are exceeded.
            Configurable alert rules with email notifications to keep you informed.
          </p>
        </div>
        <!-- Feature 3 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-chart-bar" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Performance Charts</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Visualize historical data with interactive time-series charts. Track bandwidth,
            temperature sensors, and custom metrics over configurable time ranges.
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- Secondary Features Section -->
  <section
    id="secondary-features"
    aria-label="Features for managing your infrastructure"
    class="pt-20 pb-14 sm:pt-32 sm:pb-20 lg:pb-32"
  >
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl md:text-center">
        <h2 class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
          Built for multi-site operations.
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-700">
          Organize devices by site, collaborate with your team, and maintain clear visibility
          across your entire network infrastructure.
        </p>
      </div>
      <div class="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Feature 1 -->
        <div>
          <div class="w-9 rounded-lg bg-blue-600">
            <svg aria-hidden="true" class="h-9 w-9" fill="none">
              <path
                d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
                fill="#fff"
                opacity=".5"
              />
              <path
                d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
                fill="#fff"
                opacity=".3"
              />
              <path
                d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
                fill="#fff"
              />
            </svg>
          </div>
          <h3 class="mt-6 text-sm font-medium text-blue-600">Site Management</h3>
          <p class="mt-2 font-display text-xl text-slate-900">
            Organize devices by physical location
          </p>
          <p class="mt-4 text-sm text-slate-600">
            Group devices by tower site or facility. View site-wide status and health metrics
            at a glance, then drill down into individual device details.
          </p>
        </div>
        <!-- Feature 2 -->
        <div>
          <div class="w-9 rounded-lg bg-blue-600">
            <svg aria-hidden="true" class="h-9 w-9" fill="none">
              <path
                opacity=".5"
                d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
                fill="#fff"
              />
              <path
                d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
                fill="#fff"
              />
            </svg>
          </div>
          <h3 class="mt-6 text-sm font-medium text-blue-600">Team Collaboration</h3>
          <p class="mt-2 font-display text-xl text-slate-900">Share access with your team</p>
          <p class="mt-4 text-sm text-slate-600">
            Create organizations and invite team members. Control access with owner, admin, and member roles.
            Each team member sees only what they need.
          </p>
        </div>
        <!-- Feature 3 -->
        <div>
          <div class="w-9 rounded-lg bg-blue-600">
            <svg aria-hidden="true" class="h-9 w-9" fill="none">
              <defs>
                <linearGradient
                  id="reporting-gradient"
                  x1="11.5"
                  y1="18"
                  x2="36"
                  y2="15.5"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset=".194" stop-color="#fff" />
                  <stop offset="1" stop-color="#6692F1" />
                </linearGradient>
              </defs>
              <path
                d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
                stroke="url(#reporting-gradient)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <h3 class="mt-6 text-sm font-medium text-blue-600">Historical Data</h3>
          <p class="mt-2 font-display text-xl text-slate-900">Track trends over time</p>
          <p class="mt-4 text-sm text-slate-600">
            All sensor readings and interface statistics are stored for historical analysis.
            View data from the past hour, day, week, or month with interactive charts.
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- Call to Action Section -->
  <section class="relative overflow-hidden bg-blue-600 py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
      <div class="mx-auto max-w-lg text-center">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl">
          Start monitoring today
        </h2>
        <p class="mt-4 text-lg tracking-tight text-white">
          Get started in minutes. No credit card required for the free trial.
        </p>
        <.link
          navigate={~p"/users/register"}
          class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 mt-10 bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white"
        >
          Get 1 month free
        </.link>
      </div>
    </div>
  </section>
</MarketingLayouts.marketing>
