// AppPage.jsx
const AppPage = () => {
  useReveal();
  return (
    <>
      <PageHero eyebrow="Utility Belt" title={<>Sausage <span style={{ color: 'var(--wbbq-slime)' }}>Calculator.</span></>} subtitle="The app we built because spreadsheets don't belong in a smokehouse." mascot="robot-cat-fish.svg" />
      <section className="section">
        <div className="wrap">
          <div className="split-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 300px', gap: 60, alignItems: 'center' }}>
            <div>
              <h2 className="section-title" style={{ fontSize: 'clamp(2rem, 4.5vw, 3.2rem)' }}>Grind it. Mix it.<br/><span className="slime">Do the math.</span></h2>
              <div className="dashed-rule" />
              <p style={{ color: 'var(--fg2)', fontSize: 17, maxWidth: 520 }}>
                Punch in your meats, fats, cure, seasoning ratios. Get exact weights.
                Save your recipes. Share them. Cook better sausage. Stop doing
                algebra on a greasy notecard.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, display: 'grid', gap: 10, color: 'var(--fg1)' }}>
                {[
                  'Scaleable recipes — 5 lb to 50 lb',
                  'Cure math (pink salt) without the fear',
                  'Fat-to-lean ratio enforcer',
                  'Offline. Works next to the grinder.',
                  'Free to use. Ad free. Not sketchy.',
                ].map((f, i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ color: 'var(--wbbq-slime)', fontFamily: 'var(--font-display)', fontSize: 20 }}>◉</span> {f}
                  </li>
                ))}
              </ul>
              <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
                <a href="https://apps.apple.com/us/app/sausage-calculator/id6752734430" target="_blank" rel="noreferrer">
                  <img src={`${window.ASSETS}badges/app-store-badge.svg`} alt="Download on the App Store" style={{ height: 56 }} />
                </a>
                <a href="https://sausagecalculator.warpedbbq.com" target="_blank" rel="noreferrer" className="btn btn-slime">Use On Web →</a>
              </div>
            </div>
            {/* Fake phone */}
            <div style={{ position: 'relative', margin: '0 auto' }}>
              <div style={{
                width: 280, height: 560, background: 'var(--wbbq-black)',
                border: '8px solid var(--wbbq-ash)', borderRadius: 36,
                padding: 14, boxShadow: '12px 12px 0 var(--wbbq-slime), 0 0 60px rgba(181,238,28,0.2)',
                position: 'relative',
              }}>
                <div style={{ background: 'var(--wbbq-ink)', height: '100%', borderRadius: 22, padding: 18, overflow: 'hidden', position: 'relative' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--wbbq-slime)', letterSpacing: '0.06em' }}>SAUSAGE<br/>CALC.</div>
                  <div style={{ marginTop: 16, fontSize: 10, color: 'var(--fg3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Batch</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 28, color: 'var(--wbbq-bone)', marginTop: 4 }}>10.0 lb</div>
                  <div style={{ marginTop: 20, display: 'grid', gap: 8 }}>
                    {[['Pork Shoulder', '6.50 lb', 'var(--wbbq-flame)'], ['Pork Fatback', '2.50 lb', 'var(--wbbq-flame-hot)'], ['Ice Water', '1.00 lb', 'var(--wbbq-blue)'], ['Kosher Salt', '80.0 g', 'var(--wbbq-slime)'], ['Pink Salt', '11.3 g', 'var(--wbbq-pig)'], ['Pepper', '24.0 g', 'var(--fg2)']].map(([k, v, c]) => (
                      <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '8px 10px', background: 'var(--wbbq-black)', border: `1px solid var(--border)`, borderLeft: `3px solid ${c}` }}>
                        <span style={{ color: 'var(--fg1)' }}>{k}</span>
                        <span style={{ color: c, fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{v}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop: 18, padding: '10px 12px', background: 'var(--wbbq-slime)', color: 'var(--wbbq-black)', fontFamily: 'var(--font-display)', fontSize: 12, textAlign: 'center', letterSpacing: '0.1em' }}>GRIND IT →</div>
                </div>
              </div>
              <img src={`${window.ASSETS}mascots/flame.svg`} alt="" style={{ position: 'absolute', top: -40, right: -50, height: 100, animation: 'flicker 5s linear infinite' }} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
};
window.AppPage = AppPage;

// ---------- ContactPage.jsx ----------
const ContactPage = () => {
  useReveal();
  const [form, setForm] = useState({ name: '', email: '', kind: 'GENERAL', msg: '' });
  const [sent, setSent] = useState(false);
  const set = (k, v) => setForm({ ...form, [k]: v });
  return (
    <>
      <PageHero eyebrow="Send A Signal" title={<>Say <span style={{ color: 'var(--wbbq-flame)' }}>Hi.</span></>} subtitle="Or book us. Or just tell us about your grandma's brisket. We read all of it." mascot="ufo.svg" />
      <section className="section">
        <div className="wrap split-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 60 }}>
          <div>
            {sent ? (
              <div className="zine-card reveal" style={{ padding: 40 }}>
                <div className="eyebrow" style={{ color: 'var(--wbbq-slime)' }}>◉ TRANSMISSION RECEIVED</div>
                <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--wbbq-bone)', margin: '14px 0', letterSpacing: '0.02em' }}>We got it.</h2>
                <p style={{ color: 'var(--fg2)' }}>We reply when the pit's down. Usually 1-2 days. If it's urgent, DM us on Instagram.</p>
                <button onClick={() => { setSent(false); setForm({ name: '', email: '', kind: 'GENERAL', msg: '' }); }} className="btn btn-ghost" style={{ marginTop: 20 }}>Send Another →</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="reveal" style={{ display: 'grid', gap: 20 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg2)', fontWeight: 800, marginBottom: 6 }}>What's this about?</label>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {['GENERAL', 'BOOKING', 'MERCH', 'PRESS'].map(k => (
                      <button type="button" key={k} onClick={() => set('kind', k)} style={{
                        padding: '10px 16px',
                        background: form.kind === k ? 'var(--wbbq-flame)' : 'transparent',
                        color: form.kind === k ? 'var(--wbbq-black)' : 'var(--fg1)',
                        border: '2px solid ' + (form.kind === k ? 'var(--wbbq-flame)' : 'var(--border)'),
                        fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase',
                        cursor: 'pointer',
                      }}>{k}</button>
                    ))}
                  </div>
                </div>
                <InputField label="Your Name" value={form.name} onChange={(v) => set('name', v)} placeholder="Adam's Evil Twin" />
                <InputField label="Email" value={form.email} onChange={(v) => set('email', v)} placeholder="you@pit.gov" type="email" />
                <div>
                  <label style={{ display: 'block', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg2)', fontWeight: 800, marginBottom: 6 }}>Message</label>
                  <textarea required rows={6} value={form.msg} onChange={(e) => set('msg', e.target.value)} placeholder="Tell us the thing." style={{
                    width: '100%', padding: '14px 16px',
                    background: 'var(--wbbq-ink)', border: '2px solid var(--border)',
                    color: 'var(--fg1)', fontFamily: 'var(--font-body)', fontSize: 15,
                    resize: 'vertical',
                  }} />
                </div>
                <button type="submit" className="btn btn-primary" style={{ justifySelf: 'start' }}>Send It →</button>
              </form>
            )}
          </div>
          <aside className="contact-aside" style={{ display: 'grid', gap: 20, alignContent: 'start' }}>
            <div className="poster-card">
              <div className="eyebrow" style={{ color: 'var(--wbbq-blue)' }}>FIND US FASTER</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--wbbq-bone)', marginTop: 10, letterSpacing: '0.02em' }}>Instagram.</div>
              <p style={{ color: 'var(--fg2)', fontSize: 14, marginTop: 8 }}>DMs open. Fastest way to reach us.</p>
              <a href="https://instagram.com/warpedbbq" target="_blank" rel="noreferrer" className="btn btn-primary" style={{ marginTop: 12, fontSize: 12, padding: '10px 16px' }}>@warpedbbq ↗</a>
            </div>
            <div className="poster-card" style={{ borderColor: 'var(--wbbq-slime)', textAlign: 'center' }}>
              <div className="eyebrow" style={{ color: 'var(--wbbq-slime)' }}>SCAN ME</div>
              <div style={{
                margin: '16px auto', width: 160, height: 160,
                background: `
                  linear-gradient(var(--wbbq-bone), var(--wbbq-bone)) 0 0/100% 100% no-repeat,
                  repeating-conic-gradient(var(--wbbq-black) 0 25%, var(--wbbq-bone) 0 50%) 50% 50%/32px 32px
                `,
                border: '8px solid var(--wbbq-bone)',
                position: 'relative',
              }}>
                <div style={{ position: 'absolute', inset: 30, background: 'var(--wbbq-bone)', border: '6px solid var(--wbbq-black)' }}>
                  <img src={`${window.ASSETS}mascots/pig.svg`} alt="" style={{ position: 'absolute', inset: 4, objectFit: 'contain', width: 'calc(100% - 8px)', height: 'calc(100% - 8px)' }} />
                </div>
              </div>
              <div style={{ fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg2)' }}>POINT YOUR PHONE HERE.<br/>GET THE LINKS.</div>
            </div>
            <div className="poster-card" style={{ borderColor: 'var(--wbbq-flame)' }}>
              <div className="eyebrow">BASED IN</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--wbbq-bone)', marginTop: 10, letterSpacing: '0.02em', lineHeight: 1.1 }}>Eastern<br/>Connecticut.</div>
              <p style={{ color: 'var(--fg3)', fontSize: 13, marginTop: 8, fontFamily: 'var(--font-mono)' }}>41.57°N · 72.10°W</p>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
};

const InputField = ({ label, value, onChange, placeholder, type = 'text' }) => (
  <div>
    <label style={{ display: 'block', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg2)', fontWeight: 800, marginBottom: 6 }}>{label}</label>
    <input required type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{
      width: '100%', padding: '14px 16px',
      background: 'var(--wbbq-ink)', border: '2px solid var(--border)',
      color: 'var(--fg1)', fontFamily: 'var(--font-body)', fontSize: 15,
    }} />
  </div>
);

window.ContactPage = ContactPage;