---
import Base from '../layouts/Base.astro';

const schemaOrg = {
    "@context": "https://schema.org",
    "@type": "Store",
    "name": "REBOURS Studio",
    "description": "Mobilier d'art contemporain. Space Age × Memphis. Pièces uniques fabriquées à Paris.",
    "url": "https://rebours.studio/",
    "image": "https://rebours.studio/assets/lamp-violet.jpg",
    "address": { "@type": "PostalAddress", "addressLocality": "Paris", "addressCountry": "FR" },
    "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Collection 001",
        "itemListElement": [{
            "@type": "Offer",
            "itemOffered": {
                "@type": "Product",
                "name": "Solar Altar",
                "description": "Lampe de table unique. Béton texturé coulé à la main + dôme céramique laqué.",
                "image": "https://rebours.studio/assets/lamp-violet.jpg"
            },
            "price": "1800",
            "priceCurrency": "EUR",
            "availability": "https://schema.org/LimitedAvailability"
        }]
    }
};
---

<Base
    title="REBOURS — Mobilier d'art contemporain | Collection 001"
    description="REBOUR Studio crée du mobilier d'art contemporain inspiré du Space Age et du mouvement Memphis. Pièces uniques fabriquées à Paris. Collection 001 en cours."
    canonical="https://rebours.studio/"
>
    <Fragment slot="head">
        <script type="application/ld+json" set:html={JSON.stringify(schemaOrg)} />
    </Fragment>

    <!-- Grid background -->
    <div id="interactive-grid" class="interactive-grid"></div>

    <!-- PRODUCT PANEL (overlay) -->
    <div id="product-panel" class="product-panel" aria-hidden="true">
        <div class="panel-close" id="panel-close">
            <span>← RETOUR</span>
        </div>
        <div class="panel-inner">
            <div class="panel-img-col">
                <img id="panel-img" src="" alt="">
            </div>
            <div class="panel-info-col">
                <p class="panel-index" id="panel-index"></p>
                <h2 id="panel-name"></h2>
                <hr>
                <div class="panel-meta">
                    <div class="panel-meta-row">
                        <span class="meta-key">TYPE</span>
                        <span id="panel-type"></span>
                    </div>
                    <div class="panel-meta-row">
                        <span class="meta-key">MATÉRIAUX</span>
                        <span id="panel-mat"></span>
                    </div>
                    <div class="panel-meta-row">
                        <span class="meta-key">ANNÉE</span>
                        <span id="panel-year"></span>
                    </div>
                    <div class="panel-meta-row">
                        <span class="meta-key">STATUS</span>
                        <span id="panel-status" class="red"></span>
                    </div>
                </div>
                <hr>
                <p id="panel-desc" class="panel-desc"></p>
                <hr>

                <details class="accordion">
                    <summary>SPÉCIFICATIONS TECHNIQUES <span>↓</span></summary>
                    <div class="accordion-body" id="panel-specs"></div>
                </details>
                <details class="accordion">
                    <summary>NOTES DE CONCEPTION <span>↓</span></summary>
                    <div class="accordion-body" id="panel-notes"></div>
                </details>

                <hr>

                <div id="checkout-section" style="display:none;">
                    <div class="checkout-price-line">
                        <span class="checkout-price">1 800 €</span>
                        <span class="checkout-edition">ÉDITION UNIQUE — 1/1</span>
                    </div>
                    <button id="checkout-toggle-btn" class="checkout-btn">
                        [ COMMANDER CETTE PIÈCE ]
                    </button>
                    <div id="checkout-form-wrap" class="checkout-form-wrap" style="display:none;">
                        <form id="checkout-form" class="checkout-form">
                            <div class="checkout-form-field">
                                <label for="checkout-email">EMAIL *</label>
                                <input type="email" id="checkout-email" name="email" placeholder="votre@email.com" required autocomplete="off">
                            </div>
                            <div class="checkout-form-note">
                                Pièce fabriquée à Paris. Délai : 6 à 8 semaines.<br>
                                Paiement sécurisé via Stripe.
                            </div>
                            <button type="submit" class="checkout-submit" id="checkout-submit-btn">
                                PROCÉDER AU PAIEMENT →
                            </button>
                        </form>
                    </div>
                </div>

                <div class="panel-footer">
                    <span class="blink">■</span> COLLECTION_001 — W.I.P
                </div>
            </div>
        </div>
    </div>

    <div class="page-wrapper">

        <header class="header">
            <a href="/" class="logo-text" aria-label="REBOURS — Accueil">REBOURS</a>
            <nav class="header-nav" aria-label="Navigation principale">
                <a href="#collection">COLLECTION_001</a>
                <a href="#contact">CONTACT</a>
                <span class="wip-tag"><span class="blink">■</span> W.I.P</span>
            </nav>
        </header>

        <main>

            <!-- HERO -->
            <section class="hero" aria-label="Introduction">
                <div class="hero-left">
                    <p class="label">// ARCHIVE_001 — 2026</p>
                    <h1>REBOURS<br>STUDIO</h1>
                    <p class="hero-sub">Mobilier d'art contemporain.<br>Space Age × Memphis.</p>
                    <p class="hero-sub mono-sm">STATUS: [PROTOTYPE EN COURS]<br>COLLECTION_001 — BIENTÔT DISPONIBLE</p>
                </div>
                <div class="hero-right">
                    <img
                        src="/assets/table-terrazzo.jpg"
                        alt="REBOURS — Table Terrazzo, plateau terrazzo et acier tubulaire, Paris 2026"
                        class="hero-img"
                        width="1024" height="1024"
                        fetchpriority="high">
                </div>
            </section>

            <hr>

            <!-- COLLECTION GRID -->
            <section class="collection" id="collection" aria-label="Collection 001">
                <div class="collection-header">
                    <p class="label">// COLLECTION_001</p>
                    <span class="label">3 OBJETS — CLIQUER POUR OUVRIR</span>
                </div>

                <div class="product-grid">

                    <article class="product-card"
                        data-index="PROJET_001"
                        data-name="Solar_Altar"
                        data-type="LAMPE DE TABLE"
                        data-mat="BÉTON TEXTURÉ + DÔME CÉRAMIQUE LAQUÉ"
                        data-year="2026"
                        data-status="PROTOTYPE [80%]"
                        data-desc="Exploration de la lumière à travers des contraintes géométriques. Le dôme sphérique en céramique laquée coiffe un corps en béton texturé peint à la main. Chaque pièce est unique."
                        data-specs="H: 45cm / Ø: 18cm&#10;Poids: 3.2kg&#10;Alimentation: 220V — E27&#10;Câble: tressé rouge 2m"
                        data-notes="Inspiré des lampadaires soviétiques des années 60. Le béton est coulé à la main dans des moules uniques. La peinture acrylique est appliquée au spalter."
                        data-img="/assets/lamp-violet.jpg"
                        aria-label="Ouvrir le détail de Solar Altar">
                        <div class="card-img-wrap">
                            <img src="/assets/lamp-violet.jpg"
                                 alt="Solar Altar — Lampe béton violet, dôme céramique bleu, REBOURS 2026"
                                 width="600" height="600"
                                 loading="lazy">
                        </div>
                        <div class="card-meta">
                            <span class="card-index">001</span>
                            <span class="card-name">Solar_Altar</span>
                            <span class="card-arrow">↗</span>
                        </div>
                    </article>

                    <article class="product-card"
                        data-index="PROJET_002"
                        data-name="TABLE_TERRAZZO"
                        data-type="TABLE BASSE + ÉTAGÈRE MODULAIRE"
                        data-mat="TERRAZZO + ACIER TUBULAIRE + RÉSINE"
                        data-year="2026"
                        data-status="STRUCTURAL_TEST"
                        data-desc="Collision du brutalisme et de la couleur Memphis. Le plateau en terrazzo fait à la main intègre des inclusions de marbre rose et bleu. Les colonnes cylindriques bicolores sont en acier peint au four."
                        data-specs="Table: L120 × P60 × H38cm&#10;Poids plateau: 28kg&#10;Pieds: acier Ø60mm&#10;Étagère: H180 × L80 × P35cm"
                        data-notes="Le terrazzo est réalisé dans l'atelier de Pantin. Chaque dalle est unique. L'étagère est assemblée à partir de tubes industriels récupérés et de panneaux laqués."
                        data-img="/assets/table-terrazzo.jpg"
                        aria-label="Ouvrir le détail de TABLE TERRAZZO">
                        <div class="card-img-wrap">
                            <img src="/assets/table-terrazzo.jpg"
                                 alt="TABLE TERRAZZO — Table basse terrazzo et étagère acier, REBOUR 2026"
                                 width="600" height="600"
                                 loading="lazy">
                        </div>
                        <div class="card-meta">
                            <span class="card-index">002</span>
                            <span class="card-name">TABLE_TERRAZZO</span>
                            <span class="card-arrow">↗</span>
                        </div>
                    </article>

                    <article class="product-card"
                        data-index="PROJET_003"
                        data-name="MODULE_SÉRIE"
                        data-type="LAMPES — SÉRIE LIMITÉE"
                        data-mat="BÉTON COLORÉ + DÔME LAQUÉ + NÉON"
                        data-year="2026"
                        data-status="FINAL_ASSEMBLY"
                        data-desc="Série de 7 lampes aux corps béton colorés, chacune avec un dôme d'une couleur différente. Les néons horizontaux créent un anneau lumineux entre le dôme et le corps."
                        data-specs="H: 35–65cm (7 tailles)&#10;Dôme: Ø15–28cm&#10;Anneau néon: 8W — 3000K&#10;Édition: 7 ex. par coloris"
                        data-notes="Les corps sont coulés en série mais peints individuellement. Les dômes sont réalisés par un souffleur de verre artisanal. Le câble tressé rouge est la signature de la série."
                        data-img="/assets/lampes-serie.jpg"
                        aria-label="Ouvrir le détail de MODULE SÉRIE">
                        <div class="card-img-wrap">
                            <img src="/assets/lampes-serie.jpg"
                                 alt="MODULE SÉRIE — Collection de 7 lampes béton colorées, REBOUR 2026"
                                 width="600" height="600"
                                 loading="lazy">
                        </div>
                        <div class="card-meta">
                            <span class="card-index">003</span>
                            <span class="card-name">MODULE_SÉRIE</span>
                            <span class="card-arrow">↗</span>
                        </div>
                    </article>

                </div>
            </section>

            <!-- NEWSLETTER -->
            <section class="newsletter" id="contact" aria-label="Accès anticipé">
                <div class="nl-left">
                    <p class="label">// ACCÈS_ANTICIPÉ</p>
                    <h2>REJOINDRE<br>L'EXPÉRIENCE</h2>
                </div>
                <div class="nl-right">
                    <form class="nl-form" onsubmit="event.preventDefault();" aria-label="Inscription newsletter">
                        <label for="nl-email">EMAIL :</label>
                        <div class="nl-row">
                            <input type="email" id="nl-email" name="email" placeholder="votre@email.com" autocomplete="email" required>
                            <button type="submit">ENVOYER →</button>
                        </div>
                        <p class="mono-sm"><span class="blink">■</span> CONNECTION_STATUS: PENDING</p>
                    </form>
                </div>
            </section>

        </main>

        <footer class="footer">
            <span>© 2026 REBOURS STUDIO — PARIS</span>
            <nav aria-label="Liens secondaires">
                <a href="https://instagram.com/rebour.studio" rel="noopener" target="_blank">INSTAGRAM</a>
                &nbsp;/&nbsp;
                <a href="mailto:contact@rebour.studio">CONTACT</a>
            </nav>
        </footer>

    </div>

    <div class="cursor-dot"></div>
    <div class="cursor-outline"></div>

    <script src="/main.js" is:inline></script>
</Base>