/* global React */
// Labels feature callout — Avery 5160 inventory tag printing
// Sits between HowItWorks and WhyDifferent.

const LABEL_DATA = [
  { lot: '001', title: 'AJ1 Lost & Found',     sku: 'DZ5485-612', size: '10' },
  { lot: '002', title: 'On Cloud 5 W/B',       sku: '3WD30280871', size: '7' },
  { lot: '003', title: 'AJ4 Black Cat',        sku: 'CU1110-010', size: '11' },
  { lot: '004', title: 'AJ1 Retro High OG',    sku: 'DZ5485-612', size: '9' },
  { lot: '005', title: 'Yeezy 350 Onyx',       sku: 'HQ4540',     size: '10.5' },
  { lot: '006', title: 'Dunk Low Panda',       sku: 'DD1391-100', size: '8' },
  { lot: '007', title: 'Samba OG W/B',         sku: 'B75806',     size: '9.5' },
  { lot: '008', title: 'AJ III Retro',         sku: '136064-105', size: '10' },
  { lot: '009', title: 'AJ 6 Rings',           sku: '322992-064', size: '12' },
  { lot: '010', title: 'AJ14 Black/Pwd Blue',  sku: '487471-004', size: '11' },
  { lot: '011', title: 'NB 1906R Black',       sku: 'M1906RB',    size: '9' },
  { lot: '012', title: 'Wales Bonner Samba',   sku: 'GY6602',     size: '10' },
  { lot: '013', title: 'Campus 00s Black',     sku: 'HQ8708',     size: '8.5' },
  { lot: '014', title: 'Cloudmonster 2',       sku: '3WD30280871', size: '11' },
  { lot: '015', title: 'AJ5 White Metallic',   sku: 'DA1911-100', size: '10' },
  { lot: '016', title: 'Bondi 8',              sku: '1123202BBLC', size: '9' },
  { lot: '017', title: 'AJ1 Mid Vol. 3',       sku: 'DQ8423-204', size: '10.5' },
  { lot: '018', title: 'Dunk Low Pure Plat.',  sku: 'CW1590-101', size: '11' },
  { lot: '019', title: 'AF1 \'07 Triple Wht',  sku: 'CW2288-111', size: '10' },
  { lot: '020', title: 'AJ4 Bred Reimagined',  sku: 'FV5029-006', size: '9.5' },
  { lot: '021', title: 'AJ1 Retro Low',        sku: 'DC0774-100', size: '8' },
  { lot: '022', title: 'NB 9060 Sea Salt',     sku: 'U9060ESS',   size: '10' },
  { lot: '023', title: 'AJ12 Cherry',          sku: 'CT8013-116', size: '11' },
  { lot: '024', title: 'AJ III Retro Spizike', sku: '136064-105', size: '9' },
  { lot: '025', title: 'AJ5 White Metallic',   sku: 'DA1911-100', size: '10.5' },
  { lot: '026', title: 'Yeezy Slide Bone',     sku: 'FZ5897',     size: '10' },
  { lot: '027', title: 'Dunk Low GS Panda',    sku: 'CW1590-100', size: '6.5Y' },
  { lot: '028', title: 'AJ4 Military Black',   sku: 'DH6927-111', size: '11' },
  { lot: '029', title: 'AJ1 Mid Patent Bred',  sku: '554724-066', size: '10' },
  { lot: '030', title: 'NB 550 White/Green',   sku: 'BB550WT1',   size: '9' },
];

const LabelTag = ({ lot, title, sku, size }) => (
  <div style={{
    background: 'oklch(0.99 0 0)',
    color: '#0a0a0a',
    padding: '8px 10px',
    borderRadius: 4,
    border: '1px dashed oklch(0.78 0 0)',
    fontFamily: 'var(--font-mono)',
    minHeight: 70,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    fontSize: 9,
    lineHeight: 1.25,
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6 }}>
      <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1 }}>
        #{lot}
      </span>
      <span style={{ fontSize: 8, color: '#666', letterSpacing: '0.06em', textTransform: 'uppercase', textAlign: 'right' }}>
        sz {size}
      </span>
    </div>
    <div>
      <div style={{
        fontSize: 9, fontWeight: 600,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{title}</div>
      <div style={{ fontSize: 7, color: '#666', letterSpacing: '0.04em', marginTop: 2 }}>{sku}</div>
    </div>
  </div>
);

const LabelSheet = () => (
  <div style={{
    position: 'relative',
    aspectRatio: '8.5 / 11',
    background: 'oklch(0.97 0 0)',
    borderRadius: 6,
    padding: '24px 18px',
    boxShadow: `
      0 1px 0 oklch(1 0 0 / 0.04),
      0 24px 48px -12px oklch(0 0 0 / 0.6),
      0 12px 24px -8px oklch(0 0 0 / 0.4)
    `,
    transform: 'perspective(1400px) rotateY(-8deg) rotateX(2deg) rotateZ(-1deg)',
    transformOrigin: 'center',
  }}>
    {/* Header strip — printed metadata, like a real Avery sheet */}
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--font-mono)', fontSize: 7, color: '#666',
      letterSpacing: '0.1em', textTransform: 'uppercase',
      paddingBottom: 8,
      borderBottom: '1px solid oklch(0.85 0 0)',
      marginBottom: 12,
    }}>
      <span>KicksScanner · Avery 5160</span>
      <span>Show prep · 30 of 30 · Lot #001 → #030</span>
      <span>Apr 28, 2026</span>
    </div>

    {/* Label grid — 3 cols × 10 rows, mirroring the real Avery 5160 layout */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 4,
    }}>
      {LABEL_DATA.map((l) => (
        <LabelTag key={l.lot} {...l} />
      ))}
    </div>

    {/* "Done printing" stamp overlay — ties it back to the show-prep moment */}
    <div style={{
      position: 'absolute',
      bottom: 28, right: 16,
      transform: 'rotate(-8deg)',
      padding: '6px 10px',
      border: '2px solid oklch(0.65 0.20 25)',
      color: 'oklch(0.55 0.20 25)',
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      background: 'oklch(1 0 0 / 0.85)',
      borderRadius: 3,
      fontWeight: 700,
      opacity: 0.85,
    }}>
      Ready to peel
    </div>
  </div>
);

const LabelsCallout = () => (
  <section style={{
    padding: '120px 0',
    borderTop: '1px solid var(--hairline)',
    background: 'var(--background)',
    position: 'relative',
    overflow: 'hidden',
  }}>
    {/* Subtle brand glow */}
    <div style={{
      position: 'absolute',
      top: '50%', right: '-10%',
      width: 600, height: 600,
      background: 'radial-gradient(circle, oklch(0.963 0.166 113.862 / 0.07), transparent 60%)',
      transform: 'translateY(-50%)',
      pointerEvents: 'none',
    }}></div>

    <div className="wrap" style={{ position: 'relative' }}>
      <div className="grid-2" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 80,
        alignItems: 'center',
      }}>
        {/* Copy side */}
        <div>
          <span className="section-label"><span className="dot"></span>Bonus · show prep</span>
          <h2 className="display" style={{
            fontSize: 'clamp(40px, 5vw, 64px)',
            margin: '20px 0 24px',
            maxWidth: '14ch',
          }}>
            Print the whole<br/>show on one<br/>
            <span className="display-italic" style={{ color: 'var(--brand)' }}>label sheet.</span>
          </h2>

          <p style={{
            color: 'var(--muted-fg)',
            fontSize: 18,
            lineHeight: 1.55,
            maxWidth: '40ch',
            margin: 0,
          }}>
            One click prints your full inventory as Avery 5160 labels — lot numbers,
            titles, SKUs, sizes. Stick one on every box before you go live, and your
            on-camera grab-and-show stops being a treasure hunt.
          </p>

          {/* Spec strip */}
          <div className="mono" style={{
            marginTop: 32,
            display: 'grid',
            gridTemplateColumns: 'auto 1fr',
            rowGap: 8,
            columnGap: 24,
            fontSize: 12,
            color: 'var(--muted-fg)',
            letterSpacing: '0.04em',
            maxWidth: 420,
          }}>
            <span style={{ color: 'var(--dim-fg)', textTransform: 'uppercase' }}>Format</span>
            <span>Avery 5160 · 30-up · 1" × 2⅝"</span>

            <span style={{ color: 'var(--dim-fg)', textTransform: 'uppercase' }}>Prints</span>
            <span>Lot # · title · SKU · size</span>

            <span style={{ color: 'var(--dim-fg)', textTransform: 'uppercase' }}>Output</span>
            <span>Browser print → adhesive sheet</span>

            <span style={{ color: 'var(--dim-fg)', textTransform: 'uppercase' }}>Time</span>
            <span style={{ color: 'var(--brand)' }}>~30 seconds for 30 pairs</span>
          </div>

          <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <span className="pill pill-dim">No subscription</span>
            <span className="pill pill-dim">No App Store</span>
            <span className="pill pill-dim">Just a print button</span>
          </div>
        </div>

        {/* Visual side — the printed sheet */}
        <div style={{
          position: 'relative',
          padding: '40px 20px',
        }}>
          {/* The "desk surface" backdrop */}
          <div style={{
            position: 'absolute',
            inset: '-20px -40px',
            background: 'linear-gradient(135deg, oklch(0.18 0 0), oklch(0.12 0 0))',
            borderRadius: 12,
            border: '1px solid var(--hairline)',
          }}></div>

          {/* Subtle scan-grid pattern on backdrop */}
          <div style={{
            position: 'absolute',
            inset: '-20px -40px',
            backgroundImage: `
              linear-gradient(oklch(1 0 0 / 0.02) 1px, transparent 1px),
              linear-gradient(90deg, oklch(1 0 0 / 0.02) 1px, transparent 1px)
            `,
            backgroundSize: '24px 24px',
            borderRadius: 12,
          }}></div>

          <div style={{ position: 'relative' }}>
            <LabelSheet />
          </div>

          {/* Floating "30 labels" badge */}
          <div className="mono" style={{
            position: 'absolute',
            top: 16, right: -8,
            background: 'oklch(0.18 0 0)',
            border: '1px solid var(--brand)',
            padding: '8px 12px',
            borderRadius: 6,
            fontSize: 10,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            color: 'var(--brand)',
            transform: 'rotate(3deg)',
            zIndex: 5,
            boxShadow: '0 4px 12px oklch(0 0 0 / 0.4)',
          }}>
            30 lots · 1 sheet
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 860px) {
        section .grid-2 { grid-template-columns: 1fr !important; gap: 48px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { LabelsCallout });