/* Contact.jsx — #contact — contact details + working (fake) form */
const { useState: useStateC } = React;

function Field({ label, type = 'text', value, onChange, placeholder, textarea }) {
  const [focus, setFocus] = useStateC(false);
  const base = {
    width: '100%', font: '400 15px/1.5 var(--font-sans)', padding: '13px 15px',
    border: `1px solid ${focus ? 'var(--teal-500)' : 'var(--line-strong)'}`,
    boxShadow: focus ? 'var(--focus-ring)' : 'none',
    borderRadius: 10, color: 'var(--fg-1)', outline: 'none', background: 'var(--bg-surface)',
    transition: 'border-color .15s, box-shadow .15s', resize: 'none', fontFamily: 'var(--font-sans)',
  };
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', font: '500 13px/1 var(--font-sans)', color: 'var(--fg-1)', marginBottom: 8 }}>{label}</span>
      {textarea
        ? <textarea rows={4} value={value} onChange={onChange} placeholder={placeholder}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={base} />
        : <input type={type} value={value} onChange={onChange} placeholder={placeholder}
            onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={base} />}
    </label>
  );
}

const DETAILS = [
  ['mail', 'Email', 'info@taxtrail.ca'],
  ['globe', 'Website', 'taxtrail.ca'],
  ['briefcase', 'For Pros', 'taxaim.ca'],
  ['map-pin', 'Location', 'Ontario, Canada'],
];

function Contact() {
  const [form, setForm] = useStateC({ name: '', email: '', message: '' });
  const [sent, setSent] = useStateC(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <Section id="contact" tint={true}>
      <Container>
        <div className="contact-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'start',
        }}>
          <div>
            <Eyebrow>Contact</Eyebrow>
            <SectionHeading style={{ marginTop: 18 }}>Get in Touch</SectionHeading>
            <p style={{ font: 'var(--t-body)', color: 'var(--fg-2)', marginTop: 20, maxWidth: 460 }}>
              TaxTrail is in active development ahead of the 2027 filing season. Want early access, or
              have a question about filing your own return? Leave your details and we’ll be in touch.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 30 }}>
              {DETAILS.map(([icon, label, val]) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                  <span style={{ width: 38, height: 38, borderRadius: 9, background: 'var(--teal-50)', display: 'grid', placeItems: 'center', color: 'var(--teal-600)', flexShrink: 0 }}>
                    <Icon name={icon} size={18} />
                  </span>
                  <span style={{ font: '500 11px/1 var(--font-mono)', color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase', width: 76 }}>{label}</span>
                  <span style={{ font: '500 15px/1 var(--font-sans)', color: 'var(--fg-1)' }}>{val}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Form card */}
          <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 18, padding: 'clamp(24px, 3vw, 36px)', boxShadow: 'var(--shadow-md)' }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '36px 12px', gap: 14 }}>
                <span style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--teal-50)', display: 'grid', placeItems: 'center', color: 'var(--teal-600)' }}>
                  <Icon name="check" size={28} />
                </span>
                <h3 style={{ font: 'var(--t-h3)', margin: 0, color: 'var(--fg-1)' }}>Message sent</h3>
                <p style={{ font: 'var(--t-body)', color: 'var(--fg-2)', margin: 0 }}>Thanks, {form.name || 'there'}. We’ll be in touch at {form.email || 'your email'} shortly.</p>
                <button onClick={() => { setSent(false); setForm({ name: '', email: '', message: '' }); }}
                  style={{ marginTop: 6, background: 'none', border: 'none', color: 'var(--teal-600)', font: '600 14px/1 var(--font-sans)', cursor: 'pointer' }}>
                  Send another →
                </button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <Field label="Name" value={form.name} onChange={set('name')} placeholder="Alex Tremblay" />
                <Field label="Email" type="email" value={form.email} onChange={set('email')} placeholder="you@email.ca" />
                <Field label="Message" textarea value={form.message} onChange={set('message')} placeholder="Tell us a bit about your tax situation, or ask us anything…" />
                <Button onClick={submit} style={{ justifyContent: 'center', marginTop: 4 }} icon="arrow-right">Send Message</Button>
                <p style={{ font: 'var(--t-small)', color: 'var(--fg-3)', margin: 0, textAlign: 'center' }}>Or email <a href="mailto:info@taxtrail.ca" style={{ color: 'var(--teal-600)', textDecoration: 'none' }}>info@taxtrail.ca</a> directly.</p>
              </form>
            )}
          </div>
        </div>
      </Container>
    </Section>
  );
}

window.Contact = Contact;