/* global React, NavLink, Icon */
const { useState: useState4 } = React;

/* ============== CONTACT ============== */
const SERVICE_CHIPS = ['Brand strategy', 'Social media', 'Copywriting', 'Video animation', 'Marketing collateral', 'Web development', 'Internal business app', 'Mobile app', 'Interior & 3D design', 'Just exploring'];
const BUDGETS = ['Under ₱30K', '₱30K – ₱65K', '₱65K – ₱150K', 'Over ₱150K', 'Not sure yet'];

function Contact() {
  const [form, setForm] = useState4({ name: '', email: '', company: '', message: '' });
  const [services, setServices] = useState4(['Social media']);
  const [budget, setBudget] = useState4('₱30K – ₱65K');
  const [sent, setSent] = useState4(false);

  const toggle = (s) => setServices((arr) => arr.includes(s) ? arr.filter((x) => x !== s) : [...arr, s]);

  const [submitting, setSubmitting] = useState4(false);
  const [error, setError] = useState4('');

  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch('https://formspree.io/f/mwvjvzen', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ name: form.name, email: form.email, company: form.company, services: services.join(', '), budget, message: form.message }),
      });
      if (res.ok) { setSent(true); } else { setError('Something went wrong — please email us directly.'); }
    } catch { setError('Network error — please try again.'); }
    setSubmitting(false);
  };

  return (
    <section id="contact" className="gp-contact-bg gp-section">
      <div className="gp-shell">
        <div className="gp-contact">
          <div className="gp-contact-text">
            <span className="gp-eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Contact · 08</span>
            <h2 className="gp-display gp-display-lg">
              Let's partner up.
            </h2>
            <p>
              Tell us what you're working on. We'll come back within one business day with
              a real human, a real proposal, and a real timeline — no sales funnels.
            </p>
            <div className="gp-contact-info">
              <div className="gp-contact-info-item">
                <div className="ico"><Icon name="mail" size={18} /></div>
                <span>hello@giantpeachglobal.com</span>
              </div>
              <div className="gp-contact-info-item">
                <div className="ico"><Icon name="map" size={18} /></div>
                <span>Metro Manila, Philippines</span>
              </div>
            </div>
          </div>

          {sent ?
          <div className="gp-form">
              <div className="gp-form-success">
                <div className="icon"><Icon name="check" size={28} /></div>
                <h3>Your message is on its way.</h3>
                <p>We'll be in touch at <strong>{form.email || 'your inbox'}</strong> within one business day.</p>
                <button onClick={() => {setSent(false);setForm({ name: '', email: '', company: '', message: '' });}} className="gp-btn gp-btn-ink gp-btn-sm" style={{ marginTop: 24 }}>Send another</button>
              </div>
            </div> :

          <form className="gp-form" onSubmit={submit}>
              <span className="gp-eyebrow">Project brief · takes 60 seconds</span>
              <div className="gp-form-row">
                <div>
                  <label>Your name</label>
                  <input className="gp-input" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Maria Reyes" />
                </div>
                <div>
                  <label>Work email</label>
                  <input className="gp-input" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="maria@brand.ph" />
                </div>
              </div>
              <div>
                <label>Company / brand</label>
                <input className="gp-input" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="Manilamade Café" />
              </div>
              <div>
                <label>What do you need help with?</label>
                <div className="gp-chip-row">
                  {SERVICE_CHIPS.map((s) =>
                <button type="button" key={s} className={'gp-chip' + (services.includes(s) ? ' on' : '')} onClick={() => toggle(s)}>{s}</button>
                )}
                </div>
              </div>
              <div>
                <label>Monthly budget</label>
                <div className="gp-chip-row">
                  {BUDGETS.map((b) =>
                <button type="button" key={b} className={'gp-chip' + (budget === b ? ' on' : '')} onClick={() => setBudget(b)}>{b}</button>
                )}
                </div>
              </div>
              <div>
                <label>Tell us a little more</label>
                <textarea className="gp-textarea" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="A few sentences about what you're working on, timeline, or anything we should know."></textarea>
              </div>
              {error && <p style={{ color: 'var(--gp-coral-deep)', fontSize: 14, marginTop: 4 }}>{error}</p>}
              <button type="submit" disabled={submitting} className="gp-btn gp-btn-primary" style={{ justifyContent: 'center', marginTop: 8, opacity: submitting ? 0.7 : 1 }}>
                {submitting ? 'Sending…' : <><span>Send brief</span> <Icon name="arrow" size={14} /></>}
              </button>
            </form>
          }
        </div>
      </div>
    </section>);

}

/* ============== FOOTER ============== */
function Footer() {
  return (
    <footer className="gp-footer">
      <div className="gp-shell">
        <div className="gp-footer-top">
          <div className="gp-footer-brand">
            <img src="assets/logo-vertical.png" alt="Giant Peach" style={{ filter: 'brightness(0) invert(1)', height: "200px" }} />
            <p>A creative and technology partner helping businesses build their brand, streamline operations, and grow — through creative services, custom software, and proprietary products.</p>
          </div>
          <div className="gp-footer-col">
            <h5>Creative Subscription</h5>
            <ul>
              <li><NavLink href="#services">Brand strategy</NavLink></li>
              <li><NavLink href="#services">Social media</NavLink></li>
              <li><NavLink href="#services">Copywriting</NavLink></li>
              <li><NavLink href="#services">Video animation</NavLink></li>
              <li><NavLink href="#services">Marketing collateral</NavLink></li>
            </ul>
          </div>
          <div className="gp-footer-col">
            <h5>Technology services</h5>
            <ul>
              <li><NavLink href="#solutions">Web development</NavLink></li>
              <li><NavLink href="#solutions">Internal business apps</NavLink></li>
              <li><NavLink href="#solutions">Mobile apps</NavLink></li>
              <li><NavLink href="#solutions">Interior & 3D design</NavLink></li>
            </ul>
          </div>
          <div className="gp-footer-col">
            <h5>Products</h5>
            <ul>
              <li><a href="https://cstudio.giantpeachglobal.com" target="_blank" rel="noopener noreferrer">Content Studio</a></li>
              <li><a href="https://lasi.giantpeachglobal.com" target="_blank" rel="noopener noreferrer">LASI</a></li>
              <li><NavLink href="#products">All products</NavLink></li>
            </ul>
          </div>
          <div className="gp-footer-col">
            <h5>Studio</h5>
            <ul>
              <li><NavLink href="#about">About us</NavLink></li>
              <li><NavLink href="#pricing">Pricing</NavLink></li>
              <li><NavLink href="#faq">FAQ</NavLink></li>
              <li><NavLink href="#contact">Contact</NavLink></li>
              <li><a href="mailto:hello@giantpeachglobal.com">Email us</a></li>
            </ul>
          </div>
        </div>
        <div className="gp-bigtext">Giant Peach</div>
        <div className="gp-footer-bot">
          <span>© 2026 Giant Peach · Creative & Technology Partner · Metro Manila, Philippines</span>
          <span>Creative Excellence · Community Impact</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Contact, Footer });