/* @jsx React.createElement */
const { useState } = React;

// ============ Top nav ============
function Nav({ active, onNav }) {
  const items = ['Latest', 'Archive', 'About'];
  return (
    <nav style={{ borderBottom: '1px solid var(--af-ink-15)', background: 'var(--af-paper)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNav('Latest'); }} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="../../assets/logo/arlington-flip-wordmark.svg" alt="Arlington Flip" style={{ height: 44, width: 'auto' }} />
        </a>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {items.map((it) => (
            <a key={it} href="#" onClick={(e) => { e.preventDefault(); onNav(it); }}
               style={{ fontSize: 14, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
                        color: active === it ? 'var(--af-ink)' : 'var(--af-ink-50)',
                        textDecoration: active === it ? 'underline' : 'none',
                        textUnderlineOffset: 6, textDecorationThickness: 2 }}>{it}</a>
          ))}
          <button style={{ fontFamily: 'var(--af-font-body)', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em',
                  textTransform: 'uppercase', padding: '10px 16px', background: 'var(--af-ink)', color: 'var(--af-paper)',
                  border: 'none', borderRadius: 6, cursor: 'pointer', whiteSpace: 'nowrap' }}
                  onClick={() => onNav('Subscribe')}>Subscribe Free</button>
        </div>
      </div>
    </nav>
  );
}

// ============ Hero ============
function Hero({ onSubscribe }) {
  return (
    <section style={{ background: 'var(--af-paper)', padding: '96px 32px 80px', borderBottom: '4px solid var(--af-ink)' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'left' }}>
        <span className="af-eyebrow af-eyebrow--flip">A monthly newsletter · Arlington, VA</span>
        <h1 style={{ fontFamily: 'var(--af-font-display)', fontSize: 96, lineHeight: 0.92, textTransform: 'uppercase',
                     letterSpacing: '-0.015em', margin: '14px 0 24px' }}>
          Local mat<br/>talk, monthly.
        </h1>
        <p style={{ fontSize: 22, lineHeight: 1.45, color: 'var(--af-ink-70)', maxWidth: 620, margin: '0 0 32px',
                    fontFamily: 'var(--af-font-serif)', fontStyle: 'italic' }}>
          The rotation rundown, the coach moves, the calendar — for parents in the Arlington gymnastics scene who'd rather not miss anything.
        </p>
        <button onClick={onSubscribe} style={{ fontFamily: 'var(--af-font-body)', fontWeight: 700, fontSize: 15,
                letterSpacing: '0.04em', textTransform: 'uppercase', padding: '16px 28px',
                background: 'var(--af-flip)', color: 'var(--af-ink)', border: '1px solid var(--af-ink)',
                borderRadius: 6, cursor: 'pointer', boxShadow: 'var(--af-shadow-stamp)', whiteSpace: 'nowrap' }}>
          Subscribe Free →
        </button>
        <span style={{ fontSize: 14, color: 'var(--af-ink-50)', marginLeft: 18 }}>One email a month. Unsubscribe in one click.</span>
      </div>
    </section>
  );
}

// ============ Issue grid ============
function IssueGrid({ issues, onOpen }) {
  return (
    <section style={{ padding: '72px 32px', background: 'var(--af-paper)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
          <div>
            <span className="af-eyebrow">The archive</span>
            <h2 style={{ fontFamily: 'var(--af-font-display)', fontSize: 48, textTransform: 'uppercase', letterSpacing: '-0.01em', margin: '6px 0 0', lineHeight: 1 }}>
              Recent issues.
            </h2>
          </div>
          <a href="#" style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>See all →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {issues.map((iss) => (
            <article key={iss.num} onClick={() => onOpen(iss)}
                     style={{ background: 'var(--af-paper-soft)', border: '1px solid var(--af-ink)',
                              borderRadius: 8, padding: 24, cursor: 'pointer',
                              transition: 'transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms cubic-bezier(.2,.7,.2,1)' }}
                     onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--af-shadow-stamp-lg)'; e.currentTarget.style.transform = 'translate(-3px, -3px)'; }}
                     onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <span className="af-tab">Issue {iss.num}</span>
                <span style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--af-ink-50)' }}>{iss.date}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--af-font-display)', fontSize: 26, lineHeight: 1.05, textTransform: 'uppercase', letterSpacing: '-0.01em', margin: '0 0 12px' }}>
                {iss.title}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--af-ink-70)', margin: 0 }}>{iss.dek}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Inline subscribe ============
function InlineSubscribe({ done, setDone }) {
  const [email, setEmail] = useState('');
  return (
    <section style={{ background: 'var(--af-ink)', color: 'var(--af-paper)', padding: '80px 32px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <span className="af-eyebrow" style={{ color: 'var(--af-flip)' }}>The TLDR</span>
        <h2 style={{ fontFamily: 'var(--af-font-display)', fontSize: 56, textTransform: 'uppercase', letterSpacing: '-0.015em', lineHeight: 0.95, margin: '12px 0 18px' }}>
          One email a month.<br/>That's the whole pitch.
        </h2>
        <p style={{ fontSize: 18, color: 'var(--af-ink-30)', margin: '0 0 32px', lineHeight: 1.5 }}>
          The rotation rundown, the mat talk, the calendar. No spam, no fluff, no autoplay videos.
        </p>
        {done ? (
          <div style={{ fontSize: 18, color: 'var(--af-flip)' }}>✓ You're on the list. See you next month.</div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}
                style={{ display: 'flex', gap: 8, maxWidth: 520, margin: '0 auto', flexWrap: 'wrap' }}>
            <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@inbox.com"
                   style={{ flex: 1, minWidth: 220, padding: '14px 16px', fontSize: 16, fontFamily: 'var(--af-font-body)',
                            background: 'var(--af-paper)', color: 'var(--af-ink)', border: '1px solid var(--af-paper)',
                            borderRadius: 6, outline: 'none' }} />
            <button type="submit" style={{ padding: '14px 24px', fontFamily: 'var(--af-font-body)', fontWeight: 700,
                    fontSize: 14, letterSpacing: '0.04em', textTransform: 'uppercase',
                    background: 'var(--af-flip)', color: 'var(--af-ink)', border: 'none', borderRadius: 6, cursor: 'pointer' }}>
              Subscribe Free
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

// ============ Footer ============
function SiteFooter() {
  return (
    <footer style={{ background: 'var(--af-paper-warm)', padding: '40px 32px', borderTop: '1px solid var(--af-ink-15)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: 'var(--af-font-display)', textTransform: 'uppercase', fontSize: 22, letterSpacing: '-0.01em' }}>Arlington Flip</div>
          <div style={{ fontSize: 13, color: 'var(--af-ink-70)', marginTop: 4 }}>Local mat talk · Arlington, VA · © 2026</div>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', display: 'flex', gap: 22 }}>
          <a href="#">Archive</a><a href="#">About</a><a href="#">Tip us</a><a href="#">Instagram</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, IssueGrid, InlineSubscribe, SiteFooter });