@extends('layouts.site')

@section('title', 'Vertz Originals')

@push('styles')
    <style>
        :root {
            --hero-bg: url('{{ $heroBackground }}');
            --about-bg: url('{{ $aboutBackground }}');
        }
    </style>
@endpush

@section('content')
    <div class="site-shell">
        <header id="home" class="hero-section">
            <div class="social-rail social-rail-left d-none d-xl-flex" aria-hidden="true">
                <img class="social-rail__badge" src="{{ asset('assets/frame-41.png') }}" alt="">
            </div>

            <div class="social-rail social-rail-right d-none d-xl-flex">
                <a class="social-rail__link" href="#contact">
                    <span class="social-rail__label">YouTube</span>
                    <img class="social-rail__icon" src="{{ asset('assets/social-youtube.png') }}" alt="" aria-hidden="true">
                </a>
                <a class="social-rail__link" href="#contact">
                    <span class="social-rail__label">Instagram</span>
                    <img class="social-rail__icon" src="{{ asset('assets/social-instagram.png') }}" alt="" aria-hidden="true">
                </a>
                <a class="social-rail__link" href="#contact">
                    <span class="social-rail__label">Facebook</span>
                    <img class="social-rail__icon" src="{{ asset('assets/social-facebook.png') }}" alt="" aria-hidden="true">
                </a>
            </div>

            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container landing-container">
                    <a class="navbar-brand brand-mark" href="#home" aria-label="Vertz home">
                        <img src="{{ asset('assets/frame-41.png') }}" alt="Vertz Originals logo">
                        <span class="brand-mark__text">Vertz</span>
                    </a>
                    <button
                        class="navbar-toggler border-0 shadow-none"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#mainNav"
                        aria-controls="mainNav"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="mainNav">
                        <ul class="navbar-nav mx-auto mb-3 mb-lg-0">
                            <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="#about">About us</a></li>
                            <li class="nav-item"><a class="nav-link" href="#series">Series</a></li>
                        </ul>
                        <div class="d-flex flex-column flex-lg-row gap-2">
                            <a href="{{ url('/admin') }}" class="btn btn-brand btn-nav">Login</a>
                        </div>
                    </div>
                </div>
            </nav>

            <div class="container landing-container hero-content">
                <div class="row">
                    <div class="col-lg-7">
                        <p class="eyebrow eyebrow--hero-line">VERTZ ORIGINALS PRESENTS</p>
                        <h1 class="hero-title">
                            Original Vertical Series.
                            <span class="text-accent d-block">Studio Produced</span>
                        </h1>
                        <p class="hero-copy">
                            VERTZ is a production driven platform creating original vertical series, micro dramas, and short form films designed for modern viewing. Every project is developed in house, delivering cinematic storytelling in a vertical format built for today's audience
                        </p>
                        <div class="d-flex flex-wrap gap-3 hero-actions">
                            <a href="#series" class="btn btn-brand" data-scroll-target="series">Get Started</a>
                            <a href="#contact" class="btn btn-outline-brand-light" data-scroll-target="contact">Show Plans</a>
                        </div>
                    </div>
                </div>

                <div class="hero-strip" aria-label="Featured preview posters">
                    @forelse ($heroTrailers as $trailer)
                        <article class="mini-card" style="background-image: url('{{ $trailer->thumbnail_url }}');">
                            <div class="mini-card__meta">
                                <p class="mini-card__title">{{ $trailer->title }}</p>
                                @if ($trailer->trailer_url)
                                    <a class="play-button" href="{{ $trailer->trailer_url }}" target="_blank" rel="noopener noreferrer" aria-label="Play preview for {{ $trailer->title }}">
                                        <svg viewBox="0 0 18 20" aria-hidden="true" focusable="false">
                                            <path d="M2.5 1.7C2.5.8 3.5.2 4.3.6l10.4 6.1c.8.5.8 1.7 0 2.2L4.3 15c-.8.5-1.8-.1-1.8-1V1.7Z"></path>
                                        </svg>
                                    </a>
                                @else
                                    <span class="play-button play-button--disabled" aria-hidden="true">
                                        <svg viewBox="0 0 18 20" aria-hidden="true" focusable="false">
                                            <path d="M2.5 1.7C2.5.8 3.5.2 4.3.6l10.4 6.1c.8.5.8 1.7 0 2.2L4.3 15c-.8.5-1.8-.1-1.8-1V1.7Z"></path>
                                        </svg>
                                    </span>
                                @endif
                            </div>
                        </article>
                    @empty
                        <div class="empty-state-panel">
                            <p>Publish trailers from the  dashboard to populate the landing page automatically.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </header>

        <main>
            <section id="about" class="about-section section-padding">
                <div class="container landing-container position-relative">
                    <div class="row align-items-center g-5">
                        <div class="col-lg-6">
                            <div class="about-montage">
                                <div class="poster-frame poster-frame--tall">
                                    <img src="{{ $trailers->get(2)?->poster_url ?? asset('images/placeholders/trailer-poster.svg') }}" alt="Vertical drama poster">
                                </div>
                                <div class="poster-stack">
                                    <div class="poster-frame poster-frame--short">
                                        <img src="{{ $trailers->get(3)?->poster_url ?? asset('images/placeholders/trailer-poster.svg') }}" alt="Featured series poster">
                                    </div>
                                    <div class="poster-frame poster-frame--short">
                                        <img src="{{ $trailers->get(0)?->poster_url ?? asset('images/placeholders/trailer-poster.svg') }}" alt="Featured series poster">
                                    </div>
                                </div>
                                <div class="brand-column" aria-hidden="true">
                                    <span>V</span><span>E</span><span>R</span><span>T</span><span>Z</span>
                                </div>
                                <div class="montage-meta">
                                    <small>Vertical Series</small>
                                    <p>{{ $trailers->count() }} published titles</p>
                                    <p>{{ $featuredTrailers->count() }} featured releases</p>
                                    <p class="muted-copy">content workflow.</p>
                                    <p class="muted-copy">Built for fast admin publishing and mobile-first viewing.</p>
                                </div>
                                <div class="poster-frame poster-frame--tall">
                                    <img src="{{ $trailers->get(1)?->poster_url ?? asset('images/placeholders/trailer-poster.svg') }}" alt="Featured poster">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 ms-auto">
                            <div class="about-card">
                                <p class="eyebrow">VERTZ ORIGINAL PRODUCTIONS</p>
                                <h2 class="about-title">About VERTZ</h2>
                                <p class="section-copy">
                                     VERTZ is a studio focused on producing original vertical
                  content. Our slate includes micro dramas, short form series,
                  and vertical films created with a cinematic approach.
                                </p>
                                <p class="section-copy">
                                     Each project is developed and produced to deliver high quality
                  storytelling in a format tailored for how audiences watch
                  today.
                                </p>
                                <a href="#series" class="btn btn-brand btn-sm-wide" data-scroll-target="series">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="series" class="featured-section section-padding">
                <div class="container landing-container">
                    <div class="section-head text-center">
                        <h2>Featured <span class="text-accent">Series</span></h2>
                        <p>Lorem ipsum is simply dummy text of the printing and typesetting
              industry.</p>
                    </div>

                    @if ($featuredTrailers->isEmpty())
                        <div class="empty-state-panel">
                            <p>No featured trailers are live yet. Add a few from the admin dashboard to fill this section.</p>
                        </div>
                    @else
                        <div class="row g-4">
                            @foreach ($featuredTrailers as $trailer)
                                <div class="col-md-6">
                                    <article class="feature-card" style="background-image: url('{{ $trailer->poster_url }}'); background-position: center;">
                                        <div class="feature-card__body">
                                            <div class="feature-card__head">
                                                <h3 class="feature-card__title">{{ $trailer->title }}</h3>
                                                @if ($trailer->trailer_url)
                                                    <a class="play-button" href="{{ $trailer->trailer_url }}" target="_blank" rel="noopener noreferrer" aria-label="Play preview for {{ $trailer->title }}">
                                                        <svg viewBox="0 0 18 20" aria-hidden="true" focusable="false">
                                                            <path d="M2.5 1.7C2.5.8 3.5.2 4.3.6l10.4 6.1c.8.5.8 1.7 0 2.2L4.3 15c-.8.5-1.8-.1-1.8-1V1.7Z"></path>
                                                        </svg>
                                                    </a>
                                                @else
                                                    <span class="play-button play-button--disabled" aria-hidden="true">
                                                        <svg viewBox="0 0 18 20" aria-hidden="true" focusable="false">
                                                            <path d="M2.5 1.7C2.5.8 3.5.2 4.3.6l10.4 6.1c.8.5.8 1.7 0 2.2L4.3 15c-.8.5-1.8-.1-1.8-1V1.7Z"></path>
                                                        </svg>
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="feature-card__meta">
                                                @if ($trailer->release_year)<span>{{ $trailer->release_year }}</span>@endif
                                                @if ($trailer->duration_label)<span>{{ $trailer->duration_label }}</span>@endif
                                                @if ($trailer->tagline)<span>{{ $trailer->tagline }}</span>@endif
                                            </div>
                                            <p class="feature-card__description">{{ $trailer->short_description }}</p>
                                            <div class="feature-card__footer">
                                                @if ($trailer->trailer_url)
                                                    <a href="{{ $trailer->trailer_url }}" class="btn btn-brand" target="_blank" rel="noopener noreferrer">{{ $trailer->action_label }}</a>
                                                @else
                                                    <span class="btn btn-outline-brand-light">{{ $trailer->action_label }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </section>

            <section id="cta" class="cta-section">
                <div class="poster-background poster-background-top">
                    <div class="poster-track">
                        @foreach ($posterWall as $poster)
                            <div class="poster-card" style="background-image: url('{{ $poster->poster_url }}');" aria-hidden="true"></div>
                        @endforeach
                        @foreach ($posterWall as $poster)
                            <div class="poster-card" style="background-image: url('{{ $poster->poster_url }}');" aria-hidden="true"></div>
                        @endforeach
                    </div>
                </div>

                <div class="poster-background poster-background-bottom">
                    <div class="poster-track reverse">
                        @foreach ($posterWall as $poster)
                            <div class="poster-card" style="background-image: url('{{ $poster->poster_url }}');" aria-hidden="true"></div>
                        @endforeach
                        @foreach ($posterWall as $poster)
                            <div class="poster-card" style="background-image: url('{{ $poster->poster_url }}');" aria-hidden="true"></div>
                        @endforeach
                    </div>
                </div>

                <div class="cta-overlay"></div>
                <div class="container landing-container position-relative">
                    <div class="cta-panel">
                        <p class="eyebrow">VERTZ ORIGINALS PRESENTS</p>
                        <h2>Watch Original Series</h2>
                        <p class="section-copy cta-copy">
                            Discover {{ $trailers->count() }} live vertical titles, all managed from one
                             dashboard and displayed instantly on the landing page.
                        </p>
                        <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
                            <a href="#contact" class="btn btn-brand">Get Started</a>
              <a href="#contact" class="btn btn-outline-brand-light">Show Plans</a>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <footer id="contact" class="footer-section">
            <div class="container landing-container">
                <div class="footer-top">
                    <div class="footer-brand-wrap">
                        <div class="footer-brand">
                            <img class="footer-brand-badge" src="{{ asset('assets/frame-41.png') }}" alt="">
                            <div class="footer-brand-copy">
                                <h3 class="footer-heading">VERTZ TM</h3>
                                <p class="footer-copy">Original Vertical Content Studio</p>
                                <p class="footer-note">Email us: customer@vertz.com</p>
                                <p class="footer-note">Helpline number +1 (480) 555-0103</p>
                            </div>
                        </div>
                    </div>
                    <div class="footer-side">
                        <div class="footer-panel footer-panel--newsletter">
                            <h3 class="footer-heading">Subscribe Newsletter</h3>
                            <form action="{{ route('subscribe') }}" method="POST" class="newsletter-form newsletter-form--inline">
                                @csrf
                                <label class="visually-hidden" for="newsletter-email">Email</label>
                                <div class="newsletter-row">
                                    <input id="newsletter-email" class="form-control @error('email') is-invalid @enderror" type="email" name="email" value="{{ old('email') }}" placeholder="Email" required>
                                    <button class="btn btn-brand footer-subscribe-btn" type="submit">Subscribe</button>
                                </div>
                            </form>

                            @error('email')
                                <div class="alert alert-danger newsletter-alert" role="alert">{{ $message }}</div>
                            @enderror
                            @if (session('success'))
                                <div class="alert alert-success newsletter-alert" role="alert">{{ session('success') }}</div>
                            @endif
                            @if (session('info'))
                                <div class="alert alert-primary newsletter-alert" role="alert">{{ session('info') }}</div>
                            @endif
                        </div>

                        <div class="footer-panel footer-panel--social">
                            <h3 class="footer-heading">Follow Us:</h3>
                            <div class="social-list social-list--footer">
                                <a class="social-icon" href="#home" aria-label="Facebook"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 22v-8h2.7l.5-3h-3.2V9.1c0-.9.3-1.6 1.6-1.6H17V4.8a20 20 0 0 0-2.4-.1c-2.4 0-4.1 1.5-4.1 4.2V11H8v3h2.5v8h3Z"></path></svg></a>
                                <a class="social-icon" href="#home" aria-label="Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5Zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5Zm5.75-3.25a1.25 1.25 0 1 1-1.25 1.25 1.25 1.25 0 0 1 1.25-1.25Z"></path></svg></a>
                                <a class="social-icon" href="#home" aria-label="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.94 8.5H3.56V20h3.38V8.5ZM5.25 3A2.01 2.01 0 1 0 5.3 7a2.01 2.01 0 0 0-.05-4ZM20.44 12.86c0-3.44-1.84-5.04-4.3-5.04-1.98 0-2.87 1.08-3.36 1.84V8.5H9.41c.04.77 0 11.5 0 11.5h3.37v-6.42c0-.34.03-.68.12-.92.27-.67.88-1.37 1.9-1.37 1.35 0 1.89 1.03 1.89 2.54V20h3.37v-7.14Z"></path></svg></a>
                                <a class="social-icon" href="#home" aria-label="YouTube"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M23 12s0-3.2-.4-4.7a3 3 0 0 0-2.1-2.1C19 4.8 12 4.8 12 4.8s-7 0-8.5.4A3 3 0 0 0 1.4 7.3C1 8.8 1 12 1 12s0 3.2.4 4.7a3 3 0 0 0 2.1 2.1c1.5.4 8.5.4 8.5.4s7 0 8.5-.4a3 3 0 0 0 2.1-2.1C23 15.2 23 12 23 12ZM10 15.5v-7l6 3.5-6 3.5Z"></path></svg></a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer-bottom">
                    <p class="footer-legal">
            &copy; 2026 <span class="footer-legal__brand">VERTZ.</span> All Rights Reserved.
            All videos and shows on this platform are trademarks of, and all related
            images and content are the property of, Streamit Inc. Duplication and copy
            of this is strictly prohibited.
          </p>
                    <div class="footer-download">
                        <p class="footer-download__title">Download Now VERTZ</p>
                        <div class="app-badges">
                            <img src="{{ asset('assets/app-store-badge.svg') }}" alt="Download on the App Store">
                            <img src="{{ asset('assets/play-store-badge.svg') }}" alt="Get it on Google Play">
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
@endsection