---
import Layout from "../layouts/Layout.astro";
---

<Layout title="dashMaker - Own Your Tech">
    <main>
        <div class="hero">
            <div class="hero-content">
                <h1 class="headline">
                    YOUR DASHBOARD.<br />
                    <span class="accent">YOUR WAY.</span>
                </h1>

                <p class="subheadline">
                    A modular e-ink display for what matters to you.<br />
                    Open source tools. <span class="tasteful"
                        >Build it yourself or get it ready-made.</span
                    >
                </p>

                <p class="manifesto">
                    When did "open" stop meaning open source? Every line of code
                    on this hardware is truly open.<br />
                    <span class="king"
                        >As <span id="tech-leader">Linus Torvalds</span> intended.</span
                    >
                </p>

                <div class="cta-group">
                    <a href="#preorder" class="cta-button primary">
                        <span class="button-text">ORDER YOURS</span>
                        <span class="arrow">→</span>
                    </a>
                    <a href="/app" class="cta-button secondary">
                        <span class="button-text">BUILD IT YOURSELF</span>
                        <span class="arrow">→</span>
                    </a>
                </div>

                <a href="/app" class="software-link">
                    <span class="link-icon">→</span>
                    <span>Try the dashboard builder (free & open source)</span>
                </a>
            </div>

            <div class="canvas-container">
                <canvas id="tablet-canvas"></canvas>
                <div class="floating-text">
                    <span>OPEN SOURCE</span>
                    <span>MODULAR</span>
                    <span>YOURS</span>
                </div>
            </div>
        </div>

        <div class="animated-lines" id="lines"></div>
    </main>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        main {
            min-height: 100vh;
            background: #000;
            color: #fff;
            font-family:
                -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
            position: relative;
            overflow: hidden;
        }

        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            min-height: 100vh;
            padding: 4rem;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        @media (max-width: 968px) {
            .hero {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 2rem;
            }
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .headline {
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin: 0;
        }

        .accent {
            background: linear-gradient(135deg, #fff 0%, #888 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .subheadline {
            font-size: clamp(1rem, 2vw, 1.5rem);
            line-height: 1.6;
            color: #aaa;
            max-width: 600px;
        }

        .tasteful {
            color: #ff6b6b;
            font-weight: 600;
        }

        .manifesto {
            font-size: clamp(0.85rem, 1.5vw, 1.1rem);
            line-height: 1.5;
            color: #666;
            max-width: 600px;
            font-style: italic;
            margin-top: -0.5rem;
        }

        .king {
            color: #888;
            font-weight: 500;
        }

        #tech-leader {
            display: inline-block;
            transition: opacity 0.5s ease;
        }

        #tech-leader.fade-out {
            opacity: 0;
        }

        .cta-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem 3rem;
            background: #fff;
            color: #000;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            border: 3px solid #fff;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            align-self: flex-start;
        }

        .cta-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: #000;
            transition: left 0.3s ease;
            z-index: -1;
        }

        .cta-button:hover::before {
            left: 0;
        }

        .cta-button:hover {
            color: #fff;
        }

        .cta-button:hover .arrow {
            transform: translateX(5px);
        }

        .cta-button.secondary {
            background: transparent;
            color: #fff;
            border-color: #fff;
        }

        .cta-button.secondary::before {
            background: #fff;
        }

        .cta-button.secondary:hover {
            color: #000;
        }

        .arrow {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }

        .software-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #aaa;
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            margin-top: -0.5rem;
        }

        .software-link:hover {
            color: #fff;
        }

        .link-icon {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .software-link:hover .link-icon {
            transform: translateX(3px);
        }

        .canvas-container {
            position: relative;
            height: 70vh;
            min-height: 500px;
        }

        #tablet-canvas {
            width: 100%;
            height: 100%;
        }

        .floating-text {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 2rem;
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: 0.2em;
            opacity: 0.3;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%,
            100% {
                transform: translateY(-50%);
            }
            50% {
                transform: translateY(-40%);
            }
        }

        .floating-text span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .animated-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .line {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            animation: slide 20s linear infinite;
        }

        .line.horizontal {
            width: 100%;
            height: 1px;
        }

        .line.vertical {
            width: 1px;
            height: 100%;
        }

        @keyframes slide {
            from {
                transform: translate(-100%, -100%);
            }
            to {
                transform: translate(100%, 100%);
            }
        }
    </style>

    <script>
        // @ts-ignore
        import * as THREE from "three";
        // @ts-ignore
        import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

        // Three.js scene setup
        const canvas = document.getElementById(
            "tablet-canvas",
        ) as HTMLCanvasElement;
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(
            75,
            canvas.clientWidth / canvas.clientHeight,
            0.1,
            1000,
        );
        const renderer = new THREE.WebGLRenderer({
            canvas,
            alpha: true,
            antialias: true,
        });

        renderer.setSize(canvas.clientWidth, canvas.clientHeight);
        renderer.setClearColor(0x000000, 0);

        // Create dashboard textures
        const createDashboardTexture = (type: string) => {
            const canvas = document.createElement("canvas");
            canvas.width = 512;
            canvas.height = 768;
            const ctx = canvas.getContext("2d")!;

            // Background
            ctx.fillStyle = "#f5f5f5";
            ctx.fillRect(0, 0, 512, 768);

            // Draw different dashboard layouts
            ctx.strokeStyle = "#000";
            ctx.fillStyle = "#000";
            ctx.lineWidth = 2;

            if (type === "grid") {
                // Detailed productivity dashboard
                ctx.font = "bold 20px Arial";
                ctx.fillText("My Dashboard", 30, 40);
                ctx.font = "12px Arial";
                ctx.fillStyle = "#666";
                ctx.fillText("Monday, Oct 14 • 12:34 PM", 30, 60);

                // TODO Widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(30, 80, 220, 180);
                ctx.font = "bold 14px Arial";
                ctx.fillText("Today's Tasks", 40, 105);

                const todos = [
                    { text: "Review PR #234", done: true },
                    { text: "Deploy to prod", done: true },
                    { text: "Team standup 2pm", done: false },
                    { text: "Finish docs", done: false },
                ];

                todos.forEach((todo, i) => {
                    const y = 130 + i * 30;
                    // Checkbox
                    ctx.strokeRect(45, y - 12, 14, 14);
                    if (todo.done) {
                        ctx.fillStyle = "#000";
                        ctx.fillRect(48, y - 9, 8, 8);
                    }
                    // Text
                    ctx.font = "12px Arial";
                    ctx.fillStyle = todo.done ? "#999" : "#000";
                    ctx.fillText(todo.text, 68, y);
                });

                // Monero Price Widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(270, 80, 210, 180);
                ctx.font = "bold 14px Arial";
                ctx.fillText("Monero (XMR)", 280, 105);
                ctx.font = "bold 32px Arial";
                ctx.fillText("$168.42", 280, 150);
                ctx.font = "14px Arial";
                ctx.fillStyle = "#2ecc71";
                ctx.fillText("+5.2% (24h)", 280, 175);

                // Mini chart
                ctx.strokeStyle = "#2ecc71";
                ctx.lineWidth = 2;
                ctx.beginPath();
                const chartPoints = [0, -5, 3, -2, 8, 12, 15, 10, 18, 22, 20];
                chartPoints.forEach((val, i) => {
                    const x = 280 + i * 18;
                    const y = 220 - val;
                    if (i === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                });
                ctx.stroke();
                ctx.lineWidth = 2;
                ctx.strokeStyle = "#000";

                // Notion Assignments Widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(30, 280, 220, 160);
                ctx.font = "bold 14px Arial";
                ctx.fillText("Notion - Assignments", 40, 305);

                const assignments = [
                    { title: "Q4 Roadmap", due: "Oct 18" },
                    { title: "Design Review", due: "Oct 20" },
                    { title: "API Spec Doc", due: "Oct 25" },
                ];

                assignments.forEach((item, i) => {
                    const y = 335 + i * 35;
                    ctx.font = "12px Arial";
                    ctx.fillStyle = "#000";
                    ctx.fillText("•", 45, y);
                    ctx.fillText(item.title, 60, y);
                    ctx.font = "10px Arial";
                    ctx.fillStyle = "#999";
                    ctx.fillText("Due " + item.due, 60, y + 15);
                });

                // Custom HTML Widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(270, 280, 210, 160);
                ctx.font = "bold 14px Arial";
                ctx.fillText("</> Custom HTML", 280, 305);

                // Mock HTML code
                ctx.font = "10px monospace";
                ctx.fillStyle = "#666";
                ctx.fillText('<div class="widget">', 280, 330);
                ctx.fillText("  <h2>Hello</h2>", 280, 345);
                ctx.fillText("  <p>Custom</p>", 280, 360);
                ctx.fillText("  render()", 280, 375);
                ctx.fillText("</div>", 280, 390);

                // Quick Stats Widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(30, 460, 450, 100);
                ctx.font = "bold 14px Arial";
                ctx.fillText("Quick Stats", 40, 485);

                // Three stat boxes
                const stats = [
                    { label: "Tasks Done", value: "12/16" },
                    { label: "Focus Time", value: "3.5h" },
                    { label: "Streak", value: "7 days" },
                ];

                stats.forEach((stat, i) => {
                    const x = 50 + i * 145;
                    ctx.font = "bold 24px Arial";
                    ctx.fillText(stat.value, x, 520);
                    ctx.font = "11px Arial";
                    ctx.fillStyle = "#888";
                    ctx.fillText(stat.label, x, 540);
                    ctx.fillStyle = "#000";
                });
            } else if (type === "weather") {
                // Weather-focused layout
                ctx.font = "bold 80px Arial";
                ctx.fillText("72°", 40, 180);
                ctx.font = "24px Arial";
                ctx.fillText("Partly Cloudy", 40, 220);

                // Draw simple sun icon
                ctx.beginPath();
                ctx.arc(400, 130, 40, 0, Math.PI * 2);
                ctx.stroke();

                // Week forecast
                const days = ["MON", "TUE", "WED", "THU", "FRI"];
                days.forEach((day, i) => {
                    const x = 40 + i * 90;
                    ctx.font = "12px Arial";
                    ctx.fillText(day, x, 320);
                    ctx.font = "20px Arial";
                    ctx.fillText("7" + i, x, 360);
                });

                // Time widget
                ctx.strokeRect(40, 420, 430, 120);
                ctx.font = "bold 60px Arial";
                ctx.fillStyle = "#000";
                ctx.fillText("2:34 PM", 60, 490);
                ctx.font = "18px Arial";
                ctx.fillStyle = "#666";
                ctx.fillText("Monday, October 14", 60, 520);
            } else if (type === "crypto") {
                // Crypto dashboard
                ctx.font = "bold 20px Arial";
                ctx.fillText("Portfolio", 40, 60);

                const cryptos = [
                    { name: "BTC", price: "$64,234", change: "+2.4%" },
                    { name: "ETH", price: "$3,421", change: "+1.8%" },
                    { name: "SOL", price: "$142", change: "-0.5%" },
                ];

                cryptos.forEach((crypto, i) => {
                    const y = 120 + i * 100;
                    ctx.font = "bold 18px Arial";
                    ctx.fillText(crypto.name, 40, y);
                    ctx.font = "24px Arial";
                    ctx.fillText(crypto.price, 40, y + 35);
                    ctx.font = "16px Arial";
                    ctx.fillText(crypto.change, 40, y + 60);

                    // Simple chart line
                    ctx.beginPath();
                    ctx.moveTo(250, y + 20);
                    for (let j = 0; j < 10; j++) {
                        ctx.lineTo(
                            250 + j * 22,
                            y + 20 + Math.random() * 40 - 20,
                        );
                    }
                    ctx.stroke();
                });

                // Stoic quote widget
                ctx.fillStyle = "#000";
                ctx.strokeRect(40, 450, 430, 110);
                ctx.font = "italic 20px Arial";
                ctx.fillStyle = "#222";
                ctx.fillText('"You have power over', 60, 485);
                ctx.fillText('your mind, not outside events."', 60, 515);
                ctx.font = "16px Arial";
                ctx.fillStyle = "#666";
                ctx.fillText("— Marcus Aurelius", 60, 545);
            }

            return new THREE.CanvasTexture(canvas);
        };

        // Create tablet frame (improved 3-part design)
        const createTablet = () => {
            const group = new THREE.Group();

            // Create dashboard textures
            const dashboardTextures = [
                createDashboardTexture("grid"),
                createDashboardTexture("weather"),
                createDashboardTexture("crypto"),
            ];

            // Main screen (e-ink display) with dashboard texture
            const screenGeometry = new THREE.BoxGeometry(4, 6, 0.06);
            const screenMaterial = new THREE.MeshStandardMaterial({
                map: dashboardTextures[0],
                roughness: 0.9,
                metalness: 0.05,
            });
            const screen = new THREE.Mesh(screenGeometry, screenMaterial);
            screen.userData.textures = dashboardTextures;
            screen.userData.currentTexture = 0;
            screen.position.z = 0.04;
            group.add(screen);

            // Frame parts (3-part modular system with better detail)
            const frameMaterial = new THREE.MeshStandardMaterial({
                color: 0x0a0a0a,
                roughness: 0.6,
                metalness: 0.3,
            });

            // Top frame part - flush with screen
            const topFrame = new THREE.Mesh(
                new THREE.BoxGeometry(4.2, 0.2, 0.15),
                frameMaterial,
            );
            topFrame.position.y = 3.1;
            topFrame.position.z = 0.04;
            group.add(topFrame);

            // Side frames (left and right) - flush with screen
            const sideFrame = new THREE.Mesh(
                new THREE.BoxGeometry(0.1, 6, 0.15),
                frameMaterial,
            );
            sideFrame.position.x = -2.05;
            sideFrame.position.z = 0.04;
            group.add(sideFrame);

            const rightSideFrame = sideFrame.clone();
            rightSideFrame.position.x = 2.05;
            group.add(rightSideFrame);

            // Bottom frame part - flush with screen
            const bottomFrame = new THREE.Mesh(
                new THREE.BoxGeometry(4.2, 0.2, 0.15),
                frameMaterial,
            );
            bottomFrame.position.y = -3.1;
            bottomFrame.position.z = 0.04;
            group.add(bottomFrame);

            // Back plate with mounting points
            const backPlate = new THREE.Mesh(
                new THREE.BoxGeometry(4.5, 6.5, 0.12),
                frameMaterial,
            );
            backPlate.position.z = -0.18;
            group.add(backPlate);

            // Add modular connection indicators (small dots)
            const connectionMaterial = new THREE.MeshStandardMaterial({
                color: 0x333333,
                roughness: 0.5,
                metalness: 0.5,
            });

            for (let i = 0; i < 3; i++) {
                const dot = new THREE.Mesh(
                    new THREE.SphereGeometry(0.04, 8, 8),
                    connectionMaterial,
                );
                dot.position.set(-2.13, 2 - i * 2, 0.17);
                group.add(dot);

                const dotRight = dot.clone();
                dotRight.position.x = 2.13;
                group.add(dotRight);
            }

            return group;
        };

        const tablet = createTablet();
        scene.add(tablet);

        // Get screen for texture animation
        const screen = tablet.children.find(
            (child: any) => child.userData.textures,
        ) as THREE.Mesh;
        let lastTextureChange = Date.now();
        const textureChangeInterval = 4000; // 4 seconds

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

        const rimLight = new THREE.DirectionalLight(0xff6b6b, 0.3);
        rimLight.position.set(-5, 0, -5);
        scene.add(rimLight);

        camera.position.set(0, 0, 6);

        // Add OrbitControls for user interaction
        const controls = new OrbitControls(camera, canvas);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.enableZoom = true;
        controls.enablePan = false;
        controls.minDistance = 4;
        controls.maxDistance = 12;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.5;

        const animate = () => {
            requestAnimationFrame(animate);

            // Update controls
            controls.update();

            // Handle dashboard texture transitions
            const now = Date.now();
            if (now - lastTextureChange > textureChangeInterval) {
                const material = screen.material as THREE.MeshStandardMaterial;
                const nextTexture =
                    (screen.userData.currentTexture + 1) %
                    screen.userData.textures.length;

                // Fade out/in effect via opacity
                const fadeProgress = Math.min(
                    (now - lastTextureChange - textureChangeInterval) / 500,
                    1,
                );

                if (fadeProgress >= 1) {
                    // Switch texture
                    material.map = screen.userData.textures[nextTexture];
                    material.needsUpdate = true;
                    screen.userData.currentTexture = nextTexture;
                    lastTextureChange = now;
                }
            }

            renderer.render(scene, camera);
        };

        animate();

        // Handle window resize
        window.addEventListener("resize", () => {
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
        });

        // Animated background lines
        const linesContainer = document.getElementById("lines");
        if (linesContainer) {
            for (let i = 0; i < 20; i++) {
                const line = document.createElement("div");
                line.className =
                    "line " + (Math.random() > 0.5 ? "horizontal" : "vertical");
                line.style.top = Math.random() * 100 + "%";
                line.style.left = Math.random() * 100 + "%";
                line.style.animationDelay = Math.random() * 20 + "s";
                line.style.animationDuration = 15 + Math.random() * 10 + "s";
                linesContainer.appendChild(line);
            }
        }

        // Tech leader name rotation
        const techLeaders = [
            "Linus Torvalds",
            "Richard Stallman",
            "Aaron Swartz",
            "Ian Murdock",
            "Dennis Ritchie",
            "Ken Thompson",
            "Guido van Rossum",
            "Bjarne Stroustrup",
        ];

        const techLeaderElement = document.getElementById("tech-leader");
        let currentLeaderIndex = 0;

        function rotateTechLeader() {
            if (!techLeaderElement) return;

            // Fade out
            techLeaderElement.classList.add("fade-out");

            setTimeout(() => {
                // Change text
                currentLeaderIndex =
                    (currentLeaderIndex + 1) % techLeaders.length;
                techLeaderElement.textContent = techLeaders[currentLeaderIndex];

                // Fade in
                techLeaderElement.classList.remove("fade-out");
            }, 500);
        }

        // Rotate every 4 seconds
        setInterval(rotateTechLeader, 2500);
    </script>
</Layout>
