@extends('layouts.app-public')

@section('title', 'How it works • InsightsReady')

@push('styles')
    <style>
        .page-head {
            padding: 28px 0 8px;
            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 6px
        }

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

        .diagram-wrap {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            margin: 18px 0 24px;
            padding: 10px 10px 14px
        }

        .diagram {
            width: 100%;
            height: auto
        }

        .node-title {
            font: 600 14px Inter, system-ui;
            fill: #111827
        }

        .node-sub {
            font: 400 12px Inter, system-ui;
            fill: #60707e
        }

        .node-bg {
            fill: #fff
        }

        .node-stroke {
            stroke: #dbe2e8
        }

        .link {
            stroke: #2f7a78
        }

        .steps {
            display: grid;
            grid-template-columns:1fr;
            gap: 14px;
            margin: 12px 0 6px
        }

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

        .step h4 {
            margin: 0 0 6px
        }

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

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

        .metrics {
            padding: 18px 0 46px
        }

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

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

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

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

        @media (min-width: 980px) {
            .cards {
                grid-template-columns: repeat(4, 1fr)
            }
        }
    </style>
@endpush

@section('content')
    <section class="page-head">
        <div class="container">
            <h1>How it works</h1>
            <p class="sub">From messy data to outcomes in three steps.</p>
            <div class="diagram-wrap">
                <svg class="diagram" viewBox="0 0 1200 400" role="img"
                     aria-label="A diagram showing data flow from E-commerce platforms and SaaS services into an InsightsReady DWH, which then feeds into Power BI, ERPs, Web Analytics, and Marketplace Apps.">
                    <style>
                        .link {
                            stroke: #008080;
                            stroke-width: 2.5;
                            fill: none;
                        }

                        .node-bg {
                            fill: #fff;
                            stroke: #cfd9e3;
                            stroke-width: 2;
                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
                        }

                        .dwh-bg {
                            fill: #008080;
                            stroke: #006666;
                            stroke-width: 2;
                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
                        }

                        .node-title {
                            font-family: Arial, sans-serif;
                            font-size: 16px;
                            font-weight: bold;
                            fill: #333;
                        }

                        .dwh-title {
                            font-family: Arial, sans-serif;
                            font-size: 16px;
                            font-weight: bold;
                            fill: #fff;
                        }

                        .node-sub {
                            font-family: Arial, sans-serif;
                            font-size: 14px;
                            fill: #666;
                        }

                        .dwh-sub {
                            font-family: Arial, sans-serif;
                            font-size: 14px;
                            fill: #e0f2f2;
                        }
                    </style>
                    <line class="link" x1="130" y1="180" x2="350" y2="180"/>
                    <line class="link" x1="450" y1="120" x2="450" y2="150"/>
                    <line class="link" x1="550" y1="180" x2="650" y2="180"/>
                    <path class="link" d="M 450 230 C 450 260, 350 260, 350 290"/>
                    <path class="link" d="M 450 230 C 450 260, 600 260, 600 290"/>
                    <path class="link" d="M 450 230 C 450 260, 900 260, 900 290"/>
                    <circle cx="100" cy="180" r="28" fill="#fff" stroke="#cfd9e3" stroke-width="2"/>
                    <text class="node-sub" x="50" y="240" text-anchor="middle">E‑commerce</text>
                    <text class="node-sub" x="50" y="257" text-anchor="middle">platforms</text>
                    <rect class="node-bg" x="350" y="50" rx="14" ry="14" width="200" height="70"/>
                    <text class="node-title" x="450" y="90" text-anchor="middle">SaaS Services</text>
                    <rect class="dwh-bg" x="350" y="150" rx="14" ry="14" width="200" height="80"/>
                    <text class="dwh-title" x="450" y="186" text-anchor="middle">InsightsReady DWH</text>
                    <text class="dwh-sub" x="450" y="210" text-anchor="middle">Unify your data</text>
                    <rect class="node-bg" x="650" y="150" rx="14" ry="14" width="200" height="80"/>
                    <text class="node-title" x="750" y="186" text-anchor="middle">Power BI</text>
                    <text class="node-sub" x="750" y="210" text-anchor="middle">Access instant insights</text>
                    <rect class="node-bg" x="250" y="290" rx="14" ry="14" width="200" height="70"/>
                    <text class="node-title" x="350" y="330" text-anchor="middle">ERPs</text>
                    <rect class="node-bg" x="500" y="290" rx="14" ry="14" width="200" height="70"/>
                    <text class="node-title" x="600" y="330" text-anchor="middle">Web Analytics Tracking</text>
                    <rect class="node-bg" x="800" y="290" rx="14" ry="14" width="200" height="70"/>
                    <text class="node-title" x="900" y="320" text-anchor="middle">Marketplace Apps</text>
                    <text class="node-sub" x="900" y="340" text-anchor="middle">Activate AI solutions</text>
                </svg>
            </div>
        </div>
    </section>

    <div class="container">
        <section class="steps" aria-label="Three steps">
            <div class="step">
                <h4>Unify your data</h4>
                <p>Pre‑integrated connectors & models</p>
            </div>
            <div class="step">
                <h4>Access instant insights</h4>
                <p>Dashboards available day one</p>
            </div>
            <div class="step">
                <h4>Activate AI solutions</h4>
                <p>Apps to drive outcomes</p>
            </div>
        </section>

        <section class="metrics" aria-label="Metrics">
            <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 analyzed</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>
        </section>
    </div>
@endsection