@extends('layouts.marketing')

@section('title', 'Home')

@push('styles')
<style>
    .hero {
        padding: 64px 24px 80px;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }
    .hero h1 {
        font-size: clamp(var(--md-sys-typescale-headline), 5vw, 3rem);
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 24px;
        color: var(--md-sys-color-on-surface);
        letter-spacing: -0.02em;
    }
    .hero .lead {
        font-size: 1.25rem;
        color: var(--md-sys-color-outline);
        margin: 0 0 32px;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero .cta-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .hero .cta {
        display: inline-block;
        padding: 16px 32px;
        border-radius: var(--md-sys-radius-xl);
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .hero .cta.primary {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        box-shadow: var(--md-sys-shadow);
    }
    .hero .cta.primary:hover { transform: translateY(-2px); box-shadow: var(--md-sys-shadow-lg); }
    .hero .cta.secondary {
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-primary-container);
    }
    .hero .cta.secondary:hover { background: var(--md-sys-color-surface-variant); }
    .section {
        padding: 48px 24px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .section h2 {
        font-size: var(--md-sys-typescale-headline);
        font-weight: 700;
        text-align: center;
        margin: 0 0 40px;
        color: var(--md-sys-color-on-surface);
    }
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 24px;
    }
    .feature-card {
        background: var(--md-sys-color-surface-variant);
        border-radius: var(--md-sys-radius-lg);
        padding: 24px;
        box-shadow: var(--md-sys-shadow);
        transition: box-shadow 0.2s, transform 0.2s;
    }
    .feature-card:hover { box-shadow: var(--md-sys-shadow-lg); transform: translateY(-2px); }
    .feature-card h3 {
        font-size: var(--md-sys-typescale-title);
        font-weight: 600;
        margin: 0 0 8px;
        color: var(--md-sys-color-primary);
    }
    .feature-card p {
        margin: 0;
        font-size: var(--md-sys-typescale-body);
        color: var(--md-sys-color-outline);
    }
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px;
        justify-items: center;
    }
    .pricing-card {
        background: var(--md-sys-color-surface-variant);
        border-radius: var(--md-sys-radius-lg);
        padding: 28px;
        text-align: center;
        max-width: 280px;
        width: 100%;
        box-shadow: var(--md-sys-shadow);
        border: 2px solid transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .pricing-card.featured {
        border-color: var(--md-sys-color-primary);
        box-shadow: var(--md-sys-shadow-lg);
    }
    .pricing-card h3 {
        font-size: var(--md-sys-typescale-title);
        font-weight: 700;
        margin: 0 0 8px;
        color: var(--md-sys-color-on-surface);
    }
    .pricing-card .price {
        font-size: 2rem;
        font-weight: 800;
        color: var(--md-sys-color-primary);
        margin: 16px 0;
    }
    .pricing-card .price span { font-size: 1rem; font-weight: 500; color: var(--md-sys-color-outline); }
    .pricing-card p {
        margin: 0;
        font-size: var(--md-sys-typescale-label);
        color: var(--md-sys-color-outline);
    }
    .cta-section {
        text-align: center;
        padding: 56px 24px;
        background: linear-gradient(180deg, var(--md-sys-color-primary-container) 0%, var(--md-sys-color-surface) 100%);
        border-radius: var(--md-sys-radius-lg);
        margin: 0 24px 48px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 48px;
    }
    .cta-section h2 {
        margin: 0 0 16px;
        font-size: var(--md-sys-typescale-headline);
    }
    .cta-section p { margin: 0 0 24px; color: var(--md-sys-color-outline); }
</style>
@endpush

@section('content')
    <section class="hero" aria-labelledby="hero-heading">
        <h1 id="hero-heading">AI-powered marketing and commerce in one place</h1>
        <p class="lead">Generate content, run campaigns, sell digital products, and automate replies with your knowledge base. Multi-tenant, secure, and ready to deploy.</p>
        <div class="cta-wrap">
            @if($installed)
                <a href="{{ route('login') }}" class="cta primary">Log in</a>
                <a href="{{ route('login') }}" class="cta secondary">Get started</a>
            @else
                <a href="{{ url('/install') }}" class="cta primary">Complete setup</a>
            @endif
        </div>
    </section>

    <section class="section" aria-labelledby="features-heading">
        <h2 id="features-heading">Everything you need</h2>
        <div class="features-grid">
            <div class="feature-card">
                <h3>AI content</h3>
                <p>Generate marketing copy and content with AI, using your knowledge base for context.</p>
            </div>
            <div class="feature-card">
                <h3>Campaigns</h3>
                <p>Schedule and publish posts to social platforms. Track status and export data.</p>
            </div>
            <div class="feature-card">
                <h3>Social replies</h3>
                <p>Auto-reply to messages with AI, configurable tone and conversation memory.</p>
            </div>
            <div class="feature-card">
                <h3>Knowledge base</h3>
                <p>Upload documents, chunk and index. Feed context into AI and auto-replies.</p>
            </div>
            <div class="feature-card">
                <h3>Products & orders</h3>
                <p>Sell digital products, manage orders, and deliver files with signed URLs.</p>
            </div>
            <div class="feature-card">
                <h3>Landing pages</h3>
                <p>Build and publish landing pages. Team members and plan limits included.</p>
            </div>
        </div>
    </section>

    @if(!empty($pricing))
    <section class="section" aria-labelledby="pricing-heading">
        <h2 id="pricing-heading">Plans</h2>
        <div class="pricing-grid">
            @foreach($pricing as $planKey => $plan)
                @php
                    $amount = $plan['amount_paise'] ?? 0;
                    $currency = $plan['currency'] ?? 'INR';
                    $duration = $plan['duration_days'] ?? 30;
                    $label = $planKey === 'free' ? 'Free' : ucfirst($planKey);
                    $priceDisplay = $amount === 0 ? 'Free' : (number_format($amount / 100) . ' ' . $currency . '/' . $duration . ' days');
                @endphp
                <div class="pricing-card {{ $planKey === 'growth' ? 'featured' : '' }}">
                    <h3>{{ $label }}</h3>
                    <div class="price">{{ $priceDisplay }}@if($amount > 0)<span> / {{ $duration }} days</span>@endif</div>
                    <p>Upgrade in-app after login.</p>
                </div>
            @endforeach
        </div>
    </section>
    @endif

    <section class="cta-section" aria-labelledby="cta-heading">
        <h2 id="cta-heading">Ready to get started?</h2>
        <p>Install in minutes with the web installer. No command line required.</p>
        @if($installed)
            <a href="{{ route('login') }}" class="cta primary">Log in</a>
        @else
            <a href="{{ url('/install') }}" class="cta primary">Install now</a>
        @endif
    </section>
@endsection