{{-- Pricing (design: Screens · Marketing / Pricing). Prices come from the plans table. --}}
@extends('layouts.marketing')
@section('title', 'Pricing — InLynq')
@section('description', 'Start free. Upgrade when it pays. Prices in naira, paid securely through Paystack.')

@php($check = '<span style="color:var(--brand-600)">'.\App\Support\Icons::svg('check').'</span>')
@php($dash = '<span class="iq-muted">—</span>')

@section('content')
<section style="max-width:1200px;margin:0 auto;padding:80px clamp(16px,4vw,40px) 40px;text-align:center" class="iq-stack">
  <span class="iq-overline">Pricing</span>
  <h1 class="iq-serif app-display-lg" style="margin:0;font-size:clamp(40px,6vw,64px);line-height:1.06">Start free. Upgrade when it pays.</h1>
  <p class="iq-sub" style="margin:0 auto;font-size:18px;max-width:46ch">Prices in naira. Pay by card, bank transfer or USSD, securely processed by Paystack.</p>
  <div style="margin:16px auto 0" class="iq-seg" data-billing-toggle><button data-value="m">Monthly</button><button class="is-active" data-value="y">Yearly · save 20%</button></div>
</section>
<section style="max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)">@include('marketing.partials-plans')</section>

<section style="max-width:1000px;margin:0 auto;padding:96px clamp(16px,4vw,40px) 0">
  <h2 class="iq-serif" style="font-size:40px;line-height:44px;margin:0 0 16px">Compare plans</h2>
  <div style="overflow-x:auto">
  <table class="iq-table" style="font-size:14px;min-width:560px">
    <thead><tr><th style="width:40%;background:transparent"></th><th style="background:transparent">Free</th><th style="background:var(--brand-50);color:var(--brand-ink)">Pro</th><th style="background:transparent">Business</th></tr></thead>
    <tbody>
    @foreach ([
      'Profile' => [['Public profile', $check, $check, $check], ['Companies', '2', 'Unlimited', 'Unlimited'], ['Products & projects', '3 each', 'Unlimited', 'Unlimited'], ['Links', '10', 'Unlimited', 'Unlimited'], ['Custom domain', $dash, $check, $check], ['Remove InLynq branding', $dash, $check, $check]],
      'Design' => [['Themes', '5 accents', 'All premium', 'All premium'], ['Custom accent & fonts', $dash, $check, $check]],
      'Proof' => [['Identity verification', $check, $check, $check], ['Business & revenue verification', $dash, $check, 'Priority']],
      'Insights' => [['Analytics history', '7 days', '12 months', 'All time'], ['Export CSV', $dash, $check, $check]],
      'Team' => [['Seats', '1', '1', 'Up to 10'], ['Lead capture to CRM', $dash, $dash, $check]],
    ] as $group => $rows)
      <tr><td colspan="4" style="padding-top:28px;background:transparent"><span class="iq-overline">{{ $group }}</span></td></tr>
      @foreach ($rows as [$label, $free, $pro, $biz])
        <tr><td class="strong">{{ $label }}</td><td>{!! $free !!}</td><td style="background:var(--brand-50)">{!! $pro !!}</td><td>{!! $biz !!}</td></tr>
      @endforeach
    @endforeach
    </tbody>
  </table>
  </div>
</section>

<section style="max-width:800px;margin:0 auto;padding:96px 16px">
  <h2 class="iq-serif" style="font-size:40px;line-height:44px;margin:0 0 24px">Questions</h2>
  @include('marketing.partials-faq')
</section>

<section style="padding:0 clamp(16px,4vw,40px) 96px">
  <div class="iq-row" style="max-width:1000px;margin:0 auto;border:1px solid var(--border-subtle);border-radius:20px;background:var(--surface-1);padding:48px;justify-content:space-between;gap:32px">
    <div><h2 class="iq-serif" style="font-size:40px;line-height:44px;margin:0">Your work. Your proof. One link.</h2><p class="iq-sub" style="margin:8px 0 0">Free forever. Upgrade in under a minute.</p></div>
    <a class="iq-btn iq-btn-primary iq-btn-lg" href="{{ route('register') }}">Create your InLynq <x-iq.icon name="arrowRight" /></a>
  </div>
</section>
@endsection