@extends('layouts.splash')

@section('title', config('hrms.company', 'Synergy HRM'))
@section('subtitle', 'Powering People & Business')
@section('meta-description', 'The complete HR management platform — payroll, performance, attendance, leave and training unified in one system.')

{{-- ── Override nav links to include Login CTA ─────────────────────────── --}}
@section('nav-links')
<li><a href="#features">Features</a></li>
<li><a href="#roles">Roles</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="{{ route('login') }}" class="splash-nav-cta">Sign In</a></li>
@endsection

@section('footer-tagline')
Powering People &amp; Business
@endsection

@section('footer-links')
<li><a href="#features">Features</a></li>
<li><a href="#roles">Roles</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="{{ route('login') }}">Sign In</a></li>
@endsection

{{-- ── Page-specific styles ─────────────────────────────────────────────── --}}
@push('styles')
<style>

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Full-bleed background photo */
.hero-photo {
    position: absolute; inset: 0; z-index: 0;
}
.hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 68% center;
    display: block;
}
/* Multi-layer overlay — dark gradient from left + bottom, preserves right-side photo */
.hero-photo::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(108deg, rgba(11,31,53,.97) 0%, rgba(11,31,53,.88) 36%, rgba(11,31,53,.38) 60%, transparent 78%),
        linear-gradient(to top, rgba(11,31,53,.72) 0%, transparent 42%);
}

/* Decorative orbital ring top-right */
.hero-ring {
    position: absolute; top: -140px; right: -140px;
    width: 580px; height: 580px;
    border-radius: 50%;
    border: 1.5px solid rgba(44,181,160,.15);
    z-index: 1; pointer-events: none;
}
.hero-ring::before {
    content: ''; position: absolute; inset: 50px;
    border-radius: 50%; border: 1px solid rgba(44,181,160,.08);
}

/* Hero copy area */
.hero-body {
    position: relative; z-index: 10;
    flex: 1; display: flex; align-items: center;
    padding: 10rem 5vw 6rem;
    max-width: 740px;
}

/* Live indicator pill */
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(44,181,160,.12);
    border: 1px solid rgba(44,181,160,.3);
    border-radius: 50px;
    padding: .35rem 1rem;
    margin-bottom: 2rem;
}
.eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-teal);
    animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44,181,160,.7); }
    50%       { box-shadow: 0 0 0 6px rgba(44,181,160,0); }
}
.eyebrow-text {
    font-size: .72rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-teal);
}

/* Headline */
.hero-h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 6.5vw, 5.4rem);
    line-height: .96; letter-spacing: -.03em;
    color: #fff; margin-bottom: 1.5rem;
}
.hero-h1 .line-teal   { color: var(--brand-teal); }
.hero-h1 .line-ghost  {
    -webkit-text-stroke: 1.5px rgba(255,255,255,.3);
    color: transparent;
}

.hero-sub {
    font-size: 1.05rem; color: rgba(255,255,255,.58);
    line-height: 1.78; max-width: 480px;
    margin-bottom: 2.5rem; font-weight: 300;
}
.hero-sub strong { color: rgba(255,255,255,.88); font-weight: 500; }

/* Stat strip */
.hero-stats {
    display: flex; gap: 2.5rem; flex-wrap: wrap;
    margin-top: 2.75rem; padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.hstat-num {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: 2.1rem; line-height: 1; color: var(--brand-teal);
}
.hstat-label {
    font-size: .68rem; font-weight: 500;
    color: rgba(255,255,255,.38);
    text-transform: uppercase; letter-spacing: .1em; margin-top: .25rem;
}

/* Floating analytics glass card */
.hero-glass {
    position: absolute; bottom: 3rem; right: 5vw; z-index: 10;
    display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px; padding: 1.2rem 1.6rem;
    max-width: 290px;
    animation: float-y 5s ease-in-out infinite;
}
@keyframes float-y { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.glass-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal2));
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.glass-label { font-size: .68rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem; }
.glass-value { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; color: #fff; }
.glass-sub   { font-size: .68rem; color: rgba(255,255,255,.38); margin-top: .1rem; }

/* ══════════════════════════════════════════════════════════════
   TICKER / MARQUEE
══════════════════════════════════════════════════════════════ */
.ticker {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    padding: 1.1rem 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.ticker-track {
    display: flex; gap: 3rem; align-items: center;
    animation: marquee 28s linear infinite;
    white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .74rem; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.52); white-space: nowrap;
}
.tick-diamond {
    width: 5px; height: 5px;
    background: var(--brand-teal);
    transform: rotate(45deg); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════════ */
.features-section { padding: 7rem 5vw; background: #fff; }

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.fc {
    background: var(--brand-sand);
    border-radius: 20px; padding: 2rem;
    border: 1px solid transparent;
    transition: all .3s; position: relative; overflow: hidden;
}
.fc::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--brand-teal), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s;
}
.fc:hover {
    background: #fff; border-color: rgba(44,181,160,.2);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(14,42,71,.1);
}
.fc:hover::before { transform: scaleX(1); }
.fc-num {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: 3.5rem; line-height: 1;
    color: rgba(14,42,71,.05);
    position: absolute; top: 1.5rem; right: 1.75rem;
    letter-spacing: -.04em;
}
.fc-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem; font-size: 1.3rem;
}
.fc-title {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 1rem; color: var(--brand-ink); margin-bottom: .5rem;
}
.fc-desc { font-size: .85rem; color: var(--brand-muted); line-height: 1.7; font-weight: 300; }

/* ══════════════════════════════════════════════════════════════
   ROLES (dark split section)
══════════════════════════════════════════════════════════════ */
.roles-section {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--brand-primary); position: relative; overflow: hidden;
}
.roles-section::before {
    content: ''; position: absolute;
    left: 50%; top: -200px; width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44,181,160,.1) 0%, transparent 70%);
    transform: translateX(-50%); pointer-events: none;
}
.roles-left  { padding: 6rem 5vw; display: flex; flex-direction: column; justify-content: center; }
.roles-right { padding: 6rem 5vw; display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.roles-left .s-h2   { color: #fff; }
.roles-left .s-desc { color: rgba(255,255,255,.52); max-width: 100%; }
.roles-left .s-label{ color: var(--brand-teal); }

.role-card {
    display: flex; align-items: flex-start; gap: 1rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 1.25rem 1.5rem;
    transition: all .25s;
}
.role-card:hover {
    background: rgba(44,181,160,.1);
    border-color: rgba(44,181,160,.28);
    transform: translateX(6px);
}
.role-ico {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal2));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.role-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: .2rem; }
.role-desc { font-size: .78rem; color: rgba(255,255,255,.42); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   DEMO / CONTACT
══════════════════════════════════════════════════════════════ */
.cta-section {
    background: var(--brand-sand); padding: 7rem 5vw;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6rem; align-items: start;
}
.cta-tag {
    display: inline-block;
    background: var(--brand-teal3); color: var(--brand-teal2);
    font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; padding: .3rem .85rem; border-radius: 50px;
    margin-bottom: 1rem;
}
.cta-h2 {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--brand-ink); line-height: 1.05; letter-spacing: -.025em;
    margin-bottom: 1rem;
}
.cta-sub { font-size: .95rem; color: var(--brand-muted); line-height: 1.75; margin-bottom: 2.5rem; font-weight: 300; }

.check-list { display: flex; flex-direction: column; gap: .85rem; }
.check-item { display: flex; align-items: flex-start; gap: .85rem; }
.check-box {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal2));
    display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.check-text { font-size: .88rem; color: #475569; line-height: 1.55; }
.check-text strong { color: var(--brand-ink); font-weight: 600; }

/* Demo request form */
.demo-form {
    background: #fff; border-radius: 22px; padding: 2.5rem;
    border: 1px solid var(--brand-border);
    box-shadow: 0 20px 60px rgba(14,42,71,.07);
}
.form-head {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: 1.35rem; color: var(--brand-ink); margin-bottom: .35rem;
}
.form-sub { font-size: .82rem; color: var(--brand-muted); margin-bottom: 1.75rem; }
.fg { margin-bottom: 1rem; }
.fg label {
    display: block; font-size: .72rem; font-weight: 700;
    color: var(--brand-ink); letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: .35rem;
}
.fg input, .fg select {
    width: 100%; padding: .65rem 1rem;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-size: .88rem;
    color: var(--brand-ink); background: #fff; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.fg input:focus, .fg select:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(44,181,160,.14);
}
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.submit-btn {
    width: 100%; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff; border: none; border-radius: 10px;
    padding: .9rem; margin-top: .5rem; cursor: pointer;
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(14,42,71,.22); transition: all .25s;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(14,42,71,.32); }
.form-note { font-size: .7rem; color: #94a3b8; text-align: center; margin-top: .75rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .feat-grid       { grid-template-columns: 1fr 1fr; }
    .roles-section   { grid-template-columns: 1fr; }
    .roles-left      { padding: 5rem 5vw 2rem; }
    .roles-right     { padding: 2rem 5vw 5rem; }
    .cta-section     { grid-template-columns: 1fr; gap: 3rem; }
    .hero-glass      { display: none; }
}
@media (max-width: 640px) {
    .hero-body       { padding: 8rem 5vw 4rem; }
    .feat-grid       { grid-template-columns: 1fr; }
    .fg-row          { grid-template-columns: 1fr; }
    .hero-stats      { gap: 1.5rem; }
    .features-section, .cta-section { padding: 5rem 5vw; }
}
</style>
@endpush

@section('content')

{{-- ═══════════════════════════════════════════════
     HERO — full-bleed photo + editorial headline
═══════════════════════════════════════════════ --}}
<section class="hero" id="home">
    <div class="hero-ring"></div>

    <div class="hero-photo">
        <img src="{{ asset('images/synergy-hero.png') }}"
             alt="{{ config('hrms.company') }} — HR professionals collaborating"
             loading="eager">
    </div>

    <div class="hero-body">
        <div>
            {{-- Live indicator --}}
            <div class="eyebrow">
                <div class="eyebrow-dot"></div>
                <span class="eyebrow-text">Next-Generation HR Platform</span>
            </div>

            {{-- Main headline --}}
            <h1 class="hero-h1">
                HR That<br>
                <span class="line-teal">Actually</span><br>
                <span class="line-ghost">Works.</span>
            </h1>

            <p class="hero-sub">
                <strong>{{ config('hrms.company') }}</strong> unifies your entire workforce —
                payroll, performance, attendance, and compliance — in one intelligent platform
                built for <strong>clarity, speed, and scale</strong>.
            </p>

            {{-- CTA buttons --}}
            <div class="d-flex gap-3 flex-wrap">
                <a href="#contact" class="btn-splash-primary">
                    <i class="bi bi-arrow-right-short fs-5"></i>
                    Request Demo
                </a>
                <a href="#features" class="btn-splash-ghost">
                    <i class="bi bi-play-circle"></i>
                    Explore Features
                </a>
            </div>

            {{-- Stats row --}}
            <div class="hero-stats">
                <div>
                    <div class="hstat-num">12+</div>
                    <div class="hstat-label">HR Modules</div>
                </div>
                <div>
                    <div class="hstat-num">5</div>
                    <div class="hstat-label">User Roles</div>
                </div>
                <div>
                    <div class="hstat-num">8</div>
                    <div class="hstat-label">UI Themes</div>
                </div>
                <div>
                    <div class="hstat-num">100%</div>
                    <div class="hstat-label">Yours to Own</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Floating glass card --}}
    <div class="hero-glass">
        <div class="glass-icon">📊</div>
        <div>
            <div class="glass-label">Live Dashboard</div>
            <div class="glass-value">Executive Insights</div>
            <div class="glass-sub">Real-time workforce analytics</div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════
     TICKER / MODULE MARQUEE
═══════════════════════════════════════════════ --}}
<div class="ticker">
    <div class="ticker-track">
        @php
        $modules = [
            'Employee Records','Payroll Automation','Leave Management',
            'Performance Evaluation','Attendance Tracking','Training & Development',
            'Discipline Management','Executive Dashboard','PDF Payslips',
            '8 UI Themes','Mobile Responsive','Role-Based Access',
        ];
        @endphp
        @foreach(array_merge($modules, $modules) as $mod)
        <span class="tick-item">
            <span class="tick-diamond"></span>{{ $mod }}
        </span>
        @endforeach
    </div>
</div>

{{-- ═══════════════════════════════════════════════
     FEATURES
═══════════════════════════════════════════════ --}}
<section class="features-section" id="features">
    <div class="r"><div class="s-label">Platform Capabilities</div></div>
    <div class="r r1">
        <h2 class="s-h2">Everything in <em>one place.</em><br>Nothing you don't need.</h2>
    </div>
    <div class="r r2">
        <p class="s-desc">Purpose-built for organisations that need clarity and control — without enterprise-software complexity or bloated licensing costs.</p>
    </div>

    <div class="feat-grid">
        @php
        $features = [
            ['01', '#e0f5f2', '#2cb5a0', 'bi-people',         'Multi-Role Access',        'Five precisely-scoped roles — President, HR Manager, Department Head, and Employee — each with their own dashboard and permissions.'],
            ['02', '#fef3e2', '#f97316', 'bi-display',        'Executive Dashboard',       'Live KPI panels, leave trend charts, payroll summaries, and pending approvals — all in one command-centre view for leadership.'],
            ['03', '#f0fdf4', '#22c55e', 'bi-cash-coin',      'One-Click Payroll',         'Generate payslips for every active employee in seconds. Tax and pension deductions apply automatically. PDF payslips with dual-currency support.'],
            ['04', '#eff6ff', '#3b82f6', 'bi-calendar-check', '4-Stage Leave Approvals',   'Configurable approval chains — Employee → Dept Head → HR Manager → President. Full audit trail and automatic balance deductions on final sign-off.'],
            ['05', '#fdf4ff', '#a855f7', 'bi-bar-chart-steps','Performance Evaluations',   'Weighted multi-criteria scoring with automatic rating bands. Evaluations flow through submission, acknowledgement, and HR review — all tracked.'],
            ['06', '#fff1f2', '#f43f5e', 'bi-palette',        '8 Live UI Themes',          'Navy, Dark Mode, Forest, Purple, Crimson, Teal, Gold & Black, or Slate — per-user preference, persisted in the database, instant switch.'],
        ];
        @endphp

        @foreach($features as $i => [$num, $iconBg, $iconColor, $icon, $title, $desc])
        <div class="fc r r{{ $i + 1 }}">
            <div class="fc-num">{{ $num }}</div>
            <div class="fc-icon" style="background:{{ $iconBg }};">
                <i class="bi {{ $icon }}" style="color:{{ $iconColor }};font-size:1.3rem;"></i>
            </div>
            <div class="fc-title">{{ $title }}</div>
            <div class="fc-desc">{{ $desc }}</div>
        </div>
        @endforeach
    </div>
</section>

{{-- ═══════════════════════════════════════════════
     ROLES — dark split
═══════════════════════════════════════════════ --}}
<section class="roles-section" id="roles">
    <div class="roles-left">
        <div class="r"><div class="s-label">Built for every seat</div></div>
        <div class="r r1"><h2 class="s-h2">The right view<br>for every role.</h2></div>
        <div class="r r2">
            <p class="s-desc">{{ config('hrms.company') }} surfaces exactly what each person needs — no noise, no data they shouldn't see.</p>
        </div>
        <div class="r r3">
            <a href="#contact" class="btn-splash-primary">See a Live Demo</a>
        </div>
    </div>

    <div class="roles-right">
        @php
        $roles = [
            ['🏛️', 'President / CEO',    'Executive KPI dashboard, workforce analytics, final leave approvals and payroll sign-off.'],
            ['👥', 'HR Manager',         'Full employee records, payroll generation, leave processing, discipline management and reports.'],
            ['📋', 'Department Head',    'Department-scoped leave approvals, headcount overview, attendance summaries and evaluations.'],
            ['👤', 'Employee',           'Personal dashboard — leave requests, attendance history, evaluation results, training enrolment, payslips.'],
            ['⚙️', 'Super Admin',        'System-wide access — all modules, all data, all configuration.'],
        ];
        @endphp

        @foreach($roles as $i => [$ico, $name, $desc])
        <div class="role-card r r{{ $i + 1 }}">
            <div class="role-ico">{{ $ico }}</div>
            <div>
                <div class="role-name">{{ $name }}</div>
                <div class="role-desc">{{ $desc }}</div>
            </div>
        </div>
        @endforeach
    </div>
</section>

{{-- ═══════════════════════════════════════════════
     DEMO / CONTACT
═══════════════════════════════════════════════ --}}
<section class="cta-section" id="contact">
    <div>
        <div class="cta-tag r">For Growing Organisations</div>
        <div class="r r1"><h2 class="cta-h2">Ready to modernise your HR?</h2></div>
        <div class="r r2">
            <p class="cta-sub">Request a personalised walkthrough. We'll show you {{ config('hrms.company') }} running with your departments, your roles, and your branding — no slides, no sales pitch.</p>
        </div>

        <div class="check-list r r3">
            @php
            $checks = [
                ['Full source code',     'deploy to your own server — no lock-in, no subscriptions'],
                ['Your branding',        'company name, logo initials, colour theme'],
                ['Live demo environment','all 5 roles, real HR data to explore'],
                ['cPanel compatible',    'shared hosting ready — no devops required'],
            ];
            @endphp
            @foreach($checks as [$strong, $text])
            <div class="check-item">
                <div class="check-box">
                    <i class="bi bi-check-lg text-white" style="font-size:.75rem;"></i>
                </div>
                <span class="check-text"><strong>{{ $strong }}</strong> — {{ $text }}</span>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Demo request form --}}
    <div class="demo-form r r2">
        <div class="form-head">Request a Demo</div>
        <div class="form-sub">Response within one business day.</div>

        {{-- This form can be wired to a ContactController or mail route --}}
        <form method="POST" action="#" id="demoForm">
            @csrf
            <div class="fg-row">
                <div class="fg">
                    <label for="first_name">First Name</label>
                    <input type="text" id="first_name" name="first_name" placeholder="Alex" required>
                </div>
                <div class="fg">
                    <label for="last_name">Last Name</label>
                    <input type="text" id="last_name" name="last_name" placeholder="Morgan">
                </div>
            </div>
            <div class="fg">
                <label for="email">Work Email</label>
                <input type="email" id="email" name="email" placeholder="alex@yourcompany.com" required>
            </div>
            <div class="fg">
                <label for="company">Company Name</label>
                <input type="text" id="company" name="company" placeholder="Acme Corporation">
            </div>
            <div class="fg">
                <label for="size">Organisation Size</label>
                <select id="size" name="size">
                    <option value="">Select size...</option>
                    <option>1–50 employees</option>
                    <option>51–200 employees</option>
                    <option>201–1,000 employees</option>
                    <option>1,000+ employees</option>
                </select>
            </div>
            <button type="submit" class="submit-btn" id="submitBtn">
                Request My Demo &rarr;
            </button>
            <p class="form-note">No spam. No commitment. Just a demo.</p>
        </form>
    </div>
</section>

@endsection

@push('scripts')
<script>
// Demo form submit feedback
document.getElementById('demoForm')?.addEventListener('submit', function (e) {
    e.preventDefault();
    const btn = document.getElementById('submitBtn');
    btn.textContent = '✓ Request received — we\'ll be in touch!';
    btn.style.background = 'linear-gradient(135deg,#2cb5a0,#1d9080)';
    btn.disabled = true;
    setTimeout(() => {
        btn.innerHTML = 'Request My Demo &rarr;';
        btn.style.background = '';
        btn.disabled = false;
    }, 4500);
});
</script>
@endpush
