@push('theme-head')
    <meta name="description" content="Transform your business with a modern SaaS platform.">
@endpush

<div class="saasland-theme" x-data="{ menuOpen: false, openFaq: null }">
    <header class="nav">
        <a href="/" class="logo">Saasland</a>

        <nav aria-label="Primary navigation">
            <a href="#features">Features</a>
            <a href="#roadmap">Roadmap</a>
            <a href="#pricing">Pricing</a>
            <a href="#privacy">Privacy</a>
            <a href="#terms">Terms</a>
            <a href="#contact">Contact</a>
        </nav>

        <button
            class="menu"
            type="button"
            aria-label="Toggle navigation"
            :aria-expanded="menuOpen"
            @click="menuOpen = ! menuOpen"
        >
            ☰
        </button>
    </header>

    <div class="mobile-nav" x-show="menuOpen" x-cloak>
        <a href="#features" @click="menuOpen = false">Features</a>
        <a href="#roadmap" @click="menuOpen = false">Roadmap</a>
        <a href="#pricing" @click="menuOpen = false">Pricing</a>
        <a href="#privacy" @click="menuOpen = false">Privacy</a>
        <a href="#terms" @click="menuOpen = false">Terms</a>
        <a href="#contact" @click="menuOpen = false">Contact</a>
    </div>

    <main>
        <section class="hero">
            <div class="glow one"></div>
            <div class="glow two"></div>

            <div class="wrap hero-inner">
                <span class="eyebrow">Introducing Saasland 2.0</span>

                <h1>
                    Transform Your Business With Our
                    <span>SaaS Solution</span>
                </h1>

                <p>
                    Streamline operations, boost productivity, and improve customer satisfaction
                    with one connected platform built for modern teams.
                </p>

                <div class="actions">
                    <a class="btn primary" href="#pricing">Get Started Free →</a>
                    <a class="btn secondary" href="#contact">Book Demo</a>
                </div>

                <div class="trust">
                    <div class="avatars" aria-hidden="true">
                        <i>A</i>
                        <i>B</i>
                        <i>C</i>
                    </div>
                    <small><b>500+</b> businesses already use our platform</small>
                </div>

                <div class="dashboard">
                    <div class="dash-top">
                        <b>Performance overview</b>
                        <span>Live</span>
                    </div>

                    <div class="metrics">
                        <article>
                            <small>Monthly revenue</small>
                            <strong>£48,240</strong>
                            <em>+18.4%</em>
                        </article>
                        <article>
                            <small>Active users</small>
                            <strong>12,842</strong>
                            <em>+9.2%</em>
                        </article>
                        <article>
                            <small>Conversion</small>
                            <strong>7.8%</strong>
                            <em>+2.1%</em>
                        </article>
                    </div>

                    <div class="chart" aria-label="Performance chart">
                        <i style="height: 28%"></i>
                        <i style="height: 42%"></i>
                        <i style="height: 35%"></i>
                        <i style="height: 62%"></i>
                        <i style="height: 54%"></i>
                        <i style="height: 78%"></i>
                        <i style="height: 92%"></i>
                    </div>
                </div>
            </div>
        </section>

        <section class="section" id="features">
            <div class="wrap">
                <div class="heading">
                    <span>Powerful features</span>
                    <h2>Everything your team needs to grow</h2>
                    <p>
                        Move faster with flexible tools that bring planning, collaboration,
                        reporting, and customer insight into one workspace.
                    </p>
                </div>

                <div class="grid three">
                    <article class="card">
                        <b>01</b>
                        <h3>Smart automation</h3>
                        <p>Automate routine processes and let your team focus on work that creates value.</p>
                    </article>
                    <article class="card">
                        <b>02</b>
                        <h3>Real-time analytics</h3>
                        <p>Understand performance instantly with useful dashboards and actionable reporting.</p>
                    </article>
                    <article class="card">
                        <b>03</b>
                        <h3>Team collaboration</h3>
                        <p>Keep discussions, decisions, documents, and delivery aligned in one place.</p>
                    </article>
                    <article class="card">
                        <b>04</b>
                        <h3>Secure by design</h3>
                        <p>Protect business data with robust access controls and dependable infrastructure.</p>
                    </article>
                    <article class="card">
                        <b>05</b>
                        <h3>Easy integrations</h3>
                        <p>Connect the services you already use without rebuilding your existing workflow.</p>
                    </article>
                    <article class="card">
                        <b>06</b>
                        <h3>Priority support</h3>
                        <p>Get expert assistance when you need it from a team that understands your goals.</p>
                    </article>
                </div>
            </div>
        </section>

        <section class="section alt" id="roadmap">
            <div class="wrap split">
                <div>
                    <span class="section-label">Built for momentum</span>
                    <h2>From first idea to measurable growth</h2>
                    <p>
                        Launch quickly, learn from every interaction, and scale with confidence
                        using a platform designed around clear outcomes.
                    </p>
                    <ul class="checks">
                        <li>Fast, guided onboarding</li>
                        <li>Custom workflows for every team</li>
                        <li>Live performance and usage insight</li>
                        <li>Enterprise-ready controls</li>
                    </ul>
                </div>

                <div class="roadmap">
                    <article>
                        <span>01</span>
                        <div>
                            <h3>Connect</h3>
                            <p>Bring your data and tools together.</p>
                        </div>
                    </article>
                    <article>
                        <span>02</span>
                        <div>
                            <h3>Automate</h3>
                            <p>Remove repetitive work and delays.</p>
                        </div>
                    </article>
                    <article>
                        <span>03</span>
                        <div>
                            <h3>Optimise</h3>
                            <p>Use evidence to improve every cycle.</p>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section class="section" id="pricing">
            <div class="wrap">
                <div class="heading">
                    <span>Simple pricing</span>
                    <h2>Choose a plan that fits</h2>
                </div>

                <div class="grid three pricing">
                    <article class="card plan">
                        <h3>Starter</h3>
                        <strong>£19<small>/month</small></strong>
                        <p>For individuals and small teams getting started.</p>
                        <ul>
                            <li>5 team members</li>
                            <li>Core analytics</li>
                            <li>Email support</li>
                        </ul>
                        <a class="btn secondary" href="#contact">Start free</a>
                    </article>

                    <article class="card plan featured">
                        <div class="popular">Most popular</div>
                        <h3>Growth</h3>
                        <strong>£49<small>/month</small></strong>
                        <p>For growing businesses that need more control.</p>
                        <ul>
                            <li>25 team members</li>
                            <li>Advanced analytics</li>
                            <li>Automations</li>
                            <li>Priority support</li>
                        </ul>
                        <a class="btn primary" href="#contact">Choose Growth</a>
                    </article>

                    <article class="card plan">
                        <h3>Scale</h3>
                        <strong>Custom</strong>
                        <p>For established organisations with complex needs.</p>
                        <ul>
                            <li>Unlimited members</li>
                            <li>Custom integrations</li>
                            <li>Dedicated success manager</li>
                        </ul>
                        <a class="btn secondary" href="#contact">Contact sales</a>
                    </article>
                </div>
            </div>
        </section>

        <section class="section alt">
            <div class="wrap">
                <div class="heading">
                    <span>Customer stories</span>
                    <h2>Trusted by ambitious teams</h2>
                </div>

                <div class="grid three">
                    <blockquote class="card">
                        “Saasland gave us one clear view of the business and cut reporting time dramatically.”
                        <footer>Alex Morgan · Northstar</footer>
                    </blockquote>
                    <blockquote class="card">
                        “Our onboarding is faster, our handoffs are cleaner, and the team finally works from the same data.”
                        <footer>Priya Shah · Lumina</footer>
                    </blockquote>
                    <blockquote class="card">
                        “We launched in days and had enough insight to improve conversion in the first month.”
                        <footer>Daniel Reed · Orbit</footer>
                    </blockquote>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="wrap faq">
                <div>
                    <span class="section-label">FAQ</span>
                    <h2>Answers before you begin</h2>
                </div>

                <div>
                    <article>
                        <button type="button" @click="openFaq = openFaq === 1 ? null : 1">
                            Can I try Saasland free?
                            <span>+</span>
                        </button>
                        <p x-show="openFaq === 1">
                            Yes. Start with a free trial and move to a paid plan when your team is ready.
                        </p>
                    </article>
                    <article>
                        <button type="button" @click="openFaq = openFaq === 2 ? null : 2">
                            Can I change plans later?
                            <span>+</span>
                        </button>
                        <p x-show="openFaq === 2">
                            You can upgrade or change your plan as your requirements evolve.
                        </p>
                    </article>
                    <article>
                        <button type="button" @click="openFaq = openFaq === 3 ? null : 3">
                            Does it integrate with existing tools?
                            <span>+</span>
                        </button>
                        <p x-show="openFaq === 3">
                            Yes. Saasland is designed to connect with common business platforms and custom services.
                        </p>
                    </article>
                </div>
            </div>
        </section>

        <section class="section alt legal-area" id="privacy">
            <div class="wrap">
                <div class="heading">
                    <span>Privacy</span>
                    <h2>Your data, handled responsibly</h2>
                    <p>
                        We collect only the information needed to provide, secure, and improve
                        Saasland. We do not sell your personal information.
                    </p>
                </div>

                <div class="grid three legal-grid">
                    <article class="card legal-card">
                        <b>01</b>
                        <h3>Information we collect</h3>
                        <p>
                            Account details, contact information, billing records, product usage,
                            support messages, and technical data such as browser and device details.
                        </p>
                    </article>

                    <article class="card legal-card">
                        <b>02</b>
                        <h3>How we use it</h3>
                        <p>
                            To operate the service, process payments, protect accounts, provide
                            support, improve features, and meet legal obligations.
                        </p>
                    </article>

                    <article class="card legal-card">
                        <b>03</b>
                        <h3>Your choices</h3>
                        <p>
                            You may request access, correction, export, or deletion of your data,
                            and you can change communication preferences at any time.
                        </p>
                    </article>
                </div>

                <div class="legal-note">
                    <strong>Privacy contact</strong>
                    <p>
                        Questions about privacy can be sent to
                        <a href="mailto:privacy@example.com">privacy@example.com</a>.
                    </p>
                </div>
            </div>
        </section>

        <section class="section legal-area" id="terms">
            <div class="wrap">
                <div class="heading">
                    <span>Terms</span>
                    <h2>Clear terms for using Saasland</h2>
                    <p>
                        By creating an account or using the service, you agree to use Saasland
                        lawfully and in accordance with these core terms.
                    </p>
                </div>

                <div class="grid three legal-grid">
                    <article class="card legal-card">
                        <b>01</b>
                        <h3>Account responsibilities</h3>
                        <p>
                            Keep account details accurate, protect login credentials, and ensure
                            activity under your account follows applicable laws and these terms.
                        </p>
                    </article>

                    <article class="card legal-card">
                        <b>02</b>
                        <h3>Subscriptions and billing</h3>
                        <p>
                            Paid plans renew according to the selected billing period. Fees are due
                            when stated and plan changes take effect under the displayed terms.
                        </p>
                    </article>

                    <article class="card legal-card">
                        <b>03</b>
                        <h3>Acceptable use</h3>
                        <p>
                            Do not misuse the platform, interfere with service availability, access
                            data without permission, or use Saasland for unlawful activity.
                        </p>
                    </article>
                </div>

                <div class="legal-note">
                    <strong>Legal contact</strong>
                    <p>
                        Questions about these terms can be sent to
                        <a href="mailto:legal@example.com">legal@example.com</a>.
                    </p>
                </div>
            </div>
        </section>

        <section class="cta" id="contact">
            <div class="wrap">
                <h2>Ready to transform your business?</h2>
                <p>Start building a faster, more connected operation today.</p>
                <a class="btn light" href="/register">Get started free →</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="wrap footer-grid">
            <div>
                <a class="logo" href="/">Saasland</a>
                <p>Modern software for modern companies.</p>
            </div>
            <div>
                <b>Product</b>
                <a href="#features">Features</a>
                <a href="#pricing">Pricing</a>
            </div>
            <div>
                <b>Company</b>
                <a href="#contact">Contact</a>
                <a href="#">About</a>
            </div>
            <div>
                <b>Legal</b>
                <a href="#privacy">Privacy</a>
                <a href="#terms">Terms</a>
            </div>
        </div>

        <div class="wrap copyright">
            © {{ date('Y') }} Saasland. All rights reserved.
        </div>
    </footer>
</div>