{% extends "base.html" %}
{% block body %}
<header class="nav">
  <a class="brand" href="{{ url_for('landing') }}"><img src="{{ url_for('static', filename='img/logo-sm.png') }}" alt="Shamuverse logo"><span>SHAMUVERSE</span></a>
  <nav>
    <a href="#demo">Demo</a><a href="#plans">Plans</a>
    {% if logged %}<a class="btn btn-sm" href="{{ url_for('dashboard') }}">Dashboard</a>
    {% else %}<a class="btn btn-sm" href="{{ url_for('login') }}">Login</a>{% endif %}
  </nav>
</header>

<section class="hero" id="demo">
  <div class="panel">
    <h3>Hunt console <span class="badge badge-demo">DEMO</span></h3>
    <p class="muted" style="margin:0 0 4px">Try it free. Demo shows sample results with hidden contacts.</p>
    <form id="demoForm" data-url="{{ url_for('api_demo') }}">
      <label>Business type</label><input name="what" value="dentists" maxlength="40" required>
      <label>City</label><input name="where" value="Lahore" maxlength="40" required>
      <div class="err" id="demoErr"></div>
      <button class="btn btn-block" type="submit">Start demo hunt</button>
    </form>
  </div>

  <div class="hero-center">
    <div class="hud">
      <div class="ring r1"></div><div class="ring r2"></div><div class="ring r3"></div>
      <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Shamuverse Hunter Bot logo">
      <div class="chip a">&#9990;</div><div class="chip b">@</div><div class="chip c">&#8982;</div>
    </div>
    <div class="plate">HUNTER BOT</div>
    <p class="tag">{{ cfg().tagline }}</p>
    <div class="cta-row">
      <a class="btn" href="#plans">See plans</a>
      <a class="btn btn-ghost" href="{{ url_for('login') }}">Client login</a>
    </div>
  </div>

  <div class="panel red">
    <h3>Live leads <span class="badge badge-demo">DEMO DATA</span></h3>
    <div class="stats">
      <div class="stat"><small>Leads found</small><b id="dTotal">--</b></div>
      <div class="stat"><small>Search</small><b class="c" id="dWhat" style="font-size:15px">--</b></div>
    </div>
    <div id="demoOut"></div>
    <div class="locked">Phones and emails are hidden in demo. <a href="#plans">Get a plan</a> to unlock real data.</div>
  </div>
</section>

<section class="section">
  <h2>How it works</h2><p class="sub">Three steps from idea to customer list</p>
  <div class="steps">
    <div class="panel step"><div class="n">01</div><h4>Pick a business and city</h4><p>Dentists, restaurants, salons, shops, offices. Any kind of business.</p></div>
    <div class="panel step"><div class="n">02</div><h4>Bot hunts the leads</h4><p>It collects names, phones, websites, addresses and public emails.</p></div>
    <div class="panel step"><div class="n">03</div><h4>Download Excel</h4><p>Get a clean sheet on the website or straight on WhatsApp.</p></div>
  </div>
</section>

<section class="section" id="plans">
  <h2>Monthly plans</h2><p class="sub">Pick a plan, message us on WhatsApp, and get your ID and password</p>
  <div class="plans">
    {% for p in plans %}
    <div class="panel plan {{ 'featured' if p.featured }}">
      {% if p.featured %}<div class="ribbon">MOST POPULAR</div>{% endif %}
      <div class="pn">{{ p.name }}</div>
      <div class="price">{{ cfg().currency }} {{ '{:,}'.format(p.price) }}<small> / month</small></div>
      <ul>
        <li>{{ p.daily_searches }} hunts per day</li>
        <li>Up to {{ p.max_results }} leads per hunt</li>
        <li>Excel download</li>
        <li>WhatsApp bot access</li>
        <li class="{{ '' if p.emails_allowed else 'no' }}">Email finder</li>
      </ul>
      <a class="btn btn-block {{ '' if p.featured else 'btn-ghost' }}" href="{{ wa_link('Hi, I want the ' ~ p.name ~ ' plan of Hunter Bot') }}">Get {{ p.name }}</a>
    </div>
    {% endfor %}
  </div>
</section>

<footer>SHAMUVERSE HUNTER BOT &middot; Use collected data responsibly and follow anti-spam laws</footer>
{% endblock %}