<template>
    <Head>
        <title>CRMfic - Modern CRM &amp; Email Marketing</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    </Head>

    <div class="home-page">
        <!-- Nav -->
        <nav class="home-nav">
            <a href="/" class="nav-brand">
                <svg class="nav-brand-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="13" height="13" rx="3" fill="#EA4335"/>
                    <rect x="17" y="2" width="13" height="13" rx="3" fill="#4285F4"/>
                    <rect x="2" y="17" width="13" height="13" rx="3" fill="#FBBC05"/>
                    <rect x="17" y="17" width="13" height="13" rx="3" fill="#34A853"/>
                </svg>
                <span class="nav-brand-name">CRMfic</span>
            </a>
            <a href="/dashboard" class="nav-cta">
                Open App
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:14px;height:14px"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
            </a>
        </nav>

        <!-- Hero -->
        <section class="hero">
            <div class="hero-badge">
                <span class="hero-badge-dot"></span>
                CRM + Email Marketing Platform
            </div>

            <h1 class="hero-title">
                Your contacts,<br>
                campaigns &amp; <span>automations</span><br>
                in one place
            </h1>

            <p class="hero-sub">
                CRMfic brings together email marketing, contact management,
                automation funnels, and analytics - built for modern teams.
            </p>

            <div class="hero-actions">
                <a href="/dashboard" class="btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
                    Go to Dashboard
                </a>
            </div>

            <div class="color-chips">
                <div class="chip" style="background:#EA4335"></div>
                <div class="chip" style="background:#4285F4"></div>
                <div class="chip" style="background:#FBBC05"></div>
                <div class="chip" style="background:#34A853"></div>
            </div>
        </section>

        <!-- Feature strip -->
        <div class="features">
            <div class="feature-item">
                <span class="feature-dot" style="background:#4285F4"></span>
                Email Campaigns
            </div>
            <div class="feature-item">
                <span class="feature-dot" style="background:#EA4335"></span>
                Contact Management
            </div>
            <div class="feature-item">
                <span class="feature-dot" style="background:#FBBC05"></span>
                Automation Funnels
            </div>
            <div class="feature-item">
                <span class="feature-dot" style="background:#34A853"></span>
                Audience Analytics
            </div>
            <div class="feature-item">
                <span class="feature-dot" style="background:#4285F4"></span>
                Drag &amp; Drop Forms
            </div>
            <div class="feature-item">
                <span class="feature-dot" style="background:#34A853"></span>
                Email Sequences
            </div>
        </div>

        <footer class="home-footer">
            &copy; 2026 CRMfic. All rights reserved.
        </footer>
    </div>
</template>

<script setup>
import { Head } from '@inertiajs/vue3';
</script>
