@extends('layouts.base')
@section('title', 'Automated WooCommerce order confirmation calls')
@section('body')
<nav class="navbar navbar-expand-md bg-white border-bottom landing-nav"><div class="container">
  <a class="navbar-brand fw-bold" href="/">&#9742; VoiceOrder</a>
  <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nv" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="nv"><ul class="navbar-nav ms-auto align-items-md-center gap-md-3">
    <li class="nav-item"><a class="nav-link" href="#how">How it works</a></li><li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
    <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li><li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    @auth <li class="nav-item"><a class="btn btn-primary btn-sm" href="/home">Dashboard</a></li>
    @else <li class="nav-item"><a class="nav-link" href="{{ route('login') }}">Login</a></li><li class="nav-item"><a class="btn btn-primary btn-sm" href="{{ route('register') }}">Start free</a></li> @endauth
  </ul></div></div></nav>

<section class="hero"><div class="container"><div class="row align-items-center"><div class="col-lg-7">
  <span class="badge bg-warning text-dark mb-3">5 FREE calls on signup</span>
  <h1 class="display-5">Confirm WooCommerce orders with an automatic phone call.</h1>
  <p class="lead opacity-75">Your customer gets a call in <strong>Bangla or English</strong>, presses <strong>1</strong> to confirm or <strong>2</strong> to cancel, and the order updates itself. Fewer fake orders, fewer returns.</p>
  <p class="opacity-75"><strong>No monthly subscription. Ever.</strong> Registration is free. Pay only per call.</p>
  <a class="btn btn-light btn-lg me-2" href="{{ route('register') }}">Create free account</a><a class="btn btn-outline-light btn-lg" href="#how">See how it works</a>
</div><div class="col-lg-5 d-none d-lg-block"><div class="card p-4 text-dark"><div class="small text-muted">Incoming call</div><p class="my-2">"Hello Rahim, this is Shop BD. To confirm your order press 1. To cancel press 2."</p><div class="d-flex gap-2"><span class="badge-s s-ok">1 → Confirmed</span><span class="badge-s s-bad">2 → Cancelled</span></div></div></div></div></div></section>

<section id="how" class="py-5"><div class="container"><h2 class="text-center mb-4">How it works</h2><div class="row g-3">
  @foreach ([['1','Install the plugin','Upload the VoiceOrder plugin to WordPress and connect your site with a one-time pairing code.'],['2','Customer places an order','The plugin detects new WooCommerce orders and queues a call after your chosen delay.'],['3','Customer presses 1 or 2','A voice message plays in Bangla or English. The keypad answer is verified server-side.'],['4','Order updates itself','Confirmed orders move to “Confirmed”, cancelled orders to “Cancelled”, with an order note.']] as $s)
  <div class="col-md-6 col-lg-3"><div class="card p-3 feature"><div class="fs-3 fw-bold text-primary">{{ $s[0] }}</div><h3 class="h6">{{ $s[1] }}</h3><p class="small text-muted mb-0">{{ $s[2] }}</p></div></div>
  @endforeach</div></div></section>

<section id="features" class="py-5 bg-white border-top border-bottom"><div class="container"><h2 class="text-center mb-4">Features</h2><div class="row g-3">
  @foreach ([['Bangla & English voices','Male and female voices, editable messages, optional order-number announcement.'],['Smart retries','Configurable retry count and interval for no-answer or busy calls, within safe limits.'],['Never double-called','Idempotent order detection: one order, one call, even if WooCommerce fires several hooks.'],['Pay-As-You-Go wallet','Free credits first, then your wallet. Every charge is in an immutable ledger.'],['COD-safe','Confirming an order never marks a Cash-on-Delivery order as paid.'],['Full call history','Status, response, attempts, charge and masked phone number for every call.'],['Secure by design','Signed callbacks, hashed API keys, encrypted secrets, tenant isolation.'],['HPOS compatible','Uses WooCommerce CRUD APIs and a native “Confirmed” order status.']] as $f)
  <div class="col-md-6 col-lg-3"><div class="card p-3 feature"><h3 class="h6">{{ $f[0] }}</h3><p class="small text-muted mb-0">{{ $f[1] }}</p></div></div>@endforeach</div></div></section>

<section id="pricing" class="py-5"><div class="container"><h2 class="text-center mb-2">Simple Pay-As-You-Go pricing</h2><p class="text-center text-muted mb-4">No monthly or yearly subscription. No minimum commitment.</p>
  <div class="row justify-content-center g-3"><div class="col-md-5"><div class="card p-4 h-100 border-primary"><span class="badge-s s-info align-self-start">Welcome offer</span><div class="display-6 fw-bold my-2">5 free calls</div><p class="text-muted mb-0">Added once to every verified account. Used before your wallet balance.</p></div></div>
  <div class="col-md-5"><div class="card p-4 h-100"><span class="badge-s s-mute align-self-start">Per call</span><div class="display-6 fw-bold my-2">{{ $currency }} {{ rtrim(rtrim(number_format($price, 2), '0'), '.') }}</div><p class="text-muted mb-0">Default price per accepted call. Your price may differ if agreed with us. Rejected calls are never charged.</p></div></div></div></div></section>

<section class="py-5 bg-white border-top"><div class="container"><div class="row g-4"><div class="col-md-6"><h3 class="h5">Supported voice languages</h3><p class="text-muted">Bangla (বাংলা) and English, male or female voice where the provider supports it.</p></div>
<div class="col-md-6"><h3 class="h5">WooCommerce support</h3><p class="text-muted">WooCommerce 7+, WordPress 6+, HPOS (High-Performance Order Storage), Cash on Delivery and prepaid orders, manual call button on the order screen.</p></div></div></div></section>

<section id="faq" class="py-5"><div class="container" style="max-width:820px"><h2 class="text-center mb-4">FAQ</h2><div class="accordion" id="faq">
  @foreach ([['Is there a subscription?','No. Registration is free and there is no monthly or yearly fee. You only pay for calls from your wallet.'],['How do the free credits work?','Every verified account receives 5 free call credits, once. They are used before paid balance and cannot be re-earned by reinstalling the plugin or reconnecting your site.'],['How many websites can I connect?','One website by default. Additional websites need approval from our team – you can request one from your dashboard.'],['Does pressing 1 mark a COD order as paid?','No. Confirmation only changes the order to “Confirmed”. Payment status is never changed by the call.'],['What if the customer does not answer?','The order status stays unchanged and the call is retried according to your retry settings.'],['What if a call is rejected by the voice provider?','You are not charged for calls the provider rejects.']] as $i => $q)
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button {{ $i ? 'collapsed' : '' }}" data-bs-toggle="collapse" data-bs-target="#q{{ $i }}" type="button">{{ $q[0] }}</button></h3><div id="q{{ $i }}" class="accordion-collapse collapse {{ $i ? '' : 'show' }}" data-bs-parent="#faq"><div class="accordion-body">{{ $q[1] }}</div></div></div>@endforeach</div></div></section>

<section id="contact" class="py-5 bg-white border-top"><div class="container" style="max-width:640px"><h2 class="text-center mb-3">Contact us</h2>
  @if($contactEmail)<p class="text-center text-muted">Email: {{ $contactEmail }}</p>@endif
  <form method="post" action="{{ route('contact') }}" class="row g-2">@csrf
    <div class="col-md-6"><input class="form-control" name="name" placeholder="Your name" required maxlength="100"></div><div class="col-md-6"><input class="form-control" type="email" name="email" placeholder="Email" required></div>
    <div class="col-12"><textarea class="form-control" name="message" rows="4" placeholder="How can we help?" required maxlength="2000"></textarea></div><div class="col-12"><button class="btn btn-primary" type="submit">Send</button></div></form></div></section>
<footer class="py-4 text-center text-muted small">&copy; {{ date('Y') }} VoiceOrder · <a href="{{ route('login') }}">Login</a> · <a href="{{ route('register') }}">Register</a></footer>
@endsection