@extends('layouts.app-public')

@section('title', 'InsightsReady • The App Store for E‑commerce Analytics')

@push('styles')
    <style>
        /* ======= Hero ======= */
        .hero {
            background: linear-gradient(#ffffff, #f5f7f9);
            border-bottom: 1px solid var(--border)
        }

        .hero__wrap {
            display: grid;
            grid-template-columns:1fr;
            gap: 20px;
            padding: 48px 0 28px
        }

        .hero h1 {
            font-size: clamp(28px, 4.8vw, 48px);
            line-height: 1.05;
            margin: 0
        }

        .hero p {
            font-size: clamp(16px, 2.2vw, 20px);
            color: var(--ink-700);
            margin: 12px 0 18px
        }

        .hero .cta {
            display: flex;
            gap: 12px;
            align-items: center
        }

        .chips {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 26px 0 0
        }

        .chip {
            border: 1px solid var(--chip-border);
            background: var(--chip);
            color: var(--ink-700);
            padding: 8px 12px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14px
        }

        /* ======= Journey Line ======= */
        .journey {
            background: #eaf2f2;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border)
        }

        .journey .container {
            padding-top: 24px;
            padding-bottom: 26px
        }

        .journey h3 {
            margin: 0 0 22px;
            font-size: 18px;
            color: var(--ink-700)
        }

        .timeline {
            position: relative;
            padding-top: 26px
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: 6px;
            right: 6px;
            top: 15px;
            height: 4px;
            border-radius: 6px;
            background: #d6e6e5
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }

        .step {
            position: relative;
            text-align: left
        }

        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--brand);
            border: 3px solid #d6e6e5;
            position: absolute;
            top: -16px;
            left: 0
        }

        .step h4 {
            margin: 8px 0 4px;
            font-size: 16px
        }

        .step p {
            margin: 0;
            color: var(--ink-700);
            font-size: 14px
        }

        @media (max-width: 720px) {
            .steps {
                grid-template-columns:1fr
            }

            .timeline::before {
                display: none
            }

            .dot {
                position: static;
                margin-bottom: 6px
            }
        }

        /* ======= Metrics ======= */
        .stats {
            background: #fff
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px
        }

        .card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
        }

        .metric {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: .2px
        }

        .label {
            color: var(--ink-700)
        }

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

        /* ======= Quote ======= */
        .quote {
            padding: 14px 0 20px;
            color: var(--ink-700);
            font-style: italic;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background: #fff
        }

        /* ======= Audience ======= */
        .audiences {
            background: var(--bg);
            padding: 34px 0 80px
        }

        .aud-grid {
            display: grid;
            grid-template-columns:1fr;
            gap: 16px
        }

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

        .aud h5 {
            margin: 2px 0 8px;
            font-size: 16px
        }

        .aud p {
            margin: 0 0 14px;
            color: var(--ink-700)
        }

        .aud .btn {
            padding: 10px 14px
        }

        @media (min-width: 860px) {
            .aud-grid {
                grid-template-columns:1fr 1fr
            }
        }
    </style>
@endpush

@section('content')
    <!-- ======= Hero ======= -->
    <section class="hero">
        <div class="container hero__wrap">
            <div>
                <h1>The App Store for E‑commerce Analytics</h1>
                <p>Activate analytics in hours, not months. Built for e‑commerce.</p>
                <div class="cta">
                    <a class="btn btn--brand" href="#">Get Started</a>
                </div>
                <div class="chips" aria-label="Customer examples">
                    <span class="chip">ModernHome</span>
                    <span class="chip">DTC Scale</span>
                    <span class="chip">PowerBI Masters</span>
                    <span class="chip">Commerce Agency</span>
                    <span class="chip">RetailEdge</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ======= Journey / 3 steps ======= -->
    <section class="journey">
        <div class="container">
            <h3>From messy data to outcomes — in 3 steps</h3>
            <div class="timeline">
                <div class="steps">
                    <div class="step">
                        <div class="dot" aria-hidden="true"></div>
                        <h4>your data</h4>
                        <p>Import Shopify, Magento, Ads → DWH</p>
                    </div>
                    <div class="step">
                        <div class="dot" aria-hidden="true"></div>
                        <h4>Instant insights</h4>
                        <p>Power BI dashboards deploy day one</p>
                    </div>
                    <div class="step">
                        <div class="dot" aria-hidden="true"></div>
                        <h4>Activate AI apps</h4>
                        <p>Turn on marketplace solutions</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ======= Metrics ======= -->
    <section class="stats">
        <div class="container" style="padding:26px 20px 18px">
            <div class="cards">
                <div class="card">
                    <div class="metric">12,500+</div>
                    <div class="label">Stores</div>
                </div>
                <div class="card">
                    <div class="metric">$25B+</div>
                    <div class="label">GMV</div>
                </div>
                <div class="card">
                    <div class="metric">150+</div>
                    <div class="label">Apps</div>
                </div>
                <div class="card">
                    <div class="metric">300+</div>
                    <div class="label">Partners</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ======= Quote ======= -->
    <section class="quote">
        <div class="container">
            “We unified data in a weekend and launched a predictive inventory app a week later. Stockouts are down 30%.
            ” — <strong>Jane Doe, COO at Modern Home</strong>
        </div>
    </section>

    <!-- ======= For businesses / partners ======= -->
    <section class="audiences">
        <div class="container">
            <div class="aud-grid">
                <div class="aud">
                    <h5>For Businesses</h5>
                    <p>Unify data • Instant dashboards • AI apps</p>
                    <a href="#" class="btn btn--brand">Explore Platform</a>
                </div>
                <div class="aud">
                    <h5>For Partners</h5>
                    <p>Build once • Sell to thousands</p>
                    <a href="#" class="btn">Join Ecosystem</a>
                </div>
            </div>
        </div>
    </section>
@endsection