/* global React, Icon, Logomark */
// Hero section with phone-scan visual + email CTA

const HeroPhone = () => (
  <div className="phone" aria-label="Phone scanning a sneaker">
    <div className="phone-screen">
      <div className="phone-notch"></div>

      {/* App chrome inside phone */}
      <div style={{
        position: 'absolute', top: 56, left: 0, right: 0,
        padding: '0 20px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 4,
      }}>
        <span className="mono upper" style={{ fontSize: 10, color: 'var(--muted-fg)' }}>
          Lot 047 · Pair 23/80
        </span>
        <span className="pill pill-success" style={{ fontSize: 10, padding: '3px 8px' }}>● Live</span>
      </div>

      {/* Faux shoe silhouette behind scan frame */}
      <div style={{
        position: 'absolute', inset: '70px 14px 170px 14px', zIndex: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'radial-gradient(ellipse at 50% 60%, oklch(0.32 0 0) 0%, oklch(0.12 0 0) 75%)',
        borderRadius: 6,
        overflow: 'hidden',
      }}>
        <img src="assets/aj1-lost-found.jpeg" alt=""
             style={{
               width: '92%', height: 'auto',
               objectFit: 'contain',
               filter: 'contrast(1.05) saturate(1.05)',
               mixBlendMode: 'normal',
             }} />
      </div>

      {/* Scan frame with corners + sweeping line */}
      <div className="scan-frame">
        <span className="c1"></span>
        <span className="c2"></span>
        <div className="scan-line"></div>
      </div>

      {/* Bottom result panel */}
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 20,
        background: 'oklch(0.18 0 0 / 0.95)',
        backdropFilter: 'blur(8px)',
        border: '1px solid oklch(1 0 0 / 0.12)',
        borderRadius: 12,
        padding: 14,
        zIndex: 6,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--brand)', letterSpacing: '0.06em' }}>
              DZ5485-612 · SIZE 10.5
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
              Air Jordan 1 Retro High OG<br/>
              <span style={{ color: 'var(--muted-fg)', fontWeight: 400 }}>"Lost & Found" (2022)</span>
            </div>
          </div>
          <span className="pill pill-success" style={{ fontSize: 9 }}>98% match</span>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 12, paddingTop: 12, borderTop: '1px solid oklch(1 0 0 / 0.08)',
        }}>
          <div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--dim-fg)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              Low comp
            </div>
            <div className="mono" style={{ fontSize: 18, color: 'var(--brand)', marginTop: 2 }}>
              $385
            </div>
          </div>
          <button style={{
            background: 'var(--brand)', color: '#111',
            border: 0, borderRadius: 6,
            padding: '8px 14px',
            fontSize: 12, fontWeight: 500,
            fontFamily: 'inherit',
          }}>Add to lot →</button>
        </div>
      </div>
    </div>
  </div>
);

const Hero = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitted(true);
    try {
      await fetch('/api/request-access', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, source: 'hero' }),
      });
    } catch (err) {
      console.error('signup failed', err);
    }
  };

  return (
    <section id="top" style={{
      position: 'relative',
      paddingTop: 56,
      paddingBottom: 40,
      overflow: 'hidden',
    }}>
      {/* Subtle grid backdrop */}
      <div className="bg-grid" style={{
        position: 'absolute', inset: 0,
        opacity: 0.4,
        maskImage: 'radial-gradient(ellipse at 60% 40%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 60% 40%, black 30%, transparent 75%)',
      }}></div>

      <div className="wrap" style={{ position: 'relative' }}>
        {/* Top metadata strip */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingBottom: 32,
          borderBottom: '1px solid var(--hairline)',
          marginBottom: 56,
        }}>
          <span className="section-label">
            <span className="dot"></span>
            v0.4 — Whatnot Beta · Closed access
          </span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted-fg)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            <span style={{ color: 'var(--brand)' }}>●</span> 50+ brands
            <span style={{ margin: '0 12px', color: 'var(--dim-fg)' }}>/</span>
            Live StockX + GOAT
          </span>
        </div>

        {/* Headline grid */}
        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 380px',
          gap: 56,
          alignItems: 'center',
        }}>
          <div>
            <h1 className="display" style={{
              fontSize: 'clamp(48px, 7vw, 96px)',
              margin: 0,
              maxWidth: '14ch',
            }}>
              Turn 80 pairs<br/>
              into a Whatnot CSV<br/>
              in <span className="hl">minutes</span>,<br/>
              not hours.
            </h1>

            <p style={{
              marginTop: 32,
              fontSize: 19,
              lineHeight: 1.5,
              color: 'var(--muted-fg)',
              maxWidth: '52ch',
              letterSpacing: '-0.005em',
            }}>
              Scan inventory with your phone. KickScanner identifies every shoe,
              pulls live StockX + GOAT pricing, and exports a bulk-upload CSV with
              photos, titles, descriptions, and sell scripts.
            </p>

            {/* Inline email form */}
            <form onSubmit={submit} style={{ marginTop: 32, maxWidth: 520 }}>
              <div style={{ display: 'flex', gap: 8 }}>
                <input
                  type="email"
                  className="input"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={submitted}
                  required
                />
                <button type="submit" className="btn btn-primary btn-lg" disabled={submitted}>
                  {submitted ? <>On the list <Icon name="check" size={16}/></> : <>Request access <Icon name="arrow-right" size={16}/></>}
                </button>
              </div>
              <div style={{
                display: 'flex', gap: 16, marginTop: 14,
                fontSize: 13, color: 'var(--muted-fg)',
              }}>
                <a href="#how" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--brand)' }}>
                  See how it works <Icon name="arrow-down" size={14}/>
                </a>
                <span style={{ color: 'var(--dim-fg)' }}>·</span>
                <span>No app install. Browser-based.</span>
              </div>
            </form>
          </div>

          {/* Phone visual */}
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            {/* Floating mono callout */}
            <div className="mono" style={{
              position: 'absolute',
              top: 24, left: -40,
              fontSize: 11,
              color: 'var(--muted-fg)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              display: 'flex', alignItems: 'center', gap: 8,
              zIndex: 10,
            }}>
              <span style={{
                width: 32, height: 1, background: 'var(--brand)',
              }}></span>
              Scan → ID → Price
            </div>
            <div className="mono" style={{
              position: 'absolute',
              bottom: 60, right: -50,
              fontSize: 11,
              color: 'var(--muted-fg)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              display: 'flex', alignItems: 'center', gap: 8,
              zIndex: 10,
            }}>
              0.8s avg
              <span style={{ width: 32, height: 1, background: 'var(--brand)' }}></span>
            </div>
            <HeroPhone />
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });