<%- include('partials/header') %>
<%- include('partials/nav') %>

<main class="flex-grow bg-cream overflow-x-hidden">

  <!-- Hero -->
  <section class="relative pt-20 pb-16 px-4 sm:px-6 lg:px-8">
    <!-- decorative blobs -->
    <div class="pointer-events-none absolute -top-10 -left-16 w-72 h-72 bg-grape-dim rounded-full blur-3xl opacity-70 blob"></div>
    <div class="pointer-events-none absolute top-24 -right-10 w-80 h-80 bg-sun-dim rounded-full blur-3xl opacity-70 blob" style="animation-delay:-3s"></div>
    <div class="pointer-events-none absolute bottom-0 left-1/3 w-64 h-64 bg-coral-dim rounded-full blur-3xl opacity-60 blob" style="animation-delay:-6s"></div>

    <!-- floating polaroid -->
    <div class="hidden lg:block absolute top-16 right-10 w-48 bg-white border-2 border-ink rounded-2xl p-2.5 pb-5 rotate-6 hard-shadow z-10">
      <img src="/images/hero-polaroid.jpg" alt="A happy customer checking their phone" class="w-full h-32 object-cover rounded-lg">
      <p class="mt-2 text-center text-xs font-display font-semibold text-ink/70">sent. seen. replied to.</p>
    </div>

    <div class="relative max-w-5xl mx-auto text-center">
      <span class="inline-block -rotate-2 bg-white border-2 border-ink rounded-full px-4 py-1.5 text-sm font-semibold hard-shadow-sm">
        bulk sending, basically solved 📬
      </span>

      <h1 class="mt-7 font-display font-semibold text-[2.6rem] sm:text-6xl leading-[1.05] text-ink">
        Write it once, fire it off on
        <span class="relative inline-block">
          every channel
          <svg class="absolute left-0 -bottom-2 w-full" height="14" viewBox="0 0 200 14" preserveAspectRatio="none">
            <path d="M2 10 Q 50 2, 100 8 T 198 6" stroke="#FF5D73" stroke-width="5" fill="none" stroke-linecap="round"/>
          </svg>
        </span>
        your people actually use.
      </h1>

      <p class="mt-7 text-lg text-ink/70 max-w-xl mx-auto leading-relaxed">
        Import your list, pick your senders, and let the batching engine do the boring part —
        across Email, SMS, Telegram and WhatsApp, from one tab.
      </p>

      <div class="mt-9 flex flex-wrap justify-center items-center gap-4">
        <a href="/register" class="px-7 py-3.5 text-base font-semibold text-ink bg-coral border-2 border-ink rounded-full hard-shadow hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition">
          Start sending free
        </a>
        <a href="#how-it-works" class="px-7 py-3.5 text-base font-semibold text-ink bg-white border-2 border-ink rounded-full hover:bg-sun-dim transition">
          See how it works
        </a>
      </div>
    </div>

    <!-- sticker row: the four channels -->
    <div class="relative max-w-5xl mx-auto mt-16 grid grid-cols-2 sm:grid-cols-4 gap-5">
      <div class="-rotate-3 hover:rotate-0 transition bg-coral-dim border-2 border-ink rounded-2xl p-4 hard-shadow-sm">
        <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="#1B1033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
        <p class="mt-3 font-display font-semibold text-ink">Email</p>
        <p class="text-xs text-ink/60 mt-0.5">multi-server</p>
      </div>
      <div class="rotate-2 hover:rotate-0 transition bg-sun-dim border-2 border-ink rounded-2xl p-4 hard-shadow-sm">
        <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="#1B1033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
        <p class="mt-3 font-display font-semibold text-ink">SMS</p>
        <p class="text-xs text-ink/60 mt-0.5">BestBulkSMS</p>
      </div>
      <div class="rotate-3 hover:rotate-0 transition bg-grape-dim border-2 border-ink rounded-2xl p-4 hard-shadow-sm">
        <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="#1B1033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>
        <p class="mt-3 font-display font-semibold text-ink">Telegram</p>
        <p class="text-xs text-ink/60 mt-0.5">bot-powered</p>
      </div>
      <div class="-rotate-2 hover:rotate-0 transition bg-mint-dim border-2 border-ink rounded-2xl p-4 hard-shadow-sm">
        <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="#1B1033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
        <p class="mt-3 font-display font-semibold text-ink">WhatsApp</p>
        <p class="text-xs text-ink/60 mt-0.5">coming next</p>
      </div>
    </div>
  </section>

  <!-- How it works: a zigzag, not a grid -->
  <section id="how-it-works" class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <h2 class="font-display font-semibold text-3xl sm:text-4xl text-ink text-center">
      Four steps, then it runs itself
    </h2>

    <div class="mt-14 grid sm:grid-cols-4 gap-6">
      <div class="sm:mt-0">
        <div class="w-12 h-12 rounded-full bg-coral border-2 border-ink flex items-center justify-center font-display font-semibold text-lg -rotate-6">1</div>
        <h3 class="mt-4 font-display font-semibold text-ink">Import your list</h3>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">One CSV per channel — emails, telegram IDs, or numbers — kept in its own list.</p>
      </div>
      <div class="sm:mt-8">
        <div class="w-12 h-12 rounded-full bg-sun border-2 border-ink flex items-center justify-center font-display font-semibold text-lg rotate-6">2</div>
        <h3 class="mt-4 font-display font-semibold text-ink">Choose your senders</h3>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">Pick one or several SMTP servers, bots, or SMS accounts for this send.</p>
      </div>
      <div class="sm:mt-0">
        <div class="w-12 h-12 rounded-full bg-grape border-2 border-ink flex items-center justify-center font-display font-semibold text-lg text-white -rotate-6">3</div>
        <h3 class="mt-4 font-display font-semibold text-ink">Queue the batch</h3>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">A cron-driven worker rotates senders and respects every daily cap.</p>
      </div>
      <div class="sm:mt-8">
        <div class="w-12 h-12 rounded-full bg-mint border-2 border-ink flex items-center justify-center font-display font-semibold text-lg text-white rotate-6">4</div>
        <h3 class="mt-4 font-display font-semibold text-ink">Watch it land</h3>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">Status updates live as each recipient is marked sent, failed, or pending.</p>
      </div>
    </div>

    <div class="mt-16 flex justify-center">
      <div class="w-64 bg-white border-2 border-ink rounded-2xl p-3 pb-6 -rotate-3 hard-shadow">
        <img src="/images/how-it-works-polaroid.jpg" alt="Someone setting up a campaign on a laptop" class="w-full h-40 object-cover rounded-lg">
        <p class="mt-3 text-center text-sm font-display font-semibold text-ink/70">this took about four minutes</p>
      </div>
    </div>
  </section>

  <!-- Channels: sticker sheet -->
  <!-- Shared sending: request -> approve -> allocate -->
  <section id="shared-sending" class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <h2 class="font-display font-semibold text-3xl sm:text-4xl text-ink text-center">
      No server of your own? Request a slice of ours
    </h2>
    <p class="mt-3 text-center text-ink/70 max-w-2xl mx-auto">
      Admins connect email servers, BestBulkSMS accounts and Telegram bots, then package them into daily plans. You ask, they approve.
    </p>

    <div class="mt-12 grid sm:grid-cols-3 gap-6">
      <div class="bg-white border-2 border-ink rounded-2xl p-6">
        <p class="font-display font-semibold text-ink">1. Admin adds a sender</p>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">For example an email server that can send 1,000 a day, with a plan on top such as &ldquo;Starter Email &mdash; 100 a day&rdquo;.</p>
      </div>
      <div class="bg-white border-2 border-ink rounded-2xl p-6">
        <p class="font-display font-semibold text-ink">2. You request a plan</p>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">Pick a plan or ask for a custom daily amount on the <a href="/requests" class="underline font-semibold">Access</a> page. The admin sees it right away.</p>
      </div>
      <div class="bg-white border-2 border-ink rounded-2xl p-6">
        <p class="font-display font-semibold text-ink">3. Approved &mdash; start sending</p>
        <p class="mt-1.5 text-sm text-ink/70 leading-relaxed">Your 100 a day is reserved for you, so that server now has 100 fewer sends to give. Same for SMS and Telegram. Admins can pause access at any time.</p>
      </div>
    </div>
  </section>

  <section class="bg-ink py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="font-display font-semibold text-3xl sm:text-4xl text-cream text-center">
        Every channel keeps its own lane
      </h2>
      <p class="mt-3 text-cream/60 text-center max-w-md mx-auto">
        Separate contacts, separate senders, separate settings — nothing bleeds into another list by accident.
      </p>

      <div class="mt-14 grid sm:grid-cols-2 gap-6">
        <div class="rotate-1 bg-coral-dim border-2 border-ink rounded-2xl p-6 hard-shadow">
          <div class="flex items-start justify-between">
            <h3 class="font-display font-semibold text-xl text-ink">Email</h3>
            <span class="text-xs font-semibold text-mint bg-mint-dim px-2.5 py-1 rounded-full border border-ink/10">live</span>
          </div>
          <p class="mt-2 text-sm text-ink/70 leading-relaxed">Link multiple SMTP servers, each with its own daily cap, and split one send across them.</p>
        </div>
        <div class="-rotate-1 bg-sun-dim border-2 border-ink rounded-2xl p-6 hard-shadow">
          <div class="flex items-start justify-between">
            <h3 class="font-display font-semibold text-xl text-ink">SMS</h3>
            <span class="text-xs font-semibold text-mint bg-mint-dim px-2.5 py-1 rounded-full border border-ink/10">live</span>
          </div>
          <p class="mt-2 text-sm text-ink/70 leading-relaxed">Send through BestBulkSMS with your own API key, or the shared system account.</p>
        </div>
        <div class="-rotate-1 bg-grape-dim border-2 border-ink rounded-2xl p-6 hard-shadow">
          <div class="flex items-start justify-between">
            <h3 class="font-display font-semibold text-xl text-ink">Telegram</h3>
            <span class="text-xs font-semibold text-mint bg-mint-dim px-2.5 py-1 rounded-full border border-ink/10">live</span>
          </div>
          <p class="mt-2 text-sm text-ink/70 leading-relaxed">Your own bot, or the shared platform bot, messaging IDs straight from your CSV.</p>
        </div>
        <div class="rotate-1 bg-mint-dim border-2 border-ink rounded-2xl p-6 hard-shadow">
          <div class="flex items-start justify-between">
            <h3 class="font-display font-semibold text-xl text-ink">WhatsApp</h3>
            <span class="text-xs font-semibold text-ink/50 bg-white px-2.5 py-1 rounded-full border border-ink/10">coming next</span>
          </div>
          <p class="mt-2 text-sm text-ink/70 leading-relaxed">Broadcast-style messaging over the WhatsApp Business API.</p>
        </div>

        <div class="sm:col-span-2 flex justify-center pt-2">
          <div class="w-72 bg-cream border-2 border-ink rounded-2xl p-3 pb-6 rotate-1 hard-shadow">
            <img src="/images/channels-polaroid.jpg" alt="A phone lighting up with message notifications" class="w-full h-40 object-cover rounded-lg">
            <p class="mt-3 text-center text-sm font-display font-semibold text-ink/70">one list, four inboxes</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Reliability: a cluster of chunky badges -->
  <section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
    <h2 class="font-display font-semibold text-3xl sm:text-4xl text-ink">
      Built so a big send doesn't get you flagged
    </h2>
    <div class="mt-12 flex flex-wrap justify-center gap-5">
      <div class="-rotate-2 bg-white border-2 border-ink rounded-2xl px-6 py-5 max-w-[15rem] hard-shadow-sm">
        <p class="font-display font-semibold text-ink">Daily caps, enforced</p>
        <p class="mt-1.5 text-sm text-ink/65 leading-relaxed">Each sender has a limit. Hit it, and the worker moves to the next one automatically.</p>
      </div>
      <div class="rotate-1 bg-white border-2 border-ink rounded-2xl px-6 py-5 max-w-[15rem] hard-shadow-sm">
        <p class="font-display font-semibold text-ink">Rotation across senders</p>
        <p class="mt-1.5 text-sm text-ink/65 leading-relaxed">One campaign can spread load across several servers or bots instead of hammering one.</p>
      </div>
      <div class="-rotate-1 bg-white border-2 border-ink rounded-2xl px-6 py-5 max-w-[15rem] hard-shadow-sm">
        <p class="font-display font-semibold text-ink">Safe to walk away</p>
        <p class="mt-1.5 text-sm text-ink/65 leading-relaxed">A locking, cron-driven worker runs server-side — close the tab, the send keeps going.</p>
      </div>
    </div>
  </section>

  <!-- Closing CTA -->
  <section class="relative bg-grape py-16 px-4 sm:px-6 lg:px-8 overflow-hidden">
    <svg class="absolute top-6 left-10 w-8 h-8 text-sun opacity-80" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0l2.5 8.5L23 11l-8.5 2.5L12 22l-2.5-8.5L1 11l8.5-2.5z"/></svg>
    <svg class="absolute bottom-8 right-16 w-6 h-6 text-coral opacity-80" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0l2.5 8.5L23 11l-8.5 2.5L12 22l-2.5-8.5L1 11l8.5-2.5z"/></svg>
    <div class="relative max-w-3xl mx-auto text-center">
      <h2 class="font-display font-semibold text-3xl sm:text-4xl text-white leading-tight">
        Your audience is spread across four apps. Your sending shouldn't be.
      </h2>
      <a href="/register" class="mt-8 inline-block px-8 py-3.5 text-base font-semibold text-ink bg-sun border-2 border-ink rounded-full hard-shadow hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition">
        Start sending
      </a>
    </div>
  </section>

</main>

<%- include('partials/footer') %>
