@extends('layouts.app-public')

@section('title', 'Pricing • InsightsReady')

@push('styles')
    <style>
        .page-head {
            padding: 28px 0 4px;
            background: linear-gradient(#ffffff, #f5f7f9);
            border-bottom: 1px solid var(--border)
        }

        h1 {
            font-size: clamp(26px, 4.4vw, 42px);
            line-height: 1.1;
            margin: 0 0 16px
        }

        .pill-row {
            display: grid;
            grid-template-columns:1fr;
            gap: 12px;
            margin: 10px 0 20px
        }

        .pill {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px 14px
        }

        .pill strong {
            color: var(--brand-700)
        }

        .pill small {
            display: block;
            color: var(--ink-700)
        }

        @media (min-width: 980px) {
            .pill-row {
                grid-template-columns: repeat(4, 1fr)
            }
        }

        .plans {
            display: grid;
            grid-template-columns:1fr;
            gap: 16px;
            margin: 8px 0 18px
        }

        .plan {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px
        }

        .plan h3 {
            margin: 2px 0 10px;
            font-size: 16px
        }

        .price {
            font-size: 28px;
            font-weight: 800;
            color: var(--brand-700)
        }

        .sub {
            color: var(--ink-700);
            margin: 6px 0 12px
        }

        .plan .btn {
            padding: 8px 12px
        }

        @media (min-width: 980px) {
            .plans {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .addons {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px;
            margin: 10px 0 20px;
            color: var(--ink-700)
        }

        .faq {
            margin: 8px 0 80px
        }

        .faq h3 {
            margin: 6px 0 12px
        }

        details.qa {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px 12px;
            margin: 10px 0
        }

        details.qa summary {
            cursor: pointer;
            list-style: none;
            font-weight: 700
        }

        details.qa summary::-webkit-details-marker {
            display: none
        }

        details.qa p {
            color: var(--ink-700)
        }
    </style>
@endpush

@section('content')
    <section class="page-head">
        <div class="container">
            <h1>Simple, transparent pricing</h1>
            <div class="pill-row" role="list">
                <div class="pill" role="listitem"><strong>Free trial</strong><small>14 days</small></div>
                <div class="pill" role="listitem"><strong>Cancel</strong><small>Anytime</small></div>
                <div class="pill" role="listitem"><strong>Support</strong><small>Email + SLA</small></div>
                <div class="pill" role="listitem"><strong>Security</strong><small>SOC 2</small></div>
            </div>
        </div>
    </section>

    <div class="container">
        <section class="plans" aria-label="Plans">
            <article class="plan" aria-labelledby="starter-title">
                <h3 id="starter-title">Starter</h3>
                <div class="price">$0/mo</div>
                <p class="sub">Try the platform</p>
                <p class="sub" style="font-size:14px">1 workspace • 2 connectors • Basic reports</p>
                <button class="btn" type="button">Choose plan</button>
            </article>

            <article class="plan" aria-labelledby="pro-title">
                <h3 id="pro-title">Pro</h3>
                <div class="price">$799/mo</div>
                <p class="sub">For growing brands</p>
                <p class="sub" style="font-size:14px">Unlimited reports • 10 connectors • AI apps</p>
                <button class="btn btn--brand" type="button">Choose plan</button>
            </article>

            <article class="plan" aria-labelledby="ent-title">
                <h3 id="ent-title">Enterprise</h3>
                <div class="price">Custom/mo</div>
                <p class="sub">Everything at scale</p>
                <p class="sub" style="font-size:14px">SAML/SSO • VPC peering • Dedicated support</p>
                <button class="btn" type="button">Choose plan</button>
            </article>
        </section>

        <section class="addons" aria-label="Add-ons">
            <h3 style="margin:0 0 8px">Add‑ons</h3>
            Extra connectors • AI credits • Premium support • Private apps
        </section>

        <section class="faq" aria-label="FAQs">
            <h3>FAQs</h3>
            <details class="qa">
                <summary>How does billing work?</summary>
                <p>Short answer placeholder</p>
            </details>
            <details class="qa">
                <summary>Can I switch plans?</summary>
                <p>Short answer placeholder</p>
            </details>
            <details class="qa">
                <summary>Do you offer discounts?</summary>
                <p>Short answer placeholder</p>
            </details>
            <details class="qa">
                <summary>What about data security?</summary>
                <p>Short answer placeholder</p>
            </details>
        </section>
    </div>
@endsection