@php
    $ventures = [
        [
            'logo' => '/images/products/abs.png',
            'name' => 'ABS Soft Pvt. Ltd.',
            'industry' => 'Technology & Digital Solutions',
            'role' => 'Founder & CEO',
            'impact' => 'Delivers software, web infrastructure, branding, and implementation support for organizations pursuing digital growth.',
        ],
        [
            'logo' => '/images/products/infonet.png',
            'name' => 'Infonet Communication',
            'industry' => 'Connectivity & Network Services',
            'role' => 'Technical Leadership',
            'impact' => 'Supports dependable internet operations, performance monitoring, and service deployment for expanding connectivity needs.',
        ],
        [
            'logo' => '/images/products/herirakhau.png',
            'name' => 'Herirakhau Media Pvt. Ltd.',
            'industry' => 'Media & Publishing',
            'role' => 'Founder',
            'impact' => 'Builds a digital publishing platform focused on timely, accessible, and mobile-first news distribution.',
        ],
        [
            'logo' => '/images/products/jaykul.png',
            'name' => 'Jay Kul Devata Traders',
            'industry' => 'Industrial Trade & Workshop Services',
            'role' => 'Founder',
            'impact' => 'Leads a growing operation serving heavy-vehicle maintenance, repair, and parts supply requirements.',
        ],
    ];

    $products = [
        [
            'logo' => '/images/products/etech.png',
            'name' => 'E-tech Sansar',
            'summary' => 'A technology content platform created to simplify digital knowledge and make practical information more accessible to a wider audience.',
        ],
        [
            'logo' => '/images/products/nepaliquotes.png',
            'name' => 'Nepali Quotes',
            'summary' => 'A content-driven platform centered on entertainment and cultural relevance, designed to keep audiences engaged through curated updates.',
        ],
        [
            'logo' => '/images/products/bidhyabattle.png',
            'name' => 'Bidhya Battle',
            'summary' => 'An educational quiz platform built to make learning more interactive, with a focus on programming and technical subjects.',
        ],
    ];

    $journey = [
        [
            'year' => '2015 to 2017',
            'title' => 'Management Studies',
            'body' => 'Built a foundational understanding of business, operations, and disciplined execution before moving into technology and venture building.',
        ],
        [
            'year' => '2017 to 2022',
            'title' => 'BCA and Technical Formation',
            'body' => 'Expanded into software, systems, and product thinking while building the technical depth required for long-term digital leadership.',
        ],
        [
            'year' => '2021 onward',
            'title' => 'Technology and Infrastructure Leadership',
            'body' => 'Stepped into active operating roles across software and connectivity, bridging execution between customer needs and technical delivery.',
        ],
        [
            'year' => '2025 onward',
            'title' => 'Multi-Venture Expansion',
            'body' => 'Extended leadership into industrial services while continuing to grow a portfolio that connects technology, media, and infrastructure.',
        ],
    ];

    $impact = [
        [
            'value' => '04',
            'label' => 'Active Ventures',
            'copy' => 'A diversified company portfolio spanning technology, connectivity, media, and industrial services.',
        ],
        [
            'value' => '05+',
            'label' => 'Years Building',
            'copy' => 'A sustained leadership journey shaped by hands-on execution, technical depth, and entrepreneurial ownership.',
        ],
        [
            'value' => '03',
            'label' => 'Flagship Platforms',
            'copy' => 'Digital products designed to educate, inform, and engage audiences through focused online experiences.',
        ],
        [
            'value' => '01',
            'label' => 'Operating Philosophy',
            'copy' => 'Build practical solutions, keep standards high, and create businesses that compound value over time.',
        ],
    ];

    $trustSignals = [
        [
            'title' => 'Partner Testimonial Placeholder',
            'quote' => 'Add a verified quote from a business partner, client, or investor that speaks to execution quality, reliability, and leadership presence.',
            'author' => 'Recommended: Strategic partner or enterprise client',
        ],
        [
            'title' => 'Media or Founder Endorsement Placeholder',
            'quote' => 'Add a short endorsement that highlights industry credibility, communication strength, and the ability to translate vision into action.',
            'author' => 'Recommended: Founder peer, advisor, or board contact',
        ],
        [
            'title' => 'Institutional Trust Signal',
            'quote' => 'Use this space for company logos, speaking engagements, certifications, or featured publications once approved for public use.',
            'author' => 'Recommended: Brand strip or validation bar',
        ],
    ];
@endphp

<x-app-layout>
    <div class="page-shell">
        <header class="site-header" data-site-header>
            <div class="shell-container">
                <div class="topbar">
                    <a href="#top" class="brand-mark">
                        <span class="brand-dot"></span>
                        <span>Ashok KC</span>
                    </a>

                    <nav class="desktop-nav">
                        <a href="#overview" class="nav-link">Overview</a>
                        <a href="#ventures" class="nav-link">Ventures</a>
                        <a href="#products" class="nav-link">Platforms</a>
                        <a href="#journey" class="nav-link">Journey</a>
                        <a href="#impact" class="nav-link">Impact</a>
                        <a href="#contact" class="nav-link">Contact</a>
                    </nav>

                    <div class="header-actions">
                        <button type="button" class="theme-toggle" data-theme-toggle aria-label="Toggle color theme">
                            <span class="theme-toggle__icon theme-toggle__icon--sun">Light</span>
                            <span class="theme-toggle__icon theme-toggle__icon--moon">Dark</span>
                        </button>
                        <a href="#contact" class="btn-primary hidden sm:inline-flex">Schedule Meeting</a>
                        <button
                            type="button"
                            class="menu-button"
                            data-menu-toggle
                            aria-expanded="false"
                            aria-label="Toggle navigation"
                        >
                            <svg data-menu-icon="open" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 7h16M4 12h16M4 17h16" />
                            </svg>
                            <svg data-menu-icon="close" class="hidden h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="hidden pb-5 lg:hidden" data-mobile-menu>
                    <div class="panel p-4">
                        <div class="grid gap-3">
                            <a href="#overview" class="mobile-nav-link" data-mobile-nav-link>Overview</a>
                            <a href="#ventures" class="mobile-nav-link" data-mobile-nav-link>Ventures</a>
                            <a href="#products" class="mobile-nav-link" data-mobile-nav-link>Platforms</a>
                            <a href="#journey" class="mobile-nav-link" data-mobile-nav-link>Journey</a>
                            <a href="#impact" class="mobile-nav-link" data-mobile-nav-link>Impact</a>
                            <a href="#contact" class="mobile-nav-link" data-mobile-nav-link>Contact</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <main>
            <section id="top" class="hero-section">
                <div class="shell-container">
                    <div class="hero-grid">
                        <div>
                            <span class="eyebrow-pill">Founder & Chief Executive Officer</span>
                            <h1 class="hero-title text-balance">
                                Building <em>high-trust businesses</em> across technology, media, connectivity, and industrial services.
                            </h1>
                            <p class="hero-copy">
                                Ashok KC leads a growing portfolio of ventures with a practical approach to execution, digital transformation, and long-term value creation. The focus is simple: build resilient companies, solve real problems, and raise the standard of modern business leadership in Nepal.
                            </p>

                            <div class="hero-actions">
                                <a href="#contact" class="btn-primary">Schedule Meeting</a>
                                <a href="#ventures" class="btn-secondary">Explore Ventures</a>
                            </div>

                            <div class="metric-grid">
                                <div class="metric-card">
                                    <div class="metric-value">04</div>
                                    <p class="metric-label">Companies</p>
                                </div>
                                <div class="metric-card">
                                    <div class="metric-value">05+</div>
                                    <p class="metric-label">Years of Leadership</p>
                                </div>
                                <div class="metric-card">
                                    <div class="metric-value">03</div>
                                    <p class="metric-label">Digital Platforms</p>
                                </div>
                            </div>
                        </div>

                        <aside class="panel bg-mesh overflow-hidden p-6 md:p-8">
                            <div class="rounded-[1.5rem] border border-white/10 bg-black/10 p-3">
                                <img
                                    src="/images/hero/hero.png"
                                    alt="Portrait of Ashok KC"
                                    class="w-full rounded-[1.25rem] object-cover"
                                >
                            </div>

                            <div class="mt-8 grid gap-4 sm:grid-cols-2">
                                <div class="panel-soft sm:col-span-2">
                                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--text-muted)]">Positioning</p>
                                    <p class="mt-3 text-lg leading-8 text-[var(--text-primary)]">
                                        Executive leadership grounded in operational discipline, product thinking, and cross-sector company building.
                                    </p>
                                </div>
                                <div class="panel-soft">
                                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--text-muted)]">Base</p>
                                    <p class="mt-3 text-lg font-semibold text-white">Nepal</p>
                                </div>
                                <div class="panel-soft">
                                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--text-muted)]">Primary Focus</p>
                                    <p class="mt-3 text-lg font-semibold text-white">Growth & Execution</p>
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
            </section>

            <section id="overview" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Executive Overview</span>
                    <div class="executive-grid">
                        <div>
                            <h2 class="section-title text-balance">
                                A founder profile shaped by execution, not presentation.
                            </h2>
                            <p class="section-copy">
                                Ashok KC is a founder and executive operator focused on building durable businesses with clear market relevance. His work combines technical understanding, operational oversight, and brand discipline to move ventures from concept to execution with consistency.
                            </p>
                            <p class="section-copy">
                                Operating across software, infrastructure, media, and commerce, he brings a digital-first perspective to every company he leads. The result is a leadership profile defined by cross-sector execution, practical decision-making, and a commitment to long-term business value.
                            </p>
                        </div>

                        <div class="panel p-8">
                            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--text-muted)]">Leadership Lens</p>
                            <ul class="list-detail mt-6">
                                <li>Build businesses around practical needs, not short-term trends.</li>
                                <li>Translate technical capability into operational and commercial outcomes.</li>
                                <li>Keep execution standards high across every company touchpoint.</li>
                                <li>Use modern digital infrastructure to create long-term market advantage.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section id="ventures" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Ventures & Companies</span>
                    <h2 class="section-title text-balance">A business portfolio built across complementary industries.</h2>
                    <p class="section-copy">
                        Each venture is positioned as part of a broader leadership story: combining digital expertise, operational oversight, and disciplined growth across service, infrastructure, media, and industrial sectors.
                    </p>

                    <div class="venture-grid lg:grid-cols-2">
                        @foreach ($ventures as $venture)
                            <article class="venture-card">
                                <div class="flex items-start justify-between gap-5">
                                    <div class="logo-chip">
                                        <img src="{{ $venture['logo'] }}" alt="{{ $venture['name'] }} logo" class="max-h-full max-w-full object-contain">
                                    </div>
                                    <span class="meta-badge">{{ $venture['role'] }}</span>
                                </div>
                                <h3 class="card-title">{{ $venture['name'] }}</h3>
                                <p class="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">
                                    {{ $venture['industry'] }}
                                </p>
                                <p class="card-copy">{{ $venture['impact'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="products" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Products & Platforms</span>
                    <h2 class="section-title text-balance">Digital platforms designed to inform, engage, and educate.</h2>
                    <p class="section-copy">
                        The product layer extends the leadership narrative beyond services. These platforms show a commitment to audience building, content strategy, and accessible digital experiences with clear utility.
                    </p>

                    <div class="product-grid">
                        @foreach ($products as $product)
                            <article class="product-card">
                                <div class="logo-chip">
                                    <img src="{{ $product['logo'] }}" alt="{{ $product['name'] }} logo" class="max-h-full max-w-full object-contain">
                                </div>
                                <h3 class="card-title">{{ $product['name'] }}</h3>
                                <p class="card-copy">{{ $product['summary'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="journey" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Leadership Journey</span>
                    <h2 class="section-title text-balance">From academic foundation to multi-venture leadership.</h2>
                    <p class="section-copy">
                        The leadership journey reflects a steady progression from academic preparation into venture creation, operational leadership, and cross-sector company building.
                    </p>

                    <div class="timeline">
                        @foreach ($journey as $milestone)
                            <article class="timeline-item">
                                <div class="timeline-year">{{ $milestone['year'] }}</div>
                                <div class="timeline-card">
                                    <h3 class="text-2xl font-semibold text-white">{{ $milestone['title'] }}</h3>
                                    <p class="mt-4 text-sm leading-7 text-[var(--text-secondary)]">{{ $milestone['body'] }}</p>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="impact" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Achievements & Impact</span>
                    <h2 class="section-title text-balance">Measured through portfolio breadth, platform ownership, and execution capacity.</h2>
                    <p class="section-copy">
                        Impact is communicated through clear, defensible indicators that reflect company breadth, platform ownership, and a practical record of execution across multiple operating environments.
                    </p>

                    <div class="impact-grid lg:grid-cols-2">
                        @foreach ($impact as $item)
                            <article class="impact-card">
                                <p class="text-4xl font-semibold text-white">{{ $item['value'] }}</p>
                                <p class="mt-3 text-sm font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">{{ $item['label'] }}</p>
                                <p class="card-copy">{{ $item['copy'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="vision" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Vision & Mission</span>
                    <div class="grid gap-6 lg:grid-cols-2">
                        <article class="panel p-8 md:p-10">
                            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--text-muted)]">Long-Term Vision</p>
                            <h2 class="mt-4 text-3xl font-semibold text-white md:text-4xl">
                                Build modern companies that expand opportunity through disciplined execution and digital infrastructure.
                            </h2>
                            <p class="mt-6 text-base leading-8 text-[var(--text-secondary)]">
                                The long-term ambition is to help shape a more capable, connected, and digitally confident business environment in Nepal through companies that solve practical market problems and scale responsibly.
                            </p>
                        </article>

                        <article class="panel p-8 md:p-10">
                            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--text-muted)]">Operating Mission</p>
                            <h2 class="mt-4 text-3xl font-semibold text-white md:text-4xl">
                                Lead with clarity, build with purpose, and create value that lasts beyond a single cycle of growth.
                            </h2>
                            <p class="mt-6 text-base leading-8 text-[var(--text-secondary)]">
                                Every venture should combine operational discipline, strong customer relevance, and a modern brand standard. The mission is not only to launch businesses, but to build institutions that earn trust over time.
                            </p>
                        </article>
                    </div>
                </div>
            </section>

            <section id="trust" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Testimonials & Trust Signals</span>
                    <h2 class="section-title text-balance">Credibility elements ready for verified endorsements and institutional proof.</h2>
                    <p class="section-copy">
                        This section is structured to present verified endorsements, partner validation, and institutional trust markers in a clean, executive format as they become available for publication.
                    </p>

                    <div class="trust-grid">
                        @foreach ($trustSignals as $signal)
                            <article class="trust-card">
                                <div class="quote-mark">“</div>
                                <h3 class="mt-4 text-xl font-semibold text-white">{{ $signal['title'] }}</h3>
                                <p class="mt-4 text-sm leading-7 text-[var(--text-secondary)]">{{ $signal['quote'] }}</p>
                                <p class="mt-6 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">{{ $signal['author'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="contact" class="section">
                <div class="shell-container">
                    <span class="section-kicker">Contact & Business Inquiry</span>
                    <h2 class="section-title text-balance">For business inquiries, partnerships, and executive meetings.</h2>
                    <p class="section-copy">
                        Outreach is structured for qualified business conversations, partnership opportunities, and executive scheduling with a clear, professional intake flow.
                    </p>

                    <div class="contact-options">
                        <article class="contact-card">
                            <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">Business Inquiries</p>
                            <p class="mt-4 text-base leading-8 text-[var(--text-secondary)]">
                                Discuss digital strategy, software execution, operational support, or company-level collaborations.
                            </p>
                        </article>
                        <article class="contact-card">
                            <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">Partnerships</p>
                            <p class="mt-4 text-base leading-8 text-[var(--text-secondary)]">
                                Explore aligned opportunities across technology, media, connectivity, trade, or growth initiatives.
                            </p>
                        </article>
                        <article class="contact-card">
                            <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--accent-strong)]">Meeting Requests</p>
                            <p class="mt-4 text-base leading-8 text-[var(--text-secondary)]">
                                Schedule an executive introduction, strategic discussion, or formal business review.
                            </p>
                        </article>
                    </div>

                    <div class="contact-layout">
                        <article class="panel p-8 md:p-10">
                            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--text-muted)]">Direct Contact</p>
                            <h3 class="mt-4 text-3xl font-semibold text-white">Executive office</h3>
                            <p class="mt-6 text-base leading-8 text-[var(--text-secondary)]">
                                Reach out for qualified business conversations, partnerships, or meeting requests. Public-facing communication should remain concise, relevant, and aligned with a clear objective.
                            </p>

                            <div class="mt-8 space-y-5 text-sm text-[var(--text-secondary)]">
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Email</p>
                                    <a href="mailto:ashok@abssoft.com.np" class="mt-2 inline-block text-lg font-semibold text-white transition hover:text-[var(--accent-strong)]">
                                        ashok@abssoft.com.np
                                    </a>
                                </div>
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Phone</p>
                                    <a href="tel:9864400000" class="mt-2 inline-block text-lg font-semibold text-white transition hover:text-[var(--accent-strong)]">
                                        +977 9864400000
                                    </a>
                                </div>
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Availability</p>
                                    <p class="mt-2 text-base leading-7 text-[var(--text-secondary)]">
                                        Available for scheduled meetings, business evaluations, and partnership discussions.
                                    </p>
                                </div>
                            </div>
                        </article>

                        <article class="panel p-8 md:p-10">
                            @if (session('success'))
                                <div class="mb-6 rounded-2xl border border-emerald-400/20 bg-emerald-400/10 px-5 py-4 text-sm text-emerald-200">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="mb-6 rounded-2xl border border-rose-400/20 bg-rose-400/10 px-5 py-4 text-sm text-rose-100">
                                    <ul class="space-y-1">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form
                                action="{{ route('contact.store') }}#contact"
                                method="POST"
                                class="space-y-5"
                                data-contact-form
                                data-recaptcha-site-key="{{ env('RECAPTCHA_SITE_KEY') }}"
                            >
                                @csrf
                                <input type="hidden" name="g-recaptcha-response">

                                <div class="field-grid two-col">
                                    <div>
                                        <label for="name" class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Name</label>
                                        <input id="name" name="name" type="text" value="{{ old('name') }}" class="input-field" placeholder="Full name" required>
                                    </div>
                                    <div>
                                        <label for="phone" class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Phone</label>
                                        <input id="phone" name="phone" type="tel" value="{{ old('phone') }}" class="input-field" placeholder="Phone number" required>
                                    </div>
                                </div>

                                <div class="field-grid two-col">
                                    <div>
                                        <label for="email" class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Email</label>
                                        <input id="email" name="email" type="email" value="{{ old('email') }}" class="input-field" placeholder="Work email" required>
                                    </div>
                                    <div>
                                        <label for="subject" class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Inquiry type</label>
                                        <select id="subject" name="subject" class="select-field" required>
                                            <option value="">Select inquiry type</option>
                                            <option value="Business inquiry" @selected(old('subject') === 'Business inquiry')>Business inquiry</option>
                                            <option value="Partnership opportunity" @selected(old('subject') === 'Partnership opportunity')>Partnership opportunity</option>
                                            <option value="Meeting request" @selected(old('subject') === 'Meeting request')>Meeting request</option>
                                        </select>
                                    </div>
                                </div>

                                <div>
                                    <label for="message" class="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Message</label>
                                    <textarea id="message" name="message" rows="6" class="textarea-field" placeholder="Briefly outline the context, objective, and preferred next step." required>{{ old('message') }}</textarea>
                                </div>

                                <button type="submit" class="btn-primary w-full sm:w-auto">
                                    Submit Inquiry
                                </button>
                            </form>
                        </article>
                    </div>
                </div>
            </section>
        </main>

        <footer class="shell-container footer-rule">
            <div class="footer-inner">
                <p>Designed as an executive brand platform for Ashok KC.</p>
                <p>© {{ now()->year }} Ashok KC. All rights reserved.</p>
            </div>
        </footer>
    </div>
</x-app-layout>
