// Hero — bold, kid-loud, with notify-me + Dr. Hawley + sample roast card
function Hero({ onNotify, tweaks = {} }) {
  const { Icon, StickerStar, Tape } = window.RMS;
  const accent = tweaks.heroAccent || 'var(--flame)';
  const boldWord = tweaks.heroBoldWord || 'SNACK.';
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  async function submit(e) {
    e.preventDefault();
    if (!email || !email.includes('@')) return;
    setSubmitting(true);
    setError('');
    try {
      if (onNotify) await onNotify(email);
      setSent(true);
      setEmail('');
    } catch {
      setError('Could not join the list. Try hello@roastmysnack.com.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <section id="top" style={{ position: 'relative', paddingTop: 24 }}>
      <div className="wrap">

        {/* Top status row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          marginBottom: 28
        }}>
          <span className="chip dark">
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--mint)', display: 'inline-block', animation: 'pulse-dot 1.6s infinite' }} />
            TESTFLIGHT · INVITE-ONLY
          </span>
          <span className="chip">
            iPhone · iOS 17+
          </span>
          <span className="chip flame">
            Coming to App Store
          </span>
        </div>

        {/* Mega title */}
        <div style={{ position: 'relative' }}>
          <h1 className="title-mega" style={{ margin: 0 }}>
            SHOW ME<br />
            YOUR{' '}
            <span style={{
              display: 'inline-block',
              background: accent,
              border: '3px solid var(--ink)',
              borderRadius: 18,
              padding: '0 18px 4px',
              boxShadow: '6px 6px 0 var(--ink)',
              transform: 'rotate(-2deg)'
            }}>{boldWord}</span>
          </h1>

          {/* sticker */}
          <div style={{
            position: 'absolute', right: 0, top: 0,
            display: 'grid', placeItems: 'center'
          }}>
            <div style={{ transform: 'rotate(8deg)' }}>
              <StickerStar text="FRESH ROAST · DAILY ·" color="var(--mint)" size={130} />
            </div>
          </div>
        </div>

        {/* Hero body */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.15fr 1fr',
          gap: 36,
          marginTop: 36,
          alignItems: 'start'
        }} className="hero-grid">

          {/* Left column — copy + notify form */}
          <div>
            <p className="body" style={{ fontSize: 19, maxWidth: 520, lineHeight: 1.4 }}>
              Snap a snack. Get respectfully <em>destroyed</em> by Dr. Hawley, a crowned tooth in a green hoodie with very strong opinions about your candy stash. Leave with a better swap and a glow-up smile.
            </p>

            <form onSubmit={submit} style={{
              marginTop: 22,
              display: 'flex', gap: 10, flexWrap: 'wrap',
              maxWidth: 520
            }}>
              {!sent ?
              <>
                  <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@snackgang.com"
                  style={{
                    flex: 1, minWidth: 220,
                    fontFamily: 'var(--font-body)',
                    fontSize: 15, fontWeight: 600,
                    padding: '14px 16px',
                    border: '2px solid var(--ink)',
                    borderRadius: 14,
                    background: '#fff',
                    boxShadow: '4px 4px 0 var(--ink)',
                    outline: 'none'
                  }} />
                
                  <button type="submit" className="btn flame" disabled={submitting}>
                    {Icon.flame(16)} {submitting ? 'SENDING...' : 'NOTIFY ME'}
                  </button>
                </> :

              <div className="card" style={{
                padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 12,
                background: 'var(--mint)'
              }}>
                  <div style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: 'var(--ink)', color: 'var(--mint)',
                  display: 'grid', placeItems: 'center'
                }}>{Icon.check(16)}</div>
                  <div>
                    <div className="title-m" style={{ fontSize: 16 }}>YOU'RE ON THE LIST.</div>
                    <div className="body-sm">We'll DM your inbox when we hit the App Store.</div>
                  </div>
                </div>
              }
            </form>
            {error && (
              <div className="body-sm" style={{ color: 'var(--flame-deep)', marginTop: 10, fontWeight: 700 }}>
                {error}
              </div>
            )}

            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10, color: 'var(--mute)' }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em' }}>NO ACCOUNT · NO ADS · NO TRACKERS</span>
            </div>

            {/* feature row */}
            <div style={{
              marginTop: 36,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 14
            }} className="feature-row">
              {[
              { num: '01', label: 'SNAP', sub: 'your snack' },
              { num: '02', label: 'SCORE', sub: 'the smile threat' },
              { num: '03', label: 'ROAST', sub: '2-panel comic' }].
              map((f) =>
              <div key={f.num} className="card-flat" style={{ padding: 14, background: 'var(--paper-2)' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '0.18em' }}>{f.num}</div>
                  <div className="title-m" style={{ fontSize: 19, marginTop: 4 }}>{f.label}</div>
                  <div className="body-sm" style={{ color: 'var(--mute)' }}>{f.sub}</div>
                </div>
              )}
            </div>
          </div>

          {/* Right column — hero hawley card */}
          <HeroHawleyCard tweaks={tweaks} />
        </div>

      </div>

      {/* responsive grid */}
      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .feature-row { grid-template-columns: 1fr 1fr 1fr !important; }
        }
        @media (max-width: 720px) {
          .feature-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

function HeroHawleyCard({ tweaks = {} }) {
  const { Tape } = window.RMS;
  const offsetY = tweaks.hawleyOffsetY ?? -18;
  const maxWidthPct = tweaks.hawleyMaxWidthPct ?? 82;
  const stampText = tweaks.heroStampText || 'ROAST MODE';
  const bubbleText = tweaks.heroBubbleText || 'That gummy worm? Felony.';
  return (
    <div style={{ position: 'relative', minHeight: 540 }} className="hero-card-wrap">
      {/* halftone bg card */}
      <div className="halftone-orange" style={{
        position: 'absolute', inset: 0,
        border: '2.5px solid var(--ink)',
        borderRadius: 28,
        boxShadow: '8px 8px 0 var(--ink)',
        overflow: 'hidden'
      }}>
        {/* corner stamp */}
        <div style={{ position: 'absolute', top: 16, left: 16 }}>
          <span className="stamp" style={{ color: 'var(--ink)' }}>
            {window.RMS.Icon.flame(12)} {stampText}
          </span>
        </div>
        <div style={{ position: 'absolute', top: 16, right: 16 }}>
          <Tape rotate={3} color="var(--paper)">ISSUE #077</Tape>
        </div>

        {/* big mascot — vertically centered between top stamps and bottom caption strip */}
        <img src="images/Main_App_Hero.png" alt="Dr. Hawley DDS" style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: `translate(-50%, calc(-50% + ${offsetY}px))`,
          maxWidth: maxWidthPct + '%',
          maxHeight: 'calc(100% - 120px)',
          width: 'auto', height: 'auto',
          objectFit: 'contain'
        }} />

        {/* shout starburst — classic comic "FELONY!" energy */}
        <ShoutBubble text={bubbleText} />

        {/* bottom caption strip */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          background: 'var(--ink)', color: 'var(--paper)',
          padding: '14px 22px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase'
        }}>
          <span>DR. HAWLEY DDS</span>
          <span style={{ color: 'var(--flame)' }}>· SMILE PATROL ·</span>
          <span>EST. 2026</span>
        </div>
      </div>
      <style>{`
        .hero-card-wrap { aspect-ratio: 5/6; }
        @media (max-width: 880px) { .hero-card-wrap { aspect-ratio: 4/5; min-height: 480px; } }
      `}</style>
    </div>);

}

window.RMS.Hero = Hero;

// ShoutBubble — jagged starburst comic bubble that frames a punchline.
// Positioned upper-right of hero card, rotated, with a sharp tail pointing toward the mascot's head.
function ShoutBubble({ text = '' }) {
  // Split into pieces if it has a "?" or "." midline — first line normal weight, payoff line emphasized
  const parts = text.split(/(?<=[?!.])\s+/).filter(Boolean);
  const setup = parts[0] || text;
  const payoff = parts.slice(1).join(' ');

  return (
    <div style={{
      position: 'absolute',
      top: '8%',
      right: '-2%',
      width: 'min(240px, 46%)',
      aspectRatio: '1 / 0.85',
      zIndex: 4,
      transform: 'rotate(8deg)',
      animation: 'shout-wobble 4.6s ease-in-out infinite'
    }}>
      {/* Starburst SVG */}
      <svg viewBox="0 0 200 170" width="100%" height="100%" style={{ position: 'absolute', inset: 0, filter: 'drop-shadow(4px 4px 0 var(--ink))' }}>
        {/* spiky burst — 12 alternating points */}
        <path
          d="M100,4 L116,28 L144,12 L142,46 L182,38 L162,68 L196,82 L162,98 L188,128 L150,124 L156,158 L122,140 L106,166 L88,138 L60,164 L52,130 L18,138 L36,108 L4,90 L34,72 L8,42 L42,46 L34,12 L70,30 Z"
          fill="#fff"
          stroke="var(--ink)"
          strokeWidth="3.5"
          strokeLinejoin="miter" />
        
        {/* inner echo for depth */}
        <path
          d="M100,18 L112,38 L134,26 L132,54 L166,46 L150,70 L178,82 L150,94 L172,118 L142,116 L146,144 L120,130 L106,150 L92,128 L70,148 L62,122 L34,128 L48,104 L22,90 L46,74 L26,52 L52,54 L46,28 L72,42 Z"
          fill="none"
          stroke="rgba(14,14,16,0.12)"
          strokeWidth="1.5"
          strokeDasharray="3 3" />
        
      </svg>

      {/* Text */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: '18% 16%',
        textAlign: 'center',
        transform: 'rotate(-3deg)'
      }}>
        <div style={{
          fontFamily: 'var(--font-display)',
          color: 'var(--ink)',
          lineHeight: 1,
          letterSpacing: '0.01em',
          fontSize: 'clamp(11px, 1.2vw, 15px)',
          textTransform: 'uppercase',
        }}>{setup}</div>
        {payoff &&
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(20px, 2.4vw, 30px)',
          color: 'var(--hot)',
          lineHeight: 0.95,
          letterSpacing: '-0.01em',
          marginTop: 4,
          textShadow: '2px 2px 0 var(--ink)',
          transform: 'rotate(-2deg)',
          textTransform: 'uppercase'
        }}>{payoff.replace(/["".]+$/g, '').toUpperCase()}!</div>
        }
      </div>
    </div>);

}

window.RMS.ShoutBubble = ShoutBubble;