@extends('layouts.site', ['title' => data_get($content, 'seo.title', 'MuxiYeto')])

@push('styles')
<style>
    .hero { background:linear-gradient(130deg, #102d47 0%, #0e8176 100%); color:#fff; padding:92px 0 76px; }
    .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
    .eyebrow { margin:0 0 16px; color:#f4b24f; font-size:14px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
    h1 { margin:0; max-width:780px; font-size:clamp(42px, 6vw, 72px); line-height:1.03; }
    .hero p { max-width:720px; margin:24px 0 32px; color:#e7eef8; font-size:20px; }
    .hero-panel { border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(255,255,255,.1); padding:30px; }
    .hero-panel h2 { margin:0 0 12px; }
    .hero-panel ul { margin:18px 0 0; padding-left:20px; color:#e7eef8; }
    .section { padding:74px 0; }
    .section-title { max-width:760px; margin-bottom:34px; }
    .section-title h2 { margin:0 0 10px; font-size:clamp(30px, 4vw, 46px); line-height:1.1; }
    .section-title p { color:var(--muted); font-size:18px; }
    .focus-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
    .focus-card { border:1px solid var(--line); border-radius:8px; padding:24px; background:#fff; }
    .focus-card h3 { margin:0 0 10px; font-size:22px; }
    .focus-card p { color:var(--muted); margin:0; }
    .trial-band { background:var(--soft); }
    .trial-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:38px; align-items:start; }
    form { border:1px solid var(--line); border-radius:8px; background:#fff; padding:28px; }
    label { display:block; margin-bottom:18px; color:#314258; font-weight:800; }
    input { width:100%; min-height:48px; margin-top:8px; padding:0 14px; border:1px solid #cdd7e5; border-radius:6px; font:inherit; }
    .notice { margin-bottom:18px; padding:14px 16px; border-radius:6px; background:#e9f8f5; color:#075f56; font-weight:800; }
    .video-box { min-height:340px; border-radius:8px; display:grid; place-items:center; text-align:center; color:#fff; background:#111827; padding:28px; overflow:hidden; }
    .video-box strong { display:block; font-size:28px; margin-bottom:10px; }
    .video-box iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:8px; }
    @media (max-width:900px) { .hero-grid, .trial-grid, .focus-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
    <section class="hero">
        <div class="container hero-grid">
            <div>
                <p class="eyebrow">{{ data_get($content, 'hero.eyebrow') }}</p>
                <h1>{{ data_get($content, 'hero.title') }}</h1>
                <p>{{ data_get($content, 'hero.body') }}</p>
                <a class="button" href="{{ data_get($content, 'hero.button_url', '#trial') }}">{{ data_get($content, 'hero.button_label') }}</a>
            </div>
            <div class="hero-panel">
                <h2>{{ data_get($content, 'hero.panel_title') }}</h2>
                <ul>
                    @foreach (muxiyeto_lines(data_get($content, 'hero.panel_items')) as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

    <section class="section" id="focus">
        <div class="container">
            <div class="section-title">
                <p class="eyebrow">{{ data_get($content, 'focus.eyebrow') }}</p>
                <h2>{{ data_get($content, 'focus.title') }}</h2>
                <p>{{ data_get($content, 'focus.body') }}</p>
            </div>
            <div class="focus-grid">
                @foreach (data_get($content, 'focus.cards', []) as $card)
                    <article class="focus-card">
                        <h3>{{ data_get($card, 'title') }}</h3>
                        <p>{{ data_get($card, 'body') }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section trial-band" id="trial">
        <div class="container trial-grid">
            <div class="section-title">
                <p class="eyebrow">{{ data_get($content, 'trial.eyebrow') }}</p>
                <h2>{{ data_get($content, 'trial.title') }}</h2>
                <p>{{ data_get($content, 'trial.body') }}</p>
            </div>
            <form method="post" action="{{ route('trial.request') }}">
                @csrf
                @if (session('status'))
                    <div class="notice">{{ session('status') }}</div>
                @endif
                <label>Full name<input type="text" name="full_name" autocomplete="name" required></label>
                <label>Email address<input type="email" name="email" autocomplete="email" required></label>
                <label>Phone number<input type="tel" name="phone" autocomplete="tel" required></label>
                <button class="button" type="submit">{{ data_get($content, 'trial.button_label') }}</button>
            </form>
        </div>
    </section>

    <section class="section" id="video">
        <div class="container">
            <div class="section-title">
                <p class="eyebrow">{{ data_get($content, 'video.eyebrow') }}</p>
                <h2>{{ data_get($content, 'video.title') }}</h2>
                <p>{{ data_get($content, 'video.body') }}</p>
            </div>
            <div class="video-box">
                @if ($embed = muxiyeto_video_embed(data_get($content, 'video.embed_url')))
                    <iframe src="{{ $embed }}" title="PhenominalX EA bot video" allowfullscreen></iframe>
                @else
                    <div>
                        <strong>{{ data_get($content, 'video.placeholder_title') }}</strong>
                        <span>{{ data_get($content, 'video.placeholder_body') }}</span>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <section class="section trial-band" id="support">
        <div class="container">
            <div class="section-title">
                <p class="eyebrow">{{ data_get($content, 'support.eyebrow') }}</p>
                <h2>{{ data_get($content, 'support.title') }}</h2>
                <p>{{ data_get($content, 'support.body') }}</p>
            </div>
        </div>
    </section>
@endsection