import { motion } from "framer-motion"

export default function PerspectiveLab() {
    return (
        <div style={styles.page}>
            
            {/* HERO */}
            <section style={styles.hero}>
                <div style={styles.heroImage} />
                
                <div style={styles.heroContent}>
                    <motion.h1
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 1 }}
                        style={styles.h1}
                    >
                        The <span style={styles.italic}>Perspective</span> Lab
                    </motion.h1>

                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.5 }}
                        style={styles.sub}
                    >
                        A living publication on perception, systems, and human narrative
                    </motion.p>
                </div>
            </section>

            {/* MANIFESTO */}
            <section style={styles.section}>
                <h2 style={styles.h2}>Not a startup. A publication.</h2>

                <p style={styles.p}>
                    The Perspective Lab exists at the intersection of observation and design.
                    It documents how people, systems, and stories shift when seen through different lenses.
                </p>

                <p style={styles.p}>
                    Every project inside the Lab functions like an editorial piece—slow,
                    intentional, and layered with meaning rather than speed.
                </p>
            </section>

            {/* ARCHIVE */}
            <section style={styles.section}>
                <div style={styles.label}>Archive Preview</div>

                <div style={styles.grid}>
                    {["Peripheral Vision Project", "Advocacy Blueprint", "The Pivot Place"].map((item) => (
                        <div key={item} style={styles.card}>
                            <div style={styles.cardTitle}>{item}</div>
                            <div style={styles.cardText}>
                                Case study in perception, structure, and narrative framing.
                            </div>
                        </div>
                    ))}
                </div>
            </section>

            {/* IMAGE STRIP */}
            <section style={styles.strip}>
                {[
                    "https://images.unsplash.com/photo-1520975922284-9b4c2c2f4f6b",
                    "https://images.unsplash.com/photo-1521737604893-d14cc237f11d",
                    "https://images.unsplash.com/photo-1526481280698-8fcc13fd98c8",
                ].map((src) => (
                    <div key={src} style={styles.imageWrap}>
                        <img src={src} style={styles.image} />
                    </div>
                ))}
            </section>

            {/* FOOTER */}
            <footer style={styles.footer}>
                The Perspective Lab © 2026
            </footer>
        </div>
    )
}

/* ---------------- STYLES ---------------- */

const styles = {
    page: {
        background: "#0b0b0c",
        color: "#f5f1ea",
        fontFamily: "serif",
    },

    hero: {
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
        textAlign: "center",
        padding: "40px",
    },

    heroImage: {
        position: "absolute",
        inset: 0,
        backgroundImage:
            "url(https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=2000&q=80)",
        backgroundSize: "cover",
        backgroundPosition: "center",
        opacity: 0.35,
        filter: "blur(3px)",
    },

    heroContent: {
        position: "relative",
        maxWidth: "800px",
    },

    h1: {
        fontSize: "64px",
        fontWeight: 300,
        letterSpacing: "-1px",
    },

    italic: {
        fontStyle: "italic",
        fontFamily: "serif",
    },

    sub: {
        marginTop: "20px",
        fontSize: "14px",
        letterSpacing: "3px",
        textTransform: "uppercase",
        color: "#cfc7bb",
    },

    section: {
        padding: "120px 60px",
        borderTop: "1px solid #1c1c1c",
        maxWidth: "1000px",
        margin: "0 auto",
    },

    h2: {
        fontSize: "28px",
        fontWeight: 300,
    },

    p: {
        marginTop: "24px",
        color: "#cfc7bb",
        lineHeight: 1.7,
        fontSize: "16px",
    },

    label: {
        letterSpacing: "4px",
        fontSize: "12px",
        color: "#9b948b",
        marginBottom: "40px",
        textTransform: "uppercase",
    },

    grid: {
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: "24px",
    },

    card: {
        border: "1px solid #1c1c1c",
        padding: "20px",
    },

    cardTitle: {
        fontSize: "18px",
        fontStyle: "italic",
    },

    cardText: {
        marginTop: "12px",
        fontSize: "14px",
        color: "#b8b1a7",
        lineHeight: 1.5,
    },

    strip: {
        display: "flex",
        gap: "16px",
        overflowX: "auto",
        padding: "60px",
        borderTop: "1px solid #1c1c1c",
    },

    imageWrap: {
        minWidth: "300px",
        height: "420px",
        overflow: "hidden",
    },

    image: {
        width: "100%",
        height: "100%",
        objectFit: "cover",
        opacity: 0.8,
    },

    footer: {
        padding: "60px",
        borderTop: "1px solid #1c1c1c",
        fontSize: "12px",
        letterSpacing: "3px",
        color: "#9b948b",
    },
}