<script lang="ts">
    import { onMount } from "svelte";
    import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
    import Carousel from "$lib/components/Carousel.svelte";
    import Icon from "@iconify/svelte";

    interface Props {
        onProgressChange?: (progress: number) => void;
    }
    let { onProgressChange }: Props = $props();

    let sceneProgress = $state(0);
    let statsData = $state({
        verified_reports: 0,
        incidents_reported: 0,
        active_sectors: 0,
    });

    async function fetchStats() {
        try {
            const res = await fetch("/api/reports/stats");
            const data = await res.json();
            statsData = data;
        } catch (e) {
            console.error("Failed to fetch stats", e);
        }
    }

    onMount(() => {
        fetchStats();
    });

    function handleProgressChange(progress: number) {
        sceneProgress = progress;
        onProgressChange?.(progress);
    }

    const features = [
        {
            icon: "ri:camera-lens-line",
            title: "Scan Products",
            desc: "Point your camera at any product to analyze environmental claims.",
        },
        {
            icon: "ri:chat-3-line",
            title: "Ask Questions",
            desc: "Chat with our AI about sustainability and eco-friendly alternatives.",
        },
        {
            icon: "ri:alarm-warning-line",
            title: "Report Issues",
            desc: "Submit products or companies you suspect of greenwashing.",
        },
        {
            icon: "ri:folder-open-line",
            title: "Browse Reports",
            desc: "Explore verified sustainability reports and community findings.",
        },
    ];

    let stats = $derived([
        {
            value: statsData.incidents_reported.toString(),
            label: "Products Scanned",
        },
        {
            value: statsData.verified_reports.toString(),
            label: "Verified Reports",
        },
        {
            value: statsData.active_sectors.toString(),
            label: "Data Sectors",
        },
    ]);
</script>

<div class="web-home">
    <ParallaxLandscape onProgressChange={handleProgressChange} />

    <section class="hero">
        <div class="hero-content">
            <span class="hero-badge">
                <Icon icon="ri:leaf-line" width="16" />
                Sustainability Made Simple
            </span>

            <h1 class="hero-title">
                Know What<br />You're Buying
            </h1>

            <p class="hero-desc">
                Scan products, detect greenwashing, and make informed choices.
                Ethix helps you see through misleading environmental claims.
            </p>

            <div class="hero-actions">
                <a href="/catalogue" class="btn-primary">
                    <Icon icon="ri:search-line" width="18" />
                    Browse Catalogue
                </a>
                <a href="/chat" class="btn-secondary">
                    <Icon icon="ri:chat-3-line" width="18" />
                    Chat with AI
                </a>
            </div>
        </div>

        <div class="hero-visual">
            <Carousel />
        </div>
    </section>

    <div class="spacer"></div>

    <section class="stats-section">
        <div class="stats-card">
            {#each stats as stat}
                <div class="stat-item">
                    <span class="stat-value">{stat.value}</span>
                    <span class="stat-label">{stat.label}</span>
                </div>
            {/each}
        </div>
    </section>

    <section class="features-section">
        <h2 class="section-title">How It Works</h2>
        <p class="section-desc">Simple tools to help you shop smarter</p>

        <div class="features-grid">
            {#each features as feature}
                <div class="feature-card">
                    <div class="feature-icon">
                        <Icon icon={feature.icon} width="24" />
                    </div>
                    <h3 class="feature-title">{feature.title}</h3>
                    <p class="feature-desc">{feature.desc}</p>
                </div>
            {/each}
        </div>
    </section>

    <section class="info-section">
        <div class="info-card">
            <div class="info-header">
                <Icon
                    icon="ri:error-warning-line"
                    width="20"
                    class="info-icon"
                />
                <span>What is Greenwashing?</span>
            </div>
            <p class="info-text">
                Greenwashing is when companies make misleading claims about how
                environmentally friendly their products are. Common tactics
                include vague terms like "eco-friendly" without proof,
                highlighting minor green features while hiding major harms, and
                using green imagery without substance.
            </p>
            <a href="/report" class="info-link">
                Report suspicious claims
                <Icon icon="ri:arrow-right-line" width="16" />
            </a>
        </div>
    </section>

    <section class="cta-section">
        <h2 class="cta-title">Ready to start?</h2>
        <p class="cta-desc">
            Every scan helps build a more transparent marketplace.
        </p>
        <div class="cta-actions">
            <a href="/report" class="btn-primary">
                <Icon icon="ri:shield-check-line" width="18" />
                Submit a Report
            </a>
            <a href="/catalogue" class="btn-secondary"> View All Reports </a>
        </div>
    </section>

    <div class="footer-spacer"></div>
</div>

<style>
    .web-home {
        width: 100%;
        overflow-x: hidden;
        position: relative;
        z-index: 10;
    }

    .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 120px 60px 100px;
        max-width: 1200px;
        margin: 0 auto;
        justify-content: space-between;
        gap: 60px;
    }

    .hero-visual {
        flex: 1;
        max-width: 500px;
        display: flex;
        justify-content: center;
    }

    .hero-content {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        padding: 48px;
        max-width: 550px;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(34, 197, 94, 0.1);
        color: #4ade80;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 24px;
        border: 1px solid rgba(34, 197, 94, 0.2);
    }

    .hero-title {
        font-size: 56px;
        font-weight: 900;
        line-height: 1.1;
        color: white;
        margin: 0 0 20px 0;
        letter-spacing: -1px;
    }

    .hero-desc {
        font-size: 17px;
        line-height: 1.7;
        color: #d1d5db;
        margin: 0 0 32px 0;
    }

    .hero-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        background: #22c55e;
        color: white;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-primary:hover {
        background: #16a34a;
        transform: translateY(-2px);
    }

    .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: all 0.2s;
    }

    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .spacer {
        height: 20vh;
    }

    .footer-spacer {
        height: 10vh;
    }

    .stats-section {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 40px 60px;
    }

    .stats-card {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 40px;
        display: flex;
        justify-content: space-around;
        gap: 40px;
    }

    .stat-item {
        text-align: center;
    }

    .stat-value {
        display: block;
        font-size: 42px;
        font-weight: 800;
        color: #4ade80;
        letter-spacing: -1px;
    }

    .stat-label {
        font-size: 14px;
        color: #9ca3af;
        font-weight: 500;
    }

    .features-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 60px 40px;
        text-align: center;
    }

    .section-title {
        font-size: 36px;
        font-weight: 800;
        color: white;
        margin: 0 0 8px 0;
    }

    .section-desc {
        font-size: 16px;
        color: #9ca3af;
        margin: 0 0 40px 0;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .feature-card {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 28px 20px;
        text-align: center;
        transition: border-color 0.2s;
    }

    .feature-card:hover {
        border-color: rgba(34, 197, 94, 0.3);
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        background: rgba(34, 197, 94, 0.1);
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #4ade80;
        margin-bottom: 16px;
    }

    .feature-title {
        font-size: 16px;
        font-weight: 700;
        color: white;
        margin: 0 0 8px 0;
    }

    .feature-desc {
        font-size: 13px;
        color: #9ca3af;
        line-height: 1.5;
        margin: 0;
    }

    .info-section {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 40px 60px;
    }

    .info-card {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 32px;
    }

    .info-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin-bottom: 16px;
    }

    .info-text {
        font-size: 15px;
        color: #d1d5db;
        line-height: 1.7;
        margin: 0 0 20px 0;
    }

    .info-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #4ade80;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: gap 0.2s;
    }

    .info-link:hover {
        gap: 10px;
    }

    .cta-section {
        max-width: 600px;
        margin: 0 auto;
        padding: 60px 40px;
        text-align: center;
    }

    .cta-title {
        font-size: 32px;
        font-weight: 800;
        color: white;
        margin: 0 0 12px 0;
    }

    .cta-desc {
        font-size: 16px;
        color: #9ca3af;
        margin: 0 0 28px 0;
    }

    .cta-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    @media (max-width: 900px) {
        .features-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .hero {
            flex-direction: column;
            text-align: center;
            padding-top: 100px;
        }

        .hero-content {
            margin: 0 auto;
        }

        .hero-visual {
            margin-top: 40px;
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .hero {
            padding: 80px 20px;
        }

        .hero-content {
            padding: 32px;
        }

        .hero-title {
            font-size: 40px;
        }

        .stats-card {
            flex-direction: column;
            gap: 24px;
        }

        .features-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
