// About, Contact (with full form), Footer

function About() {
  return (
    <section id="about" className="pm-section" style={{ padding: '120px 40px', position: 'relative' }}>
      <div className="pm-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'flex-start' }}>
        <div className="pm-reveal pm-about-heading" style={{ position: 'sticky', top: 100 }}>
          <div className="pm-mono" style={{ fontSize: 11, color: PM.yellow, marginBottom: 16 }}>◆ 06 / THE STUDIO</div>
          <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(56px,7vw,120px)', color: PM.bone, margin: 0 }}>
            QUALITY<br/>PRINTS.
          </h2>
          <div className="pm-script pm-section-script" style={{ fontSize: 'clamp(36px,5vw,72px)', color: PM.yellow, marginTop: 8 }}>
            Lasting impact.
          </div>
        </div>
        <div className="pm-reveal">
          <p className="pm-about-lead" style={{ fontSize: 28, lineHeight: 1.4, color: PM.bone, fontWeight: 500 }}>
Six years on, we are based in Johannesburg. We work with brands, small businesses, schools, sports teams and creators across South Africa.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: PM.muted, marginTop: 32 }}>
Every job is hand-finished. Every shipment is checked. We started Pressing Matters because the bulk-print options for SMEs felt either cheap or overpriced. Never both <span style={{ color: PM.yellow }}>quick</span> AND <span style={{ color: PM.yellow }}>good</span>.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: PM.muted, marginTop: 16 }}>
            No minimums on tees. No upselling. Just careful craft and reliable turnarounds.
          </p>

          <div className="pm-value-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 48 }}>
            {[
              { t: 'PREMIUM QUALITY', body: 'High-grade materials and inks.' },
              { t: 'MADE TO ORDER', body: 'Fast turnaround. Made with care.' },
              { t: 'MADE FOR YOU', body: 'Personal prints that make a statement.' },
            ].map((v, i) => (
              <div key={v.t} style={{
                padding: 20,
                background: i === 1 ? PM.yellow : 'transparent',
                color: i === 1 ? PM.ink : PM.bone,
                border: `2px solid ${i === 1 ? PM.yellow : PM.bone}`,
              }}>
                <div className="pm-display" style={{ fontSize: 18, marginBottom: 8 }}>{v.t}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, opacity: i === 1 ? 1 : .8 }}>{v.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', contact: '', service: '', quantity: '', deadline: '', message: '',
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('https://formspree.io/f/REPLACE_WITH_FORMSPREE_ID', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (res.ok) setSubmitted(true);
    } catch (_) {
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <section id="contact" className="pm-section" style={{ padding: '160px 40px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
        <div className="pm-grain" style={{ opacity: .3 }} />
        <div className="pm-display" style={{ fontSize: 'clamp(60px,10vw,160px)', color: PM.bone }}>
          THANKS!
        </div>
        <div className="pm-script" style={{ fontSize: 'clamp(40px,7vw,90px)', color: PM.yellow, marginTop: -16 }}>
          We&rsquo;ll be in touch.
        </div>
        <p style={{ maxWidth: 480, margin: '32px auto 0', fontSize: 17, color: PM.muted, lineHeight: 1.6 }}>
Your brief is in. Expect a quote and digital proof in your inbox or WhatsApp within 24 hours. Usually much sooner.
        </p>
        <div style={{ marginTop: 32 }}>
          <button onClick={() => { setSubmitted(false); setForm({ name: '', contact: '', service: '', quantity: '', deadline: '', message: '' }); }}
            className="pm-btn pm-btn-y">Send another →</button>
        </div>
      </section>
    );
  }

  return (
    <section id="contact" className="pm-section" style={{ padding: '120px 40px', position: 'relative', overflow: 'hidden' }}>
      <div className="pm-grain" style={{ opacity: .3 }} />

      <div className="pm-reveal pm-section-heading" style={{ marginBottom: 64 }}>
        <div className="pm-mono" style={{ fontSize: 11, color: PM.yellow, marginBottom: 16 }}>◆ 07 / GET IN TOUCH</div>
        <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(64px,11vw,180px)', color: PM.bone, margin: 0 }}>
          LET&rsquo;S BRING
        </h2>
        <div className="pm-script pm-section-script" style={{ fontSize: 'clamp(48px,8vw,120px)', color: PM.yellow, marginTop: -10 }}>
          your ideas to life.
        </div>
      </div>

      <div className="pm-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64 }}>
        <form className="pm-reveal" onSubmit={submit}>
          <input className="pm-input" placeholder="Your name *" required
            value={form.name} onChange={update('name')} />
          <input className="pm-input" placeholder="Email or WhatsApp number *" required
            value={form.contact} onChange={update('contact')} />
          <select className="pm-input" required value={form.service} onChange={update('service')}
            style={{ appearance: 'none', color: form.service ? PM.bone : 'rgba(241,236,224,.5)' }}>
            <option value="" disabled>What are we printing? *</option>
            <option>T-shirts / hoodies</option>
            <option>Mugs / drinkware</option>
<option>Jeans / denim</option>
            <option>Tote bags</option>
            <option>Bulk / corporate uniform</option>
            <option>Mixed / not sure</option>
          </select>
          <input className="pm-input" placeholder="Quantity (approx)"
            value={form.quantity} onChange={update('quantity')} />
          <input className="pm-input" placeholder="Deadline (when do you need it?)"
            value={form.deadline} onChange={update('deadline')} />
<textarea className="pm-input" placeholder="Tell us about the project. Colours, design ideas, attachments to follow."
            rows={4} value={form.message} onChange={update('message')}
            style={{ resize: 'vertical', minHeight: 80 }} />
          <div className="pm-contact-actions" style={{ display: 'flex', gap: 20, marginTop: 40, flexWrap: 'wrap' }}>
            <button type="submit" className="pm-btn pm-btn-y">Send brief →</button>
            <a href="https://wa.me/27615236657" className="pm-btn pm-btn-out">
              <WAIcon size={18} fill={PM.bone} />WhatsApp us
            </a>
          </div>
        </form>

        <div className="pm-reveal">
          <div className="pm-card pm-contact-card" style={{ padding: 32, transform: 'rotate(1deg)', boxShadow: `8px 8px 0 ${PM.yellow}` }}>
            <div className="pm-mono" style={{ fontSize: 11, color: PM.muted, marginBottom: 12 }}>BASED IN</div>
            <div className="pm-display" style={{ fontSize: 28, lineHeight: 1, marginBottom: 24 }}>
              JOHANNESBURG<br/>SOUTH AFRICA
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 15 }}>
              <div>📞 <a href="tel:0615236657" style={{ color: PM.ink, textDecoration: 'underline' }}>061 523 6657</a></div>
              <div>✉️ <a href="mailto:hello@pressingmatters.co.za" style={{ color: PM.ink, textDecoration: 'underline' }}>hello@pressingmatters.co.za</a></div>
              <div>🌐 <span>pressingmatters.co.za</span></div>
            </div>

            <div style={{ marginTop: 24, paddingTop: 24, borderTop: `2px dashed ${PM.ink}` }}>
              <div className="pm-mono" style={{ fontSize: 11, color: PM.muted, marginBottom: 8 }}>HOURS</div>
              <div style={{ fontSize: 13, lineHeight: 1.7 }}>
                Mon to Fri · 08:30 to 17:00<br/>
                Sat · 09:00 to 13:00<br/>
                Sun · Closed
              </div>
            </div>

            <div style={{ marginTop: 24 }}>
              <div className="pm-mono" style={{ fontSize: 11, color: PM.muted, marginBottom: 12 }}>FOLLOW</div>
              <div style={{ display: 'flex', gap: 12 }}>
                {['IG', 'FB', 'TT'].map((s) => (
                  <a key={s} href="#" style={{
                    width: 36, height: 36, background: PM.ink, color: PM.yellow,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: FONTS.display, fontSize: 14, textDecoration: 'none',
                  }}>{s}</a>
                ))}
              </div>
              <div className="pm-script" style={{ fontSize: 22, marginTop: 12 }}>@pressingmatters_</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="pm-footer" style={{ padding: '60px 40px 30px', background: PM.ink, borderTop: `2px solid ${PM.bone}` }}>
      <div className="pm-display" style={{ fontSize: 'clamp(60px,12vw,200px)', color: PM.bone, lineHeight: .85 }}>
        PRESSING<br/><span style={{ color: PM.yellow }}>MATTERS.</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginTop: 32, paddingTop: 24, borderTop: `1px solid rgba(241,236,224,.2)` }}>
        <div className="pm-mono" style={{ fontSize: 10, color: PM.muted }}>© 2026 PRESSING MATTERS · JOHANNESBURG, ZA</div>
        <div className="pm-mono" style={{ fontSize: 10, color: PM.muted }}>YOUR STYLE · YOUR PRINT.</div>
      </div>
    </footer>
  );
}

window.About = About;
window.Contact = Contact;
window.Footer = Footer;