// About, Ingredients/Science, Journal, Contact

function AboutPage({ vp, goto }) {
  const isMobile = vp === 'mobile';
  return (
    <div>
      {/* HERO */}
      <section className="container" style={{ padding: isMobile ? '32px 20px 48px' : '80px 48px 96px' }}>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 24 }}>Our story · est. 1962</div>
        <h1 className="h-display" style={{ fontSize: isMobile ? 36 : 'clamp(48px, 6vw, 88px)', maxWidth: 1100, marginBottom: 32 }}>
          Three generations,<br/>one fire, no shortcuts.
        </h1>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 48, marginTop: 48 }}>
          <p style={{ fontSize: isMobile ? 18 : 22, lineHeight: 1.5, color: 'var(--ink-2)', textWrap: 'pretty' }}>
            In 1962, our grandfather <span className="serif" style={{ fontStyle: 'italic' }}>N. K. Achuthan</span> started cooking chyawanprash for his village in Kasaragod because the nearest pharmacy was a four-hour bus ride.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', textWrap: 'pretty' }}>
            Sixty-two years later, three vaidyas, two daughters, four grandchildren and an inconveniently slow wood fire later — we still cook the same recipe in the same kitchen, just for considerably more people. We have resisted every shortcut, every plant expansion, every offer to "modernize". This is the result.
          </p>
        </div>
      </section>

      {/* HERO IMAGE */}
      <div className="container" style={{ padding: isMobile ? '0 20px' : '0 48px' }}>
        <img src={window.imgSrc('generations.png')} alt="NK Herbal generations" style={{ width: '100%', aspectRatio: isMobile ? '4/5' : '16/9', objectFit: 'cover', borderRadius: 12, display: 'block' }}/>
      </div>

      {/* TIMELINE */}
      <section className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
        <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 48 }}>Sixty-two years, briefly.</h2>
        <div className="col gap-8">
          {[
            ['1962', 'Achuthan ji starts cooking', 'The first batch — 18 jars — is given away to neighbours during the monsoon.'],
            ['1981', 'The kitchen moves to the riverside plot', 'Still 18 jars at a time, now twice a week. Fire pit becomes permanent.'],
            ['1996', 'Second generation takes the spoon', 'Daughter Lakshmi standardises the 21-day cooking calendar and starts the batch log we still keep.'],
            ['2008', 'AYUSH certification, on our terms', 'We refuse expansion offers four times. Get certified without changing a thing.'],
            ['2019', 'Third generation, first website', 'Grandson Arun launches nkherbal.com. The kitchen stays exactly the same.'],
            ['2026', 'You are here', 'Same recipe, same fire, sixty-two thousand jars a year. This redesign is the only thing that has gotten faster.'],
          ].map(([y, t, d]) => (
            <div key={y} style={{ display: 'grid', gridTemplateColumns: isMobile ? '80px 1fr' : '160px 1fr', gap: 24, padding: '24px 0', borderTop: '1px solid var(--line)' }}>
              <div className="mono" style={{ color: 'var(--accent)', fontSize: 14 }}>{y}</div>
              <div>
                <h4 style={{ fontSize: isMobile ? 22 : 32, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 12 }}>{t}</h4>
                <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, maxWidth: 600, textWrap: 'pretty' }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PRINCIPLES */}
      <section style={{ background: 'var(--surface)', margin: isMobile ? '32px 0' : '64px 0' }}>
        <div className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
          <div className="h-eyebrow" style={{ marginBottom: 16 }}>Six things we do not do</div>
          <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 48, maxWidth: 800 }}>The shortcuts we refused.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 24 : 40 }}>
            {[
              ['No pressure cookers', 'Slow open-fire cook for 21 days. Always.'],
              ['No artificial sweetener', 'Jaggery, honey, or whole dates. Nothing else.'],
              ['No glycerine or thickeners', 'If the paste is thin one month, that is amla telling us about the monsoon.'],
              ['No flavor masking', 'Bitter is information. We let it through.'],
              ['No third-party manufacturing', 'One kitchen. One fire. One batch register.'],
              ['No discount events', 'The price is the price. The honesty is in the recipe.'],
            ].map(([t, d]) => (
              <div key={t}>
                <h4 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 12 }}>{t}</h4>
                <p style={{ color: 'var(--ink-2)', lineHeight: 1.55, fontSize: 15, textWrap: 'pretty' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
        <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 48 }}>The people at the spoon.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 24 }}>
          {[
            ['Lakshmi NK', 'Master vaidya', '46 years'],
            ['Arun NK', 'Director, third gen', '12 years'],
            ['Dr. Meera S.', 'Lead Ayurvedic practitioner', '22 years'],
            ['Ramesh P.', 'Master cook, fire-keeper', '31 years'],
          ].map(([n, r, y]) => (
            <div key={n}>
              <div className="ph" style={{ aspectRatio: '4/5', borderRadius: 8, marginBottom: 16 }}>{n}</div>
              <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>{n}</div>
              <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{r}</div>
              <div className="mono" style={{ color: 'var(--accent)', marginTop: 3 }}>{y}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CLOSING CTA */}
      <section className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
        <div style={{ padding: isMobile ? 32 : 64, background: 'var(--ink)', color: 'var(--bg)', borderRadius: 16, textAlign: 'center' }}>
          <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 16 }}>Visit the kitchen.</h2>
          <p style={{ fontSize: 17, opacity: 0.8, marginBottom: 24, maxWidth: 480, margin: '0 auto 24px' }}>We host four small open-kitchen tours a year. Three days. Twelve guests. Lunch on the floor.</p>
          <button onClick={() => goto('Contact')} className="btn" style={{ background: 'var(--gold)', color: 'var(--ink)' }}>Request an invitation</button>
        </div>
      </section>
    </div>
  );
};

// ============ INGREDIENTS ============
function IngredientsPage({ vp, goto }) {
  const isMobile = vp === 'mobile';

  return (
    <div>
      <section className="container" style={{ padding: isMobile ? '32px 20px 48px' : '80px 48px' }}>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 24 }}>The herb shelf · 47 ingredients</div>
        <h1 className="h-display" style={{ fontSize: isMobile ? 52 : 'clamp(72px, 9vw, 144px)', marginBottom: 32 }}>
          Every herb,<br/>by name and farm.
        </h1>
        <p style={{ fontSize: isMobile ? 17 : 21, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 720, textWrap: 'pretty' }}>
          Nothing on the label that is not in the jar. Nothing in the jar that we cannot trace back to a farm, a vaidya's hand, and a harvest week.
        </p>
      </section>

      {/* INGREDIENT GRID — alphabetized cards */}
      <section className="container" style={{ padding: isMobile ? '32px 20px' : '32px 48px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 16 : 24 }}>
          {window.HERO_INGREDIENTS.map(h => (
            <div key={h.name} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 20, padding: 20, background: 'var(--surface)', border: '1px solid var(--line-soft)', borderRadius: 12 }}>
              {h.img
                ? <img src={window.imgSrc(h.img)} alt={h.name} style={{ width: '140px', height: '140px', objectFit: 'cover', borderRadius: 8, display: 'block' }}/>
                : <div className="ph" style={{ borderRadius: 8 }}>{h.name}</div>
              }
              <div>
                <div className="between" style={{ marginBottom: 6, alignItems: 'baseline' }}>
                  <h4 style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em' }}>{h.name}</h4>
                  <span className="mono" style={{ color: 'var(--accent)' }}>{h.role.split(',')[0]}</span>
                </div>
                <div className="serif" style={{ fontStyle: 'italic', color: 'var(--muted)', fontSize: 13, marginBottom: 12 }}>{h.latin}</div>
                <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.5 }}>{h.note}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* SCIENCE STRIP */}
      <section style={{ background: 'var(--primary)', color: 'var(--primary-ink)' }}>
        <div className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
          <div className="h-eyebrow" style={{ opacity: 0.7, marginBottom: 16 }}>Lab-tested · every batch</div>
          <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 24, maxWidth: 800 }}>
            We publish the lab work.
          </h2>
          <p style={{ fontSize: 17, opacity: 0.85, maxWidth: 600, lineHeight: 1.55, marginBottom: 40, textWrap: 'pretty' }}>
            Each batch number on the jar links to a one-page report — heavy-metal panel, microbiology, vitamin-C retention after the slow cook, and a photograph of the lot.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 24 }}>
            {[
              ['<0.1 ppm', 'Heavy metals (Pb)', 'AYUSH limit: 10 ppm'],
              ['<10 cfu', 'Total bacteria', 'per gram'],
              ['78 mg', 'Vit C retention', 'per teaspoon, post-cook'],
              ['100%', 'Batches tested', 'no exceptions'],
            ].map(([n, l, s]) => (
              <div key={l}>
                <div style={{ fontSize: isMobile ? 28 : 42, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>{n}</div>
                <div style={{ fontSize: 14, opacity: 0.9 }}>{l}</div>
                <div className="mono" style={{ marginTop: 6, opacity: 0.6 }}>{s}</div>
              </div>
            ))}
          </div>
          <button className="btn" style={{ marginTop: 40, background: 'var(--primary-ink)', color: 'var(--primary)' }}>
            See latest batch report <window.Icon name="arrUR" size={14}/>
          </button>
        </div>
      </section>

      {/* SOURCING MAP */}
      <section className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px' }}>
        <div className="h-eyebrow" style={{ marginBottom: 16 }}>Where it grows</div>
        <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 56, marginBottom: 48, maxWidth: 800 }}>From farm to spoon.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: 40 }}>
          <img src={window.imgSrc('farm.png')} alt="NK Herbal sourcing farm" style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 12, display: 'block' }}/>
          <div className="col gap-4">
            {[
              ['Pratapgarh, UP', 'Amla orchards · 2,400 trees · 4 farming families'],
              ['Kashmir Valley', 'Saffron from Pampore co-op · 92 growers'],
              ['Wayanad, Kerala', 'Pippali, brahmi · regenerative farms'],
              ['Pithoragarh, UK', 'Wild ashwagandha, shilajit · 14,000ft'],
            ].map(([p, d]) => (
              <div key={p} style={{ padding: '16px 0', borderBottom: '1px solid var(--line-soft)' }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>{p}</div>
                <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ============ JOURNAL ============
function JournalPage({ vp, goto }) {
  const isMobile = vp === 'mobile';
  const all = [...window.JOURNAL, ...window.JOURNAL.map(j => ({ ...j, id: j.id + 'b' }))];
  const [cat, setCat] = React.useState('All');
  const cats = ['All', 'Science', 'Ritual', 'Sourcing', 'Recipes'];

  return (
    <div className="container" style={{ padding: isMobile ? '32px 20px 64px' : '80px 48px 96px' }}>
      <div className="mono" style={{ color: 'var(--muted)', marginBottom: 24 }}>The journal · slow reading</div>
      <h1 className="h-display" style={{ fontSize: isMobile ? 52 : 'clamp(72px, 9vw, 144px)', marginBottom: 32 }}>
        Notes from the kitchen.
      </h1>
      <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 640, marginBottom: 48 }}>
        A monthly letter on sourcing, science, and ritual. Written by the people who make the paste. Edited by no one in marketing.
      </p>

      {/* Featured */}
      <div onClick={() => {}} style={{ cursor: 'pointer', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gap: 40, marginBottom: 64, padding: 24, background: 'var(--surface)', borderRadius: 16, alignItems: 'center' }}>
        <div className="ph" style={{ aspectRatio: '4/3', borderRadius: 8 }}>{all[0].cat} · featured</div>
        <div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
            <span className="badge">Featured</span>
            <span className="mono" style={{ color: 'var(--muted)' }}>{all[0].read}</span>
          </div>
          <h2 className="h-display" style={{ fontSize: isMobile ? 28 : 40, marginBottom: 16 }}>{all[0].title}</h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, marginBottom: 24, textWrap: 'pretty' }}>{all[0].excerpt}</p>
          <button className="btn btn-ghost">Read note <window.Icon name="arrR" size={14}/></button>
        </div>
      </div>

      {/* Filter strip */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 32, overflowX: 'auto', paddingBottom: 4 }}>
        {cats.map(c => (
          <button key={c} onClick={() => setCat(c)} style={{ padding: '8px 16px', borderRadius: 999, border: '1px solid', borderColor: cat === c ? 'var(--ink)' : 'var(--line)', background: cat === c ? 'var(--ink)' : 'transparent', color: cat === c ? 'var(--bg)' : 'var(--ink)', fontSize: 13, whiteSpace: 'nowrap' }}>{c}</button>
        ))}
      </div>

      {/* grid */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 24 : 28 }}>
        {all.filter(j => cat === 'All' || j.cat === cat).map(j => (
          <article key={j.id} style={{ cursor: 'pointer' }}>
            <div className="ph" style={{ aspectRatio: '4/3', borderRadius: 8, marginBottom: 16 }}>{j.cat}</div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
              <span className="badge">{j.cat}</span>
              <span className="mono" style={{ color: 'var(--muted)' }}>{j.read}</span>
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: 8, textWrap: 'pretty' }}>{j.title}</h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.5 }}>{j.excerpt}</p>
          </article>
        ))}
      </div>

      {/* Newsletter */}
      <div style={{ marginTop: 80, padding: isMobile ? 32 : 64, background: 'var(--ink)', color: 'var(--bg)', borderRadius: 16, textAlign: 'center' }}>
        <h2 className="h-display" style={{ fontSize: isMobile ? 32 : 48, marginBottom: 16 }}>One letter, once a month.</h2>
        <p style={{ opacity: 0.8, marginBottom: 32, maxWidth: 480, margin: '0 auto 32px' }}>Sourcing diaries, quiet recipes, the occasional discount. No tracking pixels.</p>
        <div style={{ display: 'flex', gap: 8, maxWidth: 480, margin: '0 auto', flexDirection: isMobile ? 'column' : 'row' }}>
          <input placeholder="your@email.com" className="field" style={{ flex: 1, background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: 'var(--bg)' }}/>
          <button className="btn" style={{ background: 'var(--gold)', color: 'var(--ink)' }}>Subscribe</button>
        </div>
      </div>
    </div>
  );
};

// ============ CONTACT ============
function ContactPage({ vp }) {
  const isMobile = vp === 'mobile';
  const [sent, setSent] = React.useState(false);
  const [topic, setTopic] = React.useState('An order or delivery');
  const [topicOpen, setTopicOpen] = React.useState(false);
  const [newsletter, setNewsletter] = React.useState(true);
  const topics = ['An order or delivery','A product question','A vaidya consultation','A kitchen visit','Wholesale or press','Something else'];

  return (
    <div>
      <section className="container" style={{ padding: isMobile ? '32px 20px 48px' : '80px 48px 64px' }}>
        <div className="mono" style={{ color: 'var(--muted)', marginBottom: 24 }}>Get in touch</div>
        <h1 className="h-display" style={{ fontSize: isMobile ? 52 : 'clamp(72px, 9vw, 144px)', marginBottom: 32 }}>
          Write us a letter.
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 640 }}>
          Real people, in Kasaragod and Bengaluru. We read everything within 24 hours and reply within 48.
        </p>
      </section>

      <section className="container" style={{ padding: isMobile ? '32px 20px 96px' : '32px 48px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.3fr', gap: 64 }}>
          <aside>
            <h3 className="mono" style={{ color: 'var(--muted)', marginBottom: 24 }}>Direct lines</h3>
            <div className="col gap-6">
              {[
                ['Customer care', 'care@nkherbal.com', '+91 80 4567 8901', 'Mon–Sat, 9 am – 7 pm IST'],
                ['Vaidya consultation', 'consult@nkherbal.com', 'Book a free 15-min call', ''],
                ['Wholesale & press', 'team@nkherbal.com', '', 'Reply within 3 working days'],
                ['Visit the kitchen', 'kitchen@nkherbal.com', 'Kasaragod, Kerala 671121', 'Four open weeks a year'],
              ].map(([t, e, p, h]) => (
                <div key={t} style={{ padding: '20px 0', borderTop: '1px solid var(--line-soft)' }}>
                  <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 10 }}>{t}</div>
                  <div className="mono" style={{ color: 'var(--ink-2)', marginBottom: 4 }}>{e}</div>
                  {p && <div className="mono" style={{ color: 'var(--ink-2)', marginBottom: 4 }}>{p}</div>}
                  {h && <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{h}</div>}
                </div>
              ))}
            </div>
          </aside>

          <div>
            <h3 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em', marginBottom: 24 }}>Or fill the form</h3>
            {sent ? (
              <div style={{ padding: 32, background: 'var(--surface)', borderRadius: 12, border: '1px solid var(--line-soft)' }}>
                <window.Icon name="check" size={28}/>
                <h4 style={{ fontSize: 22, fontWeight: 500, margin: '16px 0 8px' }}>Letter received.</h4>
                <p style={{ color: 'var(--ink-2)' }}>We'll write back within 48 hours. If you mentioned the kitchen visit, expect an invitation in the next batch round.</p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }} className="col gap-4">
                    <div className="field-row">
                      <label>What is this about?</label>
                      <div style={{ position: 'relative' }}>
                        <button type="button" onClick={() => setTopicOpen(o => !o)}
                          style={{ width: '100%', padding: '14px 16px', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', background: 'var(--surface)', fontSize: 14, textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center', transition: 'border-color 0.2s' }}
                          onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--ink)'}
                          onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--line)'}>
                          {topic}
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.5, transform: topicOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}><path d="M6 9l6 6 6-6"/></svg>
                        </button>
                        {topicOpen && (
                          <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', zIndex: 50, boxShadow: '0 8px 32px rgba(42,32,26,0.12)', animation: 'fadeInUp 0.18s cubic-bezier(0.22,1,0.36,1)' }}>
                            {topics.map(t => (
                              <button type="button" key={t} onClick={() => { setTopic(t); setTopicOpen(false); }}
                                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '11px 16px', fontSize: 14, fontWeight: t === topic ? 500 : 400, color: t === topic ? 'var(--primary)' : 'var(--ink)', background: t === topic ? 'var(--surface)' : 'transparent', transition: 'background 0.15s' }}
                                onMouseEnter={e => { if (t !== topic) e.currentTarget.style.background = 'var(--surface)'; }}
                                onMouseLeave={e => { if (t !== topic) e.currentTarget.style.background = 'transparent'; }}>
                                {t}
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12 }}>
                      <div className="field-row"><label>Your name</label><input className="field"/></div>
                      <div className="field-row"><label>Email</label><input className="field" type="email"/></div>
                    </div>
                    <div className="field-row"><label>Order # (if any)</label><input className="field" placeholder="NKH-..."/></div>
                    <div className="field-row"><label>Your message</label><textarea className="field" rows={6} style={{ resize: 'vertical' }} placeholder="Tell us what's on your mind. The more detail, the better."></textarea></div>
                    <button type="button" onClick={() => setNewsletter(n => !n)} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, textAlign: 'left' }}>
                      <span style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${newsletter ? '#b8945e' : 'var(--line)'}`, background: newsletter ? '#b8945e' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1, transition: 'all 0.18s cubic-bezier(0.22,1,0.36,1)', color: '#fff' }}>
                        {newsletter && <window.Icon name="check" size={10}/>}
                      </span>
                      Add me to the monthly letter (sourcing notes, no marketing).
                    </button>
                    <button type="submit" className="btn btn-primary" style={{ alignSelf: 'flex-start', marginTop: 8 }}>Send letter <window.Icon name="arrR" size={14}/></button>
                  </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
};

window.AboutPage = AboutPage;
window.IngredientsPage = IngredientsPage;
window.JournalPage = JournalPage;
window.ContactPage = ContactPage;
