/* =========================================================================
   Morning Mob — editorial + utility pages
   About, Community/Join, Contact, and Legal (FAQ, Privacy, Terms).
   ========================================================================= */

function PageHead({ eyebrow, title, intro }) {
  const t = useMM();
  return (
    <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '64px 28px 0' }}>
      {eyebrow && <Eyebrow color={t.editorialAccent} style={{ display: 'block', marginBottom: 18 }}>{eyebrow}</Eyebrow>}
      <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(52 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: 0, lineHeight: 1.08, letterSpacing: '-0.5px', maxWidth: 900 }}>{title}</h1>
      {intro && <p style={{ marginTop: 24, color: 'var(--body)', maxWidth: 'var(--measure)', fontSize: 15 }}>{intro}</p>}
    </div>
  );
}

/* ------------------------------- About ------------------------------- */
function AboutView({ about, go }) {
  const t = useMM();
  return (
    <div>
      <PageHead eyebrow="Our story" title={about.lede} />

      {/* collage band */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '56px 28px' }}>
        <div className="mm-about-collage" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 24, alignItems: 'start' }}>
          <Photo id="about-1" src={MM_PHOTOS.about1} ratio="4 / 5" label="Mocha" />
          <Photo id="about-2" src={MM_PHOTOS.whiteFront} ratio="3 / 4" label="White" style={{ marginTop: 48 }} />
          <Photo id="about-3" src={MM_PHOTOS.about3} ratio="3 / 4" label="Early mornings" />
        </div>
      </section>

      {/* essay */}
      <section style={{ maxWidth: 'var(--measure)', margin: '0 auto', padding: '24px 28px 0' }}>
        {about.body.map((para, i) => (
          <p key={i} style={{ color: 'var(--body)', fontSize: 16, lineHeight: 1.8, marginBottom: 24 }}>{para}</p>
        ))}
      </section>

      {/* facts */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '64px auto 0', padding: '0 28px' }}>
        <div className="mm-facts" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, border: '1px solid var(--hairline)', background: 'var(--hairline)' }}>
          {about.facts.map((f) => (
            <div key={f.label} style={{ background: 'var(--surface-soft)', padding: '28px 28px' }}>
              <Eyebrow style={{ display: 'block', marginBottom: 10 }}>{f.label}</Eyebrow>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 400, color: 'var(--ink)' }}>{f.value}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '80px 28px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(32 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: 0 }}>See what we're making now</h2>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
          <button onClick={() => go('shop')} style={{ ...primaryBtn, marginTop: 0, width: 'auto', padding: '0 32px' }}>Shop the tee</button>
          <a href="https://www.instagram.com/morning_mob/" target="_blank" rel="noopener noreferrer" style={{ ...ghostBtn, marginTop: 0, width: 'auto', padding: '0 32px', display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>Follow @morning_mob</a>
        </div>
      </section>
    </div>
  );
}

/* ----------------------------- Community ----------------------------- */
function CommunityView({ go }) {
  const t = useMM();
  const [email, setEmail] = useState('');
  const [joined, setJoined] = useState(false);
  const [focus, setFocus] = useState(false);
  const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
  const benefits = [
    { h: 'First word on the drop', p: 'Members hear about one-of-a-kind pieces and limited editions before they reach the shop floor.' },
    { h: 'Early access', p: 'A private window to buy new arrivals and editions a full day before public release.' },
    { h: 'A letter from the studio', p: 'An occasional note on what we are making, where the cloth came from, and who worked it.' },
    { h: 'Mending & care', p: 'Members may send a worn Morning Mob piece back to the studio for mending, once a year, at no cost.' },
  ];
  return (
    <div>
      <PageHead eyebrow="Community" title="Join the list." intro="No noise — a few letters a season. Members get the first word on one-of-a-kind pieces, an early window to buy, and an open invitation back to the studio for mending." />

      {/* signup */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '48px 28px 0' }}>
        <div className="mm-community" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'stretch' }}>
          <div style={{ background: 'var(--surface-soft)', padding: '48px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Eyebrow color={t.editorialAccent}>Early-access membership</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(30 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: '14px 0 0' }}>Become a member — at no cost.</h2>
            <p style={{ color: 'var(--body)', marginTop: 14, maxWidth: 420 }}>Add your email and your name goes on the list. Leave whenever you like; every letter has a one-click unsubscribe.</p>
            {joined ? (
              <p style={{ color: 'var(--success)', marginTop: 28, letterSpacing: '0.5px' }}>Welcome — you're on the list. Watch for a letter from the studio.</p>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); if (valid) setJoined(true); }} style={{ marginTop: 28, maxWidth: 460 }}>
                <div style={{ display: 'flex' }}>
                  <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email address" onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
                    style={{ flex: 1, height: 48, padding: '0 14px', background: '#fff', borderRadius: 0, outline: 'none', borderRight: 'none',
                      border: '1px solid ' + (focus ? 'var(--hairline-strong)' : 'var(--hairline)'), fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--ink)' }} />
                  <button type="submit" style={{ height: 48, padding: '0 28px', background: 'var(--ink)', color: '#fff', border: 'none',
                    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer', whiteSpace: 'nowrap' }}>Join</button>
                </div>
                <p style={{ color: 'var(--muted)', fontSize: 11, marginTop: 12, letterSpacing: '0.5px' }}>By joining you agree to receive email from Morning Mob. No spam, ever.</p>
              </form>
            )}
          </div>
          <div style={{ position: 'relative', minHeight: 340 }}>
            <Photo id="community-1" ratio="auto" label="The studio, members' day" style={{ position: 'absolute', inset: 0, aspectRatio: 'auto', height: '100%' }} />
          </div>
        </div>
      </section>

      {/* benefits */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '72px 28px 0' }}>
        <div className="mm-benefits" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, border: '1px solid var(--hairline)', background: 'var(--hairline)' }}>
          {benefits.map((b, i) => (
            <div key={i} style={{ background: 'var(--canvas)', padding: '36px 40px' }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '1px', color: t.editorialAccent, marginBottom: 16 }}>{String(i + 1).padStart(2, '0')}</div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>{b.h}</h3>
              <p style={{ color: 'var(--body)', marginTop: 12, maxWidth: 420 }}>{b.p}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ textAlign: 'center', padding: '72px 28px 0' }}>
        <p style={{ color: 'var(--muted)', letterSpacing: '0.5px' }}>Already a member? Sign in from the account menu to manage your letters.</p>
      </section>
    </div>
  );
}

/* ------------------------------ Contact ------------------------------ */
function ContactView() {
  const t = useMM();
  const [f, setF] = useState({ name: '', email: '', subject: 'General', message: '' });
  const [sent, setSent] = useState(false);
  const [focus, setFocus] = useState('');
  const set = (k) => (v) => setF((p) => ({ ...p, [k]: v }));
  const inputStyle = (k) => ({ width: '100%', height: 46, padding: '0 14px', background: '#fff', borderRadius: 0, outline: 'none',
    border: '1px solid ' + (focus === k ? 'var(--hairline-strong)' : 'var(--hairline)'), fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--ink)' });
  const lbl = { display: 'block', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 };

  return (
    <div>
      <PageHead eyebrow="Contact" title="We're glad to hear from you." intro="For orders, sizing, or anything else, write to us below or reach us directly. We answer within two business days." />

      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '48px 28px 0' }}>
        <div className="mm-contact" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          {/* form */}
          <div>
            {sent ? (
              <div style={{ background: 'var(--surface-soft)', padding: '40px 40px' }}>
                <Eyebrow color="var(--success)">Message sent</Eyebrow>
                <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 400, color: 'var(--ink)', margin: '14px 0 0' }}>Thank you — we'll be in touch.</h2>
                <p style={{ color: 'var(--body)', marginTop: 12 }}>A note is on its way to {f.email || 'your inbox'} confirming we received your message.</p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                <label><span style={lbl}>Name</span><input value={f.name} onChange={(e) => set('name')(e.target.value)} onFocus={() => setFocus('name')} onBlur={() => setFocus('')} required style={inputStyle('name')} /></label>
                <label><span style={lbl}>Email</span><input value={f.email} onChange={(e) => set('email')(e.target.value)} type="email" onFocus={() => setFocus('email')} onBlur={() => setFocus('')} required style={inputStyle('email')} /></label>
                <label><span style={lbl}>Subject</span>
                  <select value={f.subject} onChange={(e) => set('subject')(e.target.value)} onFocus={() => setFocus('subject')} onBlur={() => setFocus('')} style={{ ...inputStyle('subject'), appearance: 'none' }}>
                    {['General', 'Orders & shipping', 'Sizing', 'Returns', 'Collaborations'].map((o) => <option key={o}>{o}</option>)}
                  </select>
                </label>
                <label><span style={lbl}>Message</span>
                  <textarea value={f.message} onChange={(e) => set('message')(e.target.value)} onFocus={() => setFocus('message')} onBlur={() => setFocus('')} required rows={5}
                    style={{ ...inputStyle('message'), height: 'auto', padding: '12px 14px', resize: 'vertical', lineHeight: 1.6 }} /></label>
                <button type="submit" style={{ ...primaryBtn, marginTop: 4, width: 'auto', alignSelf: 'flex-start', padding: '0 40px' }}>Send message</button>
              </form>
            )}
          </div>

          {/* contact + where to buy */}
          <div>
            <Eyebrow color={t.editorialAccent} style={{ display: 'block', marginBottom: 8 }}>Get in touch</Eyebrow>
            <p style={{ color: 'var(--body)', marginBottom: 6 }}>
              <a href="mailto:morningmobshop@gmail.com" style={{ color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--hairline-strong)' }}>morningmobshop@gmail.com</a>
            </p>
            <p style={{ color: 'var(--body)' }}>
              <a href="https://www.instagram.com/morning_mob/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--hairline-strong)' }}>Instagram — @morning_mob</a>
            </p>
            <p style={{ color: 'var(--muted)', fontSize: 13, marginTop: 10 }}>We reply within two business days.</p>

            <Eyebrow color={t.editorialAccent} style={{ display: 'block', margin: '36px 0 16px' }}>Where to buy</Eyebrow>
            <div style={{ borderTop: '1px solid var(--hairline)' }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'baseline', padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
                <Icon name="pin" size={15} style={{ color: t.editorialAccent, flex: 'none', position: 'relative', top: 2 }} />
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 400, color: 'var(--ink)' }}>This site</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--muted)', marginTop: 2 }}>Order the Mocha Mode Tee directly from us.</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'baseline', padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
                <Icon name="pin" size={15} style={{ color: t.editorialAccent, flex: 'none', position: 'relative', top: 2 }} />
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 400, color: 'var(--ink)' }}>Shopee</div>
                  <a href="https://shopee.sg/Mocha-Mode-Tee-i.1121322403.28901191417" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--muted)', marginTop: 2, display: 'inline-block', textDecoration: 'none', borderBottom: '1px solid var(--hairline)' }}>Buy on our Shopee store →</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------- FAQ -------------------------------- */
function FaqView({ faq, go }) {
  const [open, setOpen] = useState(0);
  return (
    <div>
      <PageHead eyebrow="Help" title="Frequently asked." intro="The questions we hear most. If yours isn't here, the studio is a note away." />
      <section style={{ maxWidth: 'var(--measure)', margin: '0 auto', padding: '40px 28px 0' }}>
        <div style={{ borderTop: '1px solid var(--hairline)' }}>
          {faq.map((item, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--hairline)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
                background: 'none', border: 'none', padding: '24px 0', cursor: 'pointer', textAlign: 'left' }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 400, color: 'var(--ink)' }}>{item.q}</span>
                <Icon name={open === i ? 'minus' : 'plus'} size={18} style={{ color: 'var(--ink)', flex: 'none' }} />
              </button>
              {open === i && <p style={{ color: 'var(--body)', fontSize: 15, lineHeight: 1.7, padding: '0 0 28px', maxWidth: 560 }}>{item.a}</p>}
            </div>
          ))}
        </div>
        <p style={{ color: 'var(--muted)', marginTop: 40, letterSpacing: '0.5px' }}>
          Still stuck? <button onClick={() => go('contact')} style={{ background: 'none', border: 'none', borderBottom: '1px solid var(--ink)', color: 'var(--ink)', cursor: 'pointer', padding: 0, fontFamily: 'inherit', fontSize: 'inherit' }}>Write to us.</button></p>
      </section>
    </div>
  );
}

/* --------------------------- Legal (doc) ---------------------------- */
function LegalView({ doc }) {
  return (
    <div>
      <PageHead eyebrow={doc.updated} title={doc.title} intro={doc.intro} />
      <section style={{ maxWidth: 'var(--measure)', margin: '0 auto', padding: '40px 28px 0' }}>
        {doc.sections.map((s, i) => (
          <div key={i} style={{ marginBottom: 36 }}>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 400, color: 'var(--ink)', margin: '0 0 12px' }}>{s.h}</h2>
            <p style={{ color: 'var(--body)', fontSize: 15, lineHeight: 1.8 }}>{s.p}</p>
          </div>
        ))}
      </section>
    </div>
  );
}

Object.assign(window, { PageHead, AboutView, CommunityView, ContactView, FaqView, LegalView });