// ContactPage.jsx — enquiry form + contact details for Terraforno.
(function () {
  const { useState } = React;

  const REASONS = ['Home installation', 'Restaurant / commercial', 'Resort / hotel', 'General enquiry'];

  function Field({ label, children }) {
    return (
      <label style={{ display: 'block' }}>
        <span style={{ display: 'block', fontSize: 'var(--t-xs)', letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--fg-3)', fontWeight: 600, marginBottom: 8 }}>{label}</span>
        {children}
      </label>
    );
  }
  const inputStyle = {
    width: '100%', background: 'var(--bg)', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--r-md)',
    padding: '13px 15px', color: 'var(--fg-1)', fontFamily: 'var(--font-body)', fontSize: 'var(--t-body)', outline: 'none',
  };

  function ContactPage({ go }) {
    const root = useReveal();
    const [reason, setReason] = useState(REASONS[0]);
    const [sent, setSent] = useState(false);

    return (
      <div ref={root}>
        <section className="tf-section--tight tf-section">
          <div className="tf-wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 'clamp(32px,6vw,80px)', alignItems: 'start' }}>
            {/* left: invitation + details */}
            <div>
              <Eyebrow>Contact us</Eyebrow>
              <h1 className="tf-h1" style={{ margin: '0 0 16px' }}>Let's talk fire.</h1>
              <p className="tf-lead" style={{ maxWidth: 420 }}>Tell us what you want to cook and where. We'll get back to you within 2 working days with advice and a quote.</p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 36 }}>
                {[
                  { icon: 'mapPin', t: 'Our workshop', d: 'Belgaum (Belagavi), Karnataka, India' },
                  { icon: 'phone', t: 'Call us', d: '+91 98450 00000' },
                  { icon: 'mail', t: 'Email us', d: 'hello@terrafornoovens.com' },
                  { icon: 'clock', t: 'Working hours', d: 'Mon–Sat, 9am – 6pm IST' },
                ].map((c) => (
                  <div key={c.t} style={{ display: 'flex', gap: 16, alignItems: 'center', padding: '16px 0', borderBottom: '1px solid var(--border)' }}>
                    <span style={{ width: 44, height: 44, borderRadius: '50%', flex: 'none', display: 'grid', placeItems: 'center', background: 'color-mix(in srgb, var(--accent) 12%, transparent)', color: 'var(--accent)' }}><Icon name={c.icon} size={20} /></span>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 'var(--t-sm)' }}>{c.t}</div>
                      <div className="tf-small">{c.d}</div>
                    </div>
                  </div>
                ))}
              </div>

              <Photo tone="clay" label="Terraforno workshop · Belgaum" icon="mapPin" style={{ aspectRatio: '16/9', borderRadius: 'var(--r-lg)', marginTop: 28 }} grain={false} />

              {/* delivery note */}
              <div style={{ marginTop: 20, padding: '16px 18px', background: 'color-mix(in srgb, var(--accent) 8%, transparent)', borderRadius: 'var(--r-md)', border: '1px solid color-mix(in srgb, var(--accent) 25%, transparent)' }}>
                <h4 className="tf-h4" style={{ margin: '0 0 6px', fontSize: 'var(--t-sm)' }}>Delivering across India</h4>
                <p className="tf-small" style={{ margin: 0 }}>We ship and install the Verona and Napoli anywhere in India. Contact us for a quote including delivery and installation to your location.</p>
              </div>
            </div>

            {/* right: form card */}
            <div className="tf-card" style={{ padding: 'clamp(24px,3vw,40px)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '40px 12px' }}>
                  <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'color-mix(in srgb, var(--accent) 16%, transparent)', display: 'grid', placeItems: 'center', margin: '0 auto 20px', color: 'var(--accent)' }}><Icon name="flame" size={30} /></span>
                  <h3 className="tf-h3" style={{ margin: '0 0 8px' }}>Your message is in.</h3>
                  <p className="tf-body" style={{ maxWidth: 320, margin: '0 auto 22px' }}>We'll be in touch within 2 working days. In the meantime, explore the ovens.</p>
                  <TFButton variant="outline" onClick={() => { setSent(false); go('product'); }} arrow>Browse the ovens</TFButton>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                  <h2 className="tf-h3" style={{ margin: 0 }}>Send us a message</h2>
                  <Field label="What's the enquiry about?">
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                      {REASONS.map((r) => (
                        <button type="button" key={r} onClick={() => setReason(r)}
                          style={{ cursor: 'pointer', padding: '9px 15px', borderRadius: 'var(--r-pill)', fontSize: 'var(--t-sm)', fontWeight: 600, fontFamily: 'var(--font-body)', whiteSpace: 'nowrap',
                            border: '1.5px solid ' + (reason === r ? 'var(--accent)' : 'var(--border-strong)'),
                            background: reason === r ? 'var(--accent)' : 'transparent', color: reason === r ? 'var(--accent-fg)' : 'var(--fg-2)' }}>{r}</button>
                      ))}
                    </div>
                  </Field>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <Field label="First name"><input style={inputStyle} required placeholder="Raj" /></Field>
                    <Field label="Last name"><input style={inputStyle} required placeholder="Kumar" /></Field>
                  </div>
                  <Field label="Email"><input type="email" style={inputStyle} required placeholder="raj@kitchen.com" /></Field>
                  <Field label="Phone (optional)"><input type="tel" style={inputStyle} placeholder="+91 98450 00000" /></Field>
                  <Field label="City / location"><input style={inputStyle} required placeholder="Bengaluru, Karnataka" /></Field>
                  <Field label="Tell us more">
                    <textarea rows={4} style={{ ...inputStyle, resize: 'vertical' }} placeholder="I'm interested in the Verona for my restaurant. We seat 60 covers and plan to do wood-fired pizza and bread…" />
                  </Field>
                  <TFButton type="submit" variant="primary" size="lg" block arrow>Send message</TFButton>
                  <p className="tf-small" style={{ textAlign: 'center', margin: 0 }}>We read every message and respond personally.</p>
                </form>
              )}
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.ContactPage = ContactPage;
})();