import type { Metadata } from 'next'
import SuccessClient from './SuccessClient'

export const metadata: Metadata = {
  title: 'REBOURS — COMMANDE CONFIRMÉE',
  description: 'Votre commande REBOURS Studio a été confirmée.',
  robots: { index: false, follow: false },
  alternates: { canonical: '/success' },
}

export default function SuccessPage() {
  return (
    <>
      <style>{`
        main.success-main {
          flex-grow: 1;
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .success-main .left {
          border-right: var(--border);
          padding: 5rem 2rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          gap: 2rem;
          position: relative;
          overflow: hidden;
        }
        .success-main .left::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.25);
          pointer-events: none;
        }
        .success-main .slabel { font-size: 0.75rem; color: #888; }
        .success-main h1 {
          font-size: clamp(2.5rem, 5vw, 4.5rem);
          font-weight: 700;
          line-height: 0.95;
          letter-spacing: -0.02em;
        }
        .success-main .status-line { font-size: 0.82rem; line-height: 1.8; color: #555; }
        .success-main .right {
          padding: 5rem 2rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          gap: 1.5rem;
        }
        .success-main .info-row {
          display: flex;
          gap: 1.5rem;
          padding: 0.6rem 0;
          border-bottom: 1px solid rgba(0,0,0,0.1);
          font-size: 0.8rem;
          align-items: baseline;
        }
        .success-main .info-key { color: #888; width: 8rem; flex-shrink: 0; font-size: 0.72rem; }
        .success-main a.back {
          display: inline-block;
          border: var(--border);
          padding: 0.9rem 1.5rem;
          font-family: var(--font-mono);
          font-size: 0.78rem;
          font-weight: 700;
          text-decoration: none;
          color: var(--clr-black);
          transition: background 0.15s, color 0.15s;
          align-self: flex-start;
          margin-top: 1rem;
          cursor: none;
        }
        .success-main a.back:hover { background: var(--clr-black); color: var(--clr-white); }
        .success-main #receipt-btn:hover { background: var(--clr-red) !important; color: var(--clr-black) !important; border-color: var(--clr-red) !important; }
        .success-main #loading { color: #888; font-size: 0.78rem; }
        @media (max-width: 600px) {
          main.success-main { grid-template-columns: 1fr; }
          .success-main .left {
            padding: 2rem 1.5rem;
            min-height: 40vw;
            border-right: none;
            border-bottom: var(--border);
          }
          .success-main h1 { font-size: clamp(2rem, 12vw, 3rem); }
          .success-main .right { padding: 2rem 1.5rem; justify-content: flex-start; }
          .success-main a.back { align-self: stretch; text-align: center; }
        }
      `}</style>

      <div id="interactive-grid" className="interactive-grid"></div>

      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', position: 'relative', zIndex: 1 }}>
        <header className="header">
          <a href="/" className="logo-text">REBOURS</a>
          <span style={{ fontSize: '0.78rem', color: '#888' }}>COLLECTION_001</span>
        </header>

        <main className="success-main">
          <div className="left">
            <p className="slabel" style={{ position: 'relative' }}>// COMMANDE_CONFIRMÉE</p>
            <h1 style={{ position: 'relative' }}>
              MERCI<br />POUR<br />VOTRE<br />COMMANDE
            </h1>
            <p className="status-line" id="loading" style={{ position: 'relative' }}>Vérification du paiement...</p>
          </div>
          <div className="right">
            <p className="slabel">// RÉCAPITULATIF</p>
            <hr />
            <div id="order-details" style={{ display: 'none', flexDirection: 'column', gap: 0 }}>
              <div className="info-row"><span className="info-key">PRODUIT</span><span id="product-display">—</span></div>
              <div className="info-row"><span className="info-key">COLLECTION</span><span>001 — ÉDITION UNIQUE</span></div>
              <div className="info-row"><span className="info-key">MONTANT</span><span id="amount-display"></span></div>
              <div className="info-row"><span className="info-key">EMAIL</span><span id="email-display"></span></div>
              <div className="info-row"><span className="info-key">DÉLAI</span><span>6 À 8 SEMAINES</span></div>
              <div className="info-row"><span className="info-key">STATUS</span><span style={{ color: 'var(--clr-red)', fontWeight: 700 }}>CONFIRMÉ ■</span></div>
            </div>
            <p style={{ fontSize: '0.78rem', lineHeight: 1.8, color: '#555', marginTop: '1rem' }}>
              Un email de confirmation vous sera envoyé.<br />
              Votre pièce est fabriquée à la main à Paris.
            </p>
            <div style={{ display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
              <a href="/" className="back">← RETOUR</a>
              <a
                id="receipt-btn"
                href="#"
                target="_blank"
                rel="noopener"
                className="back"
                style={{ display: 'none', background: 'var(--clr-black)', color: '#e8a800', borderColor: 'var(--clr-black)' }}
              >
                ↓ FACTURE PDF
              </a>
            </div>
          </div>
        </main>

        <footer className="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@rebours.studio">CONTACT</a>
          </nav>
        </footer>
      </div>

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

      <SuccessClient />
    </>
  )
}
