@extends('layouts.app')

@section('content')

{{-- ══════════════════════════════════════════════════
     STICKY HEADER
══════════════════════════════════════════════════ --}}
<header class="site-header" id="top">
    <div class="shell header-inner">
        <a class="brand" href="#hero" aria-label="ezipay home">
            <img src="{{ asset('image/ezipaylogo.png') }}" alt="ezipay logo" width="40" height="40">
            <span>
                ezipay
                <span class="brand-sub">Qist Technology Sdn Bhd</span>
            </span>
        </a>

        <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="menu-toggle" aria-label="Toggle navigation">
            <span></span>
            <span></span>
            <span></span>
        </button>

        <nav id="site-nav" class="site-nav" aria-label="Main">
            <a href="#solutions">Solutions</a>
            <a href="#products">Products</a>
            <a href="#pricing">Pricing</a>
            <a href="#integration">Integration</a>
            <a href="#about">About</a>
            <a href="#contact">Contact Us</a>
            <a class="btn btn-accent btn-sm" href="#contact">Register Now</a>
        </nav>
    </div>
</header>

<main>

{{-- ══════════════════════════════════════════════════
     1. HERO
══════════════════════════════════════════════════ --}}
<section class="hero" id="hero">
    <div class="shell hero-grid">
        <div>
            <span class="hero-tag">Solutions</span>
            <h1>More than payments</h1>
            <p class="hero-sub">Partnering in Your Growth</p>
            <p class="lead">One platform. Get paid. &amp; Grow smarter.</p>
            <p style="font-size:0.9rem;color:var(--accent);font-weight:700;margin-top:0.25rem;">Accept Payment in just 10 minutes!</p>

            <ul class="key-list" aria-label="Key benefits">
                <li>Integrate seamlessly using our APIs to deliver a smooth payment experience.</li>
                <li>Skip the hassle. Get set up in minutes and enjoy all our benefits!</li>
                <li>Flexible Payment Solutions — multiple methods, including cards &amp; eWallets.</li>
                <li>Streamline payment operations from pay-ins and payouts to settlements.</li>
            </ul>

            <div class="hero-actions">
                <a class="btn btn-accent" href="#contact">Register Now</a>
                <a class="btn btn-ghost" href="#integration">API Documentation</a>
            </div>
        </div>

        <figure class="hero-media">
            {{-- <img src="{{ asset('assets/doc-images/image5.png') }}" alt="ezipay Accept Payments dashboard"> --}}
            <img src="{{ asset('assets/doc-images/image1.png') }}" alt="ezipay Accept Payments dashboard">
        </figure>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     2. FEATURE / BENEFIT HIGHLIGHTS
══════════════════════════════════════════════════ --}}
<section class="strip" id="highlights" aria-label="Key benefits">
    <div class="shell">
        <div class="highlight-grid">
            <article class="highlight-card">
                <h3>Seamless Integration</h3>
                <p>Integrate using our well-documented APIs to deliver a smooth payment experience across channels.</p>
            </article>
            <article class="highlight-card">
                <h3>Simply EZI Sign-Up</h3>
                <p>Skip the hassle. Get set up in minutes and start accepting payments with all our benefits.</p>
            </article>
            <article class="highlight-card">
                <h3>Flexible Payment Methods</h3>
                <p>Offer customers multiple payment options — online banking, cards, eWallets, DuitNow QR, and more.</p>
            </article>
            <article class="highlight-card">
                <h3>Secure Processing</h3>
                <p>3D Secure authentication and transaction monitoring controls across all international card schemes.</p>
            </article>
            <article class="highlight-card">
                <h3>Immediate Confirmation</h3>
                <p>Supports instant payments through Malaysia's real-time DuitNow retail payment network.</p>
            </article>
            <article class="highlight-card">
                <h3>Transaction-Based Pricing</h3>
                <p>Charge on successful transactions only. No monthly fees. No setup fees.</p>
            </article>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     3. ABOUT / OVERVIEW
══════════════════════════════════════════════════ --}}
<section class="section" id="about">
    <div class="shell two-col">
        <div>
            <span class="eyebrow">About ezipay</span>
            <h2>Your Gateway to Inclusive Digital Payment</h2>
            <p style="margin-bottom:1rem;">Qist Technology Sdn Bhd is a fintech payments provider delivering secure, scalable, and future-ready solutions for businesses of all sizes.</p>

            <div class="read-more" data-readmore>
                <div class="read-more-content">
                    <p>At ezipay, we offer one of the most comprehensive payment product portfolios in the Malaysian market. Whether you are expanding your reach or deepening engagement with Malaysian customers, our solutions help increase transaction volumes and support business growth.</p>
                    <p style="margin-top:0.75rem;">From sandbox testing to live production, our dedicated technical account managers support you at every stage to ensure a smooth rollout. With a single integration, you can easily expand to additional payment methods, backed by secure and reliable APIs.</p>
                </div>
                <button class="link-btn" type="button" data-readmore-toggle>Read more ↓</button>
            </div>

            <div class="hero-actions" style="margin-top:1.5rem;">
                <a class="btn btn-accent" href="#solutions">Explore Solutions</a>
                <a class="btn btn-ghost" href="#contact">Get in Touch</a>
            </div>
        </div>

        <figure class="media-card">
            {{-- <img src="{{ asset('assets/doc-images/image6.png') }}" alt="ezipay Payouts dashboard"> --}}
            <img src="{{ asset('assets/doc-images/image1.png') }}" alt="ezipay Payouts dashboard">
        </figure>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     image5.png — "Accept Payment" extracted content
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="accept-payments" aria-labelledby="accept-payments-heading">
    <div class="shell">
        <span class="eyebrow">Accept Payments</span>
        <h2 id="accept-payments-heading">Power Your Business with Payment Gateway</h2>
        <p style="margin-bottom:2rem; max-width:60ch;">Choose how you want to integrate. Whether you prefer a ready-made checkout flow or full API control, ezipay has a solution that fits your technical setup.</p>

        <div class="feature-section">
            <div>
                <h3 style="font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;">Self-Integration</h3>
                <div class="feature-grid" style="grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));">
                    <div class="feature-item">
                        <span class="feature-badge badge-blue">Checkout</span>
                        <h4>Pre-Built Checkout</h4>
                        <p>Integrate faster with our pre-built checkout — minimal code, maximum speed.</p>
                    </div>
                    <div class="feature-item">
                        <span class="feature-badge badge-blue">Direct API</span>
                        <h4>Full Branding Control</h4>
                        <p>Take full control of the payment page branding with our Direct API.</p>
                    </div>
                    <div class="feature-item">
                        <span class="feature-badge badge-blue">Plugins</span>
                        <h4>Platform Plugins</h4>
                        <p>Securely power payments for your online store with our ready-made plugins.</p>
                    </div>
                </div>
            </div>

            <div>
                <h3 style="font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;">Without Integration</h3>
                <div class="feature-grid" style="grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));">
                    <div class="feature-item">
                        <span class="feature-badge badge-green">Payment Link</span>
                        <h4>Simple Payments</h4>
                        <p>Simple payments — just share a link. No integration required.</p>
                    </div>
                    <div class="feature-item">
                        <span class="feature-badge badge-green">Digital Catalog</span>
                        <h4>Showcase &amp; Sell</h4>
                        <p>Showcase and sell through curated digital catalogs with ease.</p>
                    </div>
                    <div class="feature-item">
                        <span class="feature-badge badge-green">QRIS</span>
                        <h4>One QR Code</h4>
                        <p>One QR code for all payments — fast, universal, and secure.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


{{-- ══════════════════════════════════════════════════
     image7.png — "Wallets & Billing" extracted content
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="wallets-billing" aria-labelledby="wallets-heading">
    <div class="shell">
        <span class="eyebrow">Wallets &amp; Billing</span>
        <h2 id="wallets-heading">Embedded Finance &amp; Billing</h2>
        <p style="margin-bottom:2rem; max-width:60ch;">Go beyond payments. Unlock wallet capabilities and conversational commerce directly within your platform.</p>

        <div class="feature-grid">
            <div class="feature-item">
                <span class="feature-badge badge-blue">Wallet as a Service</span>
                <h4>Wallet Capabilities</h4>
                <p>Unlock wallet capabilities for your users — issue, load, and manage balances programmatically.</p>
            </div>
            <div class="feature-item">
                <span class="feature-badge badge-blue">Sub Account</span>
                <h4>Smart Fund Visibility</h4>
                <p>Manage accounts with smart fund visibility — ideal for marketplace and platform models.</p>
            </div>
            <div class="feature-item">
                <span class="feature-badge badge-green">PayChat</span>
                <h4>From Conversation to Checkout</h4>
                <p>From conversation to checkout fast — enable payments directly inside messaging channels.</p>
            </div>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     4. SOLUTIONS / PAYMENT CAPABILITIES (CARDS)
══════════════════════════════════════════════════ --}}
<section class="section" id="solutions" aria-labelledby="solutions-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">Products</span>
            <h2 id="solutions-heading">Payment Capabilities</h2>
            <p>A comprehensive suite of payment methods to maximise reach and conversion for your business.</p>
        </div>

        <div class="card-grid">
            <article class="info-card">
                <div class="card-icon">🏦</div>
                <h3>FPX Online Banking</h3>
                <p>Facilitates online banking payments with real-time transaction confirmation across major Malaysian banks.</p>
                <a class="btn btn-ghost btn-sm" href="#fpx">Learn more</a>
            </article>
            <article class="info-card">
                <div class="card-icon">💳</div>
                <h3>Card Payments (Visa &amp; Mastercard)</h3>
                <p>Secure acceptance of debit and credit card payments through international card schemes.</p>
                <a class="btn btn-ghost btn-sm" href="#cards">Learn more</a>
            </article>
            <article class="info-card">
                <div class="card-icon">⚡</div>
                <h3>DuitNow</h3>
                <p>Instant payments through Malaysia's real-time retail payment network — DuitNow Online &amp; QR.</p>
                <a class="btn btn-ghost btn-sm" href="#duitnow">Learn more</a>
            </article>
            <article class="info-card">
                <div class="card-icon">📱</div>
                <h3>eWallet</h3>
                <p>Accept payments and payouts via TNG, GrabPay and other leading eWallet providers.</p>
                <a class="btn btn-ghost btn-sm" href="#ewallet">Learn more</a>
            </article>
            {{-- <article class="info-card">
                <div class="card-icon">🔗</div>
                <h3>API Integration</h3>
                <p>Welcome to ezipay API documentation — flexible, well-structured, developer-first.</p>
                <a class="btn btn-ghost btn-sm" href="#integration">Learn more</a>
            </article>
            <article class="info-card">
                <div class="card-icon">🏷️</div>
                <h3>Pricing Plans</h3>
                <p>Transparent pricing that fits every business. No monthly fees, no setup fees.</p>
                <a class="btn btn-ghost btn-sm" href="#pricing">Learn more</a>
            </article> --}}
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     5. PRODUCTS DETAIL (FPX / Card / DuitNow / eWallet)
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="products" aria-labelledby="products-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">Product Detail</span>
            <h2 id="products-heading">What's Included</h2>
        </div>

        <div class="details-grid">
            <article id="fpx" class="detail-block">
                <h3>FPX (Financial Process Exchange) Online Banking</h3>
                <ul>
                    <li>Connectivity to major Malaysian banks</li>
                    <li>Secure customer authentication</li>
                    <li>Suitable for e-commerce and bill payment use cases</li>
                </ul>
            </article>

            <article id="cards" class="detail-block">
                <h3>Card Payments (Visa &amp; Mastercard)</h3>
                <ul>
                    <li>3D Secure authentication</li>
                    <li>Transaction monitoring controls</li>
                    <li>Secure processing framework</li>
                </ul>
            </article>

            <article id="duitnow" class="detail-block">
                <h3>DuitNow</h3>
                <ul>
                    <li>DuitNow Online Banking</li>
                    <li>DuitNow QR</li>
                    <li>Immediate payment confirmation</li>
                </ul>
            </article>

            <article id="ewallet" class="detail-block media-only">
                <h3>eWallet</h3>
                 <ul>
                    <li>Accept payments and payouts via Malaysia's leading eWallet providers.</li>
                </ul>
                {{-- <p style="margin-bottom:0.75rem; font-size:0.88rem;">Accept payments and payouts via Malaysia's leading eWallet providers.</p> --}}
                {{-- <img src="{{ asset('assets/doc-images/image7.png') }}" alt="eWallet — Wallets & Billing capabilities"> --}}
            </article>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     6. HOW IT WORKS (3 Steps)
══════════════════════════════════════════════════ --}}
<section class="section" id="process" aria-labelledby="process-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">3 Quick Steps</span>
            <h2 id="process-heading">How it Works</h2>
            <p>Get started with ezipay in minutes, not days.</p>
        </div>

        <div class="steps-list">

            <div class="step-row">
                <figure class="step-img">
                    <img src="{{ asset('assets/doc-images/image2.png') }}" alt="Step 1 — Register and create account">
                </figure>
                <div class="step-body">
                    <span class="step-number">01</span>
                    <h3>Register and Create New Account</h3>
                    <p>Skip the hassle. Get set up in minutes and enjoy all our benefits! Our streamlined registration process means you can start accepting payments quickly.</p>
                </div>
            </div>

            <div class="step-row step-row-reverse">
                <figure class="step-img">
                    <img src="{{ asset('assets/doc-images/image3.png') }}" alt="Step 2 — Submit documents for verification">
                </figure>
                <div class="step-body">
                    <span class="step-number">02</span>
                    <h3>Submit the Required Documents for Account Verification</h3>
                    <p>From sandbox testing to live production, our dedicated technical account managers support you at every stage to ensure a smooth rollout and fast approval.</p>
                </div>
            </div>

            <div class="step-row">
                <figure class="step-img">
                    <img src="{{ asset('assets/doc-images/image4.png') }}" alt="Step 3 — Set up dashboard and go live">
                </figure>
                <div class="step-body">
                    <span class="step-number">03</span>
                    <h3>Set Up Your Payment Dashboard and Start Accepting Online Payments</h3>
                    <p>With a single integration, you can easily expand to additional payment methods, backed by secure and reliable APIs. Go live and start growing your business today.</p>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     7. PRICING
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="pricing" aria-labelledby="pricing-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">Pricing</span>
            <h2 id="pricing-heading">Pricing that fits every business.</h2>
            <p>Simple, transparent pricing with no surprises. Pay only for successful transactions.</p>
        </div>

        <div class="pricing-cards">
            <div class="pricing-card">
                <div class="pricing-card-icon">
                    <img src="{{ asset('assets/doc-images/image8.png') }}" alt="" aria-hidden="true">
                </div>
                <h3>Charge on Successful Transactions</h3>
                <p>You only pay when you earn. Our model is charged based on successful transactions only.</p>
            </div>
            <div class="pricing-card">
                <div class="pricing-card-icon">
                    <img src="{{ asset('assets/doc-images/image9.png') }}" alt="" aria-hidden="true">
                </div>
                <h3>No Monthly Fees</h3>
                <p>Enjoy simple pricing with no recurring fees. Pay only for what you use, when you use it.</p>
            </div>
            <div class="pricing-card">
                <div class="pricing-card-icon">
                    <img src="{{ asset('assets/doc-images/image10.png') }}" alt="" aria-hidden="true">
                </div>
                <h3>No Setup Fees</h3>
                <p>Start with no upfront costs — no setup fees mean you can accept payments right away.</p>
            </div>
        </div>

        {{-- Plan Comparison Cards --}}
        <div class="plan-grid">
            <div class="plan-card">
                <div class="plan-header">
                    <h3>ezi Starter</h3>
                    <p>Great for businesses just getting started with online payments.</p>
                </div>
                <div class="plan-body">
                    <ul style="display:flex;flex-direction:column;gap:0.5rem;">
                        <li style="font-size:0.88rem;color:var(--muted);">🆓 Setup Fee: <strong style="color:var(--text);">Waived</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">🆓 Annual Fee: <strong style="color:var(--text);">Waived</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">FPX Online Banking: <strong style="color:var(--text);">0.8% or MYR 1.00</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">DuitNow: <strong style="color:var(--text);">1.00%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">Debit Card: <strong style="color:var(--text);">1.20%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">Credit Card: <strong style="color:var(--text);">2.00%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">TNG / Grab: <strong style="color:var(--text);">1.50%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">BNPL: <strong style="color:var(--text);">TBA</strong></li>
                    </ul>
                    <a class="btn btn-ghost btn-sm" href="#contact" style="margin-top:1.25rem;">Get Started</a>
                </div>
            </div>

            <div class="plan-card">
                <div class="plan-header featured">
                    <h3>ezi Flex</h3>
                    <p>Built for growing businesses with higher transaction volumes.</p>
                </div>
                <div class="plan-body">
                    <ul style="display:flex;flex-direction:column;gap:0.5rem;">
                        <li style="font-size:0.88rem;color:var(--muted);">Setup Fee: <strong style="color:var(--text);">MYR 1,000.00</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">🆓 Annual Fee: <strong style="color:var(--text);">Waived</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">FPX Online Banking: <strong style="color:var(--text);">MYR 0.70 flat</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">DuitNow: <strong style="color:var(--text);">0.80%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">Debit Card: <strong style="color:var(--text);">0.90%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">Credit Card: <strong style="color:var(--text);">1.60%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">TNG / Grab: <strong style="color:var(--text);">1.50%</strong></li>
                        <li style="font-size:0.88rem;color:var(--muted);">BNPL: <strong style="color:var(--text);">TBA</strong></li>
                    </ul>
                    <a class="btn btn-accent btn-sm" href="#contact" style="margin-top:1.25rem;">Get Started</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     8. TABLES — 3.1 Schedule (mandatory)
══════════════════════════════════════════════════ --}}
<section class="section" id="tables" aria-labelledby="tables-heading">
    <div class="shell">
        <div class="section-header tables-header">
            <span class="eyebrow">Schedule</span>
            <h2 id="tables-heading">Rate Schedule</h2>
            <p>Full rate comparison between our <strong>ezi Starter</strong> and <strong>ezi Flex</strong> plans. Scroll horizontally on small screens.</p>
        </div>

        <div class="table-wrap" role="region" aria-label="3.1 Schedule — rate table" tabindex="0">
            <table>
                <caption>Schedule — Payment Method Rate Comparison</caption>
                <thead>
                    <tr>
                        <th scope="col" style="min-width:200px;">Payment Method</th>
                        <th scope="col">ezi Starter</th>
                        <th scope="col">ezi Flex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-section-row">
                        <td colspan="3">Account Fees</td>
                    </tr>
                    <tr>
                        <td>Setup Fee</td>
                        <td><span class="rate-chip">Waived</span></td>
                        <td>MYR 1,000.00</td>
                    </tr>
                    <tr>
                        <td>Annual Fee</td>
                        <td><span class="rate-chip">Waived</span></td>
                        <td><span class="rate-chip">Waived</span></td>
                    </tr>

                    <tr class="table-section-row">
                        <td colspan="3">
                            <img class="table-icon" src="{{ asset('assets/doc-images/image11.png') }}" alt="FPX">
                            FPX — Financial Process Exchange
                        </td>
                    </tr>
                    <tr>
                        <td>Online Banking Payment</td>
                        <td>0.8% or MYR 1.00</td>
                        <td>MYR 0.70 flat</td>
                    </tr>

                    <tr class="table-section-row">
                        <td colspan="3">
                            <img class="table-icon" src="{{ asset('assets/doc-images/image12.png') }}" alt="DuitNow">
                            DuitNow
                        </td>
                    </tr>
                    <tr>
                        <td>DuitNow Online &amp; QR</td>
                        <td>1.00%</td>
                        <td>0.80%</td>
                    </tr>

                    <tr class="table-section-row">
                        <td colspan="3">
                            <img class="table-icon" src="{{ asset('assets/doc-images/image13.png') }}" alt="Card">
                            Card Payments
                        </td>
                    </tr>
                    <tr>
                        <td>Debit Card</td>
                        <td>1.20%</td>
                        <td>0.90%</td>
                    </tr>
                    <tr>
                        <td>Credit Card</td>
                        <td>2.00%</td>
                        <td>1.60%</td>
                    </tr>

                    <tr class="table-section-row">
                        <td colspan="3">
                            <img class="table-icon" src="{{ asset('assets/doc-images/image14.png') }}" alt="TNG">
                            <img class="table-icon" src="{{ asset('assets/doc-images/image15.png') }}" alt="Grab">
                            eWallet
                        </td>
                    </tr>
                    <tr>
                        <td>TNG (Touch 'n Go)</td>
                        <td>1.50%</td>
                        <td>1.50%</td>
                    </tr>
                    <tr>
                        <td>GrabPay</td>
                        <td>1.50%</td>
                        <td>1.50%</td>
                    </tr>

                    <tr class="table-section-row">
                        <td colspan="3">BNPL — Buy Now Pay Later</td>
                    </tr>
                    <tr>
                        <td>Buy Now Pay Later</td>
                        <td>TBA</td>
                        <td>TBA</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     9. API INTEGRATION
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="integration" aria-labelledby="integration-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">Integration</span>
            <h2 id="integration-heading">API Documentation</h2>
            <p>Welcome to ezipay — your central integration hub.</p>
        </div>

        <div class="read-more" data-readmore>
            <div class="read-more-content">
                <p style="margin-bottom:0.75rem;">We're excited to introduce our newly redesigned documentation, built to help you integrate with EZIPAY more effectively and efficiently. Whether you're onboarding or a long-time merchant, this guide is your central resource for understanding how our platform works.</p>
                <p style="margin-bottom:0.75rem;">We've structured the guide to follow a logical path from initial setup to advanced features. Based on the main sections in the navigation panel, here's a quick overview of what you'll find:</p>
                <ul style="list-style:none;padding:0;display:flex;flex-direction:column;gap:0.5rem;">
                    <li style="padding-left:1.2rem;position:relative;font-size:0.9rem;color:var(--muted);">
                        <span style="position:absolute;left:0;color:var(--accent);font-weight:700;">›</span>
                        <strong style="color:var(--text);">Getting Started:</strong> Essential first stop — initial setup, authentication, environments, and fundamental concepts.
                    </li>
                    <li style="padding-left:1.2rem;position:relative;font-size:0.9rem;color:var(--muted);">
                        <span style="position:absolute;left:0;color:var(--accent);font-weight:700;">›</span>
                        <strong style="color:var(--text);">Deposits:</strong> Payment method coverage, step-by-step deposit creation, status flows, and refunds.
                    </li>
                    <li style="padding-left:1.2rem;position:relative;font-size:0.9rem;color:var(--muted);">
                        <span style="position:absolute;left:0;color:var(--accent);font-weight:700;">›</span>
                        <strong style="color:var(--text);">Cashouts:</strong> Country validations, cashout creation guides, and payout status flows.
                    </li>
                    <li style="padding-left:1.2rem;position:relative;font-size:0.9rem;color:var(--muted);">
                        <span style="position:absolute;left:0;color:var(--accent);font-weight:700;">›</span>
                        <strong style="color:var(--text);">Platforms Booster:</strong> Onboarding process and managing submerchant payments for platform-based services.
                    </li>
                </ul>
                <p style="margin-top:0.75rem;font-size:0.9rem;color:var(--muted);">We recommend starting with <em>Getting Started</em> and then moving on to the product you wish to integrate first.</p>
            </div>
            <button class="link-btn" type="button" data-readmore-toggle>Read more ↓</button>
        </div>

        <div style="margin-top:1.5rem;">
            <a class="btn btn-accent" href="#contact">Request API Access</a>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     10. GALLERY (lightbox)
══════════════════════════════════════════════════ --}}
{{-- <section class="section" id="gallery" aria-labelledby="gallery-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">Gallery &amp; Diagrams</span>
            <h2 id="gallery-heading">Platform Visuals</h2>
            <p>Click any image to view full size.</p>
        </div>

        <div class="gallery-grid">
            @php
                $galleryImages = [
                    ['src' => 'assets/doc-images/image1.png',  'caption' => 'ezipay Logo'],
                    ['src' => 'assets/doc-images/image2.png',  'caption' => 'Step 1 — Register'],
                    ['src' => 'assets/doc-images/image3.png',  'caption' => 'Step 2 — Verify'],
                    ['src' => 'assets/doc-images/image4.png',  'caption' => 'Step 3 — Go Live'],
                    ['src' => 'assets/doc-images/image5.png',  'caption' => 'Accept Payments'],
                    ['src' => 'assets/doc-images/image6.png',  'caption' => 'Payouts'],
                    ['src' => 'assets/doc-images/image7.png',  'caption' => 'Wallets & Billing'],
                    ['src' => 'assets/doc-images/image8.png',  'caption' => 'Transaction-Based Pricing'],
                    ['src' => 'assets/doc-images/image9.png',  'caption' => 'No Monthly Fees'],
                    ['src' => 'assets/doc-images/image10.png', 'caption' => 'No Setup Fees'],
                    ['src' => 'assets/doc-images/image11.png', 'caption' => 'FPX'],
                    ['src' => 'assets/doc-images/image12.png', 'caption' => 'DuitNow'],
                    ['src' => 'assets/doc-images/image13.png', 'caption' => 'Card Payments'],
                    ['src' => 'assets/doc-images/image14.png', 'caption' => 'TNG eWallet'],
                    ['src' => 'assets/doc-images/image15.png', 'caption' => 'GrabPay'],
                    ['src' => 'assets/doc-images/image16.png', 'caption' => 'Call-in Support'],
                    ['src' => 'assets/doc-images/image17.png', 'caption' => 'Email Support'],
                    ['src' => 'assets/doc-images/image18.png', 'caption' => 'Contact Form Reference'],
                ];
            @endphp

            @foreach ($galleryImages as $img)
                <figure class="gallery-item">
                    <button
                        type="button"
                        class="gallery-btn"
                        data-lightbox-src="{{ asset($img['src']) }}"
                        data-lightbox-caption="{{ $img['caption'] }}"
                        aria-label="View: {{ $img['caption'] }}"
                    >
                        <img src="{{ asset($img['src']) }}" alt="{{ $img['caption'] }}" loading="lazy">
                    </button>
                    <figcaption>{{ $img['caption'] }}</figcaption>
                </figure>
            @endforeach
        </div>
    </div>
</section> --}}

{{-- ══════════════════════════════════════════════════
     11. FAQ ACCORDION
══════════════════════════════════════════════════ --}}
<section class="section section-soft" id="faq" aria-labelledby="faq-heading">
    <div class="shell">
        <div class="section-header">
            <span class="eyebrow">FAQ</span>
            <h2 id="faq-heading">Frequently Asked Questions</h2>
            <p>Quick answers to the most common questions about ezipay.</p>
        </div>

        <div class="accordion" role="list">
            <div class="accordion-item" role="listitem">
                <button class="accordion-trigger" aria-expanded="false" aria-controls="faq-1">
                    What payment methods does ezipay support?
                    <span class="accordion-icon" aria-hidden="true">+</span>
                </button>
                <div class="accordion-panel" id="faq-1" role="region">
                    <div class="accordion-panel-inner">
                        ezipay supports FPX Online Banking, Card Payments (Visa & Mastercard — Debit & Credit), DuitNow (Online Banking &amp; QR), eWallets (TNG, GrabPay), and Buy Now Pay Later (BNPL — coming soon).
                    </div>
                </div>
            </div>

            <div class="accordion-item" role="listitem">
                <button class="accordion-trigger" aria-expanded="false" aria-controls="faq-2">
                    Is there a setup fee to start using ezipay?
                    <span class="accordion-icon" aria-hidden="true">+</span>
                </button>
                <div class="accordion-panel" id="faq-2" role="region">
                    <div class="accordion-panel-inner">
                        For our <strong>ezi Starter</strong> plan, setup fees are completely waived. The <strong>ezi Flex</strong> plan has a one-time setup fee of MYR 1,000.00. Both plans waive annual fees.
                    </div>
                </div>
            </div>

            <div class="accordion-item" role="listitem">
                <button class="accordion-trigger" aria-expanded="false" aria-controls="faq-3">
                    How quickly can I start accepting payments?
                    <span class="accordion-icon" aria-hidden="true">+</span>
                </button>
                <div class="accordion-panel" id="faq-3" role="region">
                    <div class="accordion-panel-inner">
                        You can accept payments in as little as 10 minutes with our pre-built checkout. Register an account, submit your verification documents, set up your dashboard, and start accepting payments right away — no technical expertise required for the no-integration methods.
                    </div>
                </div>
            </div>

            <div class="accordion-item" role="listitem">
                <button class="accordion-trigger" aria-expanded="false" aria-controls="faq-4">
                    What integration options are available?
                    <span class="accordion-icon" aria-hidden="true">+</span>
                </button>
                <div class="accordion-panel" id="faq-4" role="region">
                    <div class="accordion-panel-inner">
                        Self-integration options include our Pre-Built Checkout, Direct API (full branding control), and Platform Plugins. No-integration options include Payment Links, Digital Catalogs, and QRIS — perfect for businesses that want to accept payments without writing a single line of code.
                    </div>
                </div>
            </div>

            <div class="accordion-item" role="listitem">
                <button class="accordion-trigger" aria-expanded="false" aria-controls="faq-5">
                    Is ezipay secure and compliant?
                    <span class="accordion-icon" aria-hidden="true">+</span>
                </button>
                <div class="accordion-panel" id="faq-5" role="region">
                    <div class="accordion-panel-inner">
                        Yes. ezipay uses 3D Secure authentication for card transactions, transaction monitoring controls, and operates through a secure processing framework. All card transactions go through internationally accredited card schemes.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     12. CONTACT + FORM
══════════════════════════════════════════════════ --}}
<section class="section" id="contact" aria-labelledby="contact-heading">
    <div class="shell contact-grid">
        <div class="contact-info">
            <span class="eyebrow">Get in Touch</span>
            <h2 id="contact-heading">Let's Talk Payments</h2>
            <p style="margin-bottom:1rem;">Discover our next steps and schedule a meeting with our team. We look forward to connecting with you.</p>

            <div class="contact-methods">
                <div class="contact-method">
                    <div class="contact-method-icon">
                        <img src="{{ asset('assets/doc-images/image16.png') }}" alt="Phone">
                    </div>
                    <div class="contact-method-text">
                        <strong>Call-in Support</strong>
                        <span>Monday – Friday, 9.00 am – 6.00 pm</span>
                        <span>018-3639700</span>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="contact-method-icon">
                        <img src="{{ asset('assets/doc-images/image17.png') }}" alt="Email">
                    </div>
                    <div class="contact-method-text">
                        <strong>Email Us</strong>
                        <span>Send us a message anytime</span>
                    </div>
                </div>
            </div>

            <div style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem;">
                <a class="btn btn-accent" href="tel:012xxxxxxx">
                    📞 Call Us
                </a>
                <a class="btn btn-ghost" href="mailto:support@ezipay.my">
                    ✉ Email Us
                </a>
            </div>
        </div>

        <form class="contact-form" action="#" method="post" novalidate aria-label="Contact form">
            <h3 style="margin-bottom:0.25rem;font-size:1.1rem;">Send a Message</h3>
            <p style="font-size:0.87rem;margin-bottom:0.5rem;">Fill in the form and our team will get back to you shortly.</p>

            <div class="form-row">
                <div class="form-group">
                    <label for="contact-name">Name</label>
                    <input id="contact-name" name="name" type="text" placeholder="Your full name" required>
                </div>
                <div class="form-group">
                    <label for="contact-email">Email</label>
                    <input id="contact-email" name="email" type="email" placeholder="you@company.com" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="contact-phone">Phone</label>
                    <input id="contact-phone" name="phone" type="tel" placeholder="+60 1x-xxxxxxx">
                </div>
                <div class="form-group">
                    <label for="contact-website">Website</label>
                    <input id="contact-website" name="website" type="url" placeholder="https://yoursite.com">
                </div>
            </div>

            <div class="form-group">
                <label for="contact-company">Company</label>
                <input id="contact-company" name="company" type="text" placeholder="Your company name">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="contact-industry">Industry</label>
                    <select id="contact-industry" name="industry">
                        <option value="" disabled selected>Please select</option>
                        <option>E-Commerce &amp; Retail</option>
                        <option>Education</option>
                        <option>Healthcare</option>
                        <option>F&amp;B / Restaurant</option>
                        <option>Travel &amp; Hospitality</option>
                        <option>Technology</option>
                        <option>Financial Services</option>
                        <option>Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="contact-volume">Monthly Processing Volume</label>
                    <select id="contact-volume" name="volume">
                        <option value="" disabled selected>Please select</option>
                        <option>Less than MYR 10,000</option>
                        <option>MYR 10,000 – MYR 50,000</option>
                        <option>MYR 50,000 – MYR 200,000</option>
                        <option>MYR 200,000 – MYR 1,000,000</option>
                        <option>More than MYR 1,000,000</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="contact-message">Message / Comments</label>
                <textarea id="contact-message" name="message" rows="4" placeholder="Tell us about your business and what you need…"></textarea>
            </div>

            <button class="btn btn-accent" type="submit" style="align-self:flex-start;">Send Message</button>
        </form>
    </div>
</section>

{{-- ══════════════════════════════════════════════════
     CTA STRIP
══════════════════════════════════════════════════ --}}
<div class="cta-strip">
    <div class="shell">
        <h2>Ready to get started?</h2>
        <p>Join thousands of Malaysian businesses already growing with ezipay.</p>
        <div class="cta-actions-center">
            <a class="btn btn-ghost" href="#contact">Register Now</a>
            <a class="btn" style="background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.35);" href="#integration">View API Docs</a>
        </div>
    </div>
</div>

</main>

{{-- ══════════════════════════════════════════════════
     FOOTER
══════════════════════════════════════════════════ --}}
<footer class="site-footer" aria-label="Site footer">
    <div class="shell">
        <div class="footer-grid">
            <div class="footer-brand">
                <img src="{{ asset('assets/doc-images/image1.png') }}" alt="ezipay logo">
                <p>Qist Technology Sdn Bhd<br>(1650962-T)</p>
                <p style="margin-top:0.5rem;">A-11-1, Pusat Komersial Arena Bintang,<br>Seksyen U5 40150 Shah Alam Selangor,<br>Malaysia.</p>
            </div>

            <div class="footer-col">
                <h4>Solutions</h4>
                <nav class="footer-links" aria-label="Solutions links">
                    <a href="#accept-payments">Accept Payments</a>
                    <a href="#payouts">Payouts</a>
                    <a href="#wallets-billing">Wallets &amp; Billing</a>
                    <a href="#integration">API Integration</a>
                </nav>
            </div>

            <div class="footer-col">
                <h4>Products</h4>
                <nav class="footer-links" aria-label="Products links">
                    <a href="#fpx">FPX</a>
                    <a href="#cards">Card Payments</a>
                    <a href="#duitnow">DuitNow</a>
                    <a href="#ewallet">eWallet</a>
                </nav>
            </div>

            <div class="footer-col">
                <h4>Company</h4>
                <nav class="footer-links" aria-label="Company links">
                    <a href="#about">About ezipay</a>
                    <a href="#pricing">Pricing</a>
                    <a href="#faq">FAQ</a>
                    <a href="#contact">Contact Us</a>
                </nav>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; {{ date('Y') }} Qist Technology Sdn Bhd. All rights reserved.</p>
            <div class="footer-legal">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Use</a>
            </div>
        </div>
    </div>
</footer>

{{-- ══════════════════════════════════════════════════
     LIGHTBOX
══════════════════════════════════════════════════ --}}
<div class="lightbox" id="lightbox" aria-hidden="true" role="dialog" aria-label="Image preview" aria-modal="true">
    <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Close image preview">&times;</button>
    <figure>
        <img id="lightbox-image" src="" alt="">
        <figcaption id="lightbox-caption"></figcaption>
    </figure>
</div>

{{-- ══════════════════════════════════════════════════
     BACK TO TOP
══════════════════════════════════════════════════ --}}
<button class="back-to-top" id="back-to-top" aria-label="Back to top" title="Back to top">↑</button>

@endsection