// Winkz Designs 2026, CONTACT
(function () {
  const { useState } = React;
  const { Icon, Reveal, Eyebrow, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const SERVICES = ['Website creation', 'Website redesign + AI SEO', 'Brand development', 'Immersive build-out', 'Custom CRM software', 'AI support chat', 'AI voice agent', 'Automation audit', 'Google Workspace', 'Business verification', 'Not sure yet'];

  const fieldStyle = (focus) => ({
    width: '100%', padding: '13px 15px', borderRadius: 11, fontFamily: 'var(--font-body)', fontSize: 15,
    background: 'rgba(255,255,255,0.03)', color: 'var(--text-primary)', outline: 'none',
    border: '1px solid ' + (focus ? 'var(--winkz-cyan)' : 'rgba(255,255,255,0.12)'), transition: 'border .2s',
  });

  function Field({ label, children }) {
    return (
      <label style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
        {children}
      </label>
    );
  }

  function ContactForm() {
    const [f, setF] = useState(null);
    const [sent, setSent] = useState(false);
    const [sending, setSending] = useState(false);
    const [error, setError] = useState('');
    const [svc, setSvc] = useState('');
    const submit = async (e) => {
      e.preventDefault();
      setSending(true); setError('');
      const fd = new FormData(e.target);
      fd.append('access_key', '4068d183-b12e-4b59-a8cf-41d5eed37edc');
      fd.append('subject', 'New inquiry from winkzdesigns.com');
      try {
        const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: fd, headers: { Accept: 'application/json' } });
        const data = await res.json();
        if (data.success) { setSent(true); } else { setError('Something went wrong. Please email us directly.'); }
      } catch (err) { setError('Something went wrong. Please email us directly.'); }
      setSending(false);
    };
    if (sent) {
      return (
        <div style={{ padding: '48px 34px', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: GRAD, display: 'grid', placeItems: 'center', margin: '0 auto 20px', boxShadow: '0 0 40px rgba(45,227,234,0.4)' }}><Icon n="Check" s={30} color="#08080A" strokeWidth={2.5} /></div>
          <h3 style={{ fontSize: 26, margin: '0 0 10px' }}>Message sent</h3>
          <p style={{ fontSize: 16, color: 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 360, margin: '0 auto 22px' }}>Thanks, we'll be in touch within one business day to set up your free intro call.</p>
          <button onClick={() => { setSent(false); setSvc(''); }} style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--winkz-cyan)', background: 'none', border: '1px solid rgba(45,227,234,0.35)', padding: '10px 18px', borderRadius: 10, cursor: 'pointer' }}>Send another</button>
        </div>
      );
    }
    return (
      <form onSubmit={submit} style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="cf-row">
          <Field label="Name"><input name="name" required onFocus={() => setF('n')} onBlur={() => setF(null)} style={fieldStyle(f === 'n')} placeholder="Jane Doe" /></Field>
          <Field label="Email"><input name="email" required type="email" onFocus={() => setF('e')} onBlur={() => setF(null)} style={fieldStyle(f === 'e')} placeholder="jane@company.com" /></Field>
        </div>
        <Field label="What do you need?">
          <select name="service" value={svc} onChange={e => setSvc(e.target.value)} onFocus={() => setF('s')} onBlur={() => setF(null)} required style={{ ...fieldStyle(f === 's'), appearance: 'none', cursor: 'pointer', color: svc ? 'var(--text-primary)' : 'var(--text-muted)' }}>
            <option value="" disabled>Select a service…</option>
            {SERVICES.map(s => <option key={s} value={s} style={{ background: '#14141A' }}>{s}</option>)}
          </select>
        </Field>
        <Field label="Tell us about the project"><textarea name="message" onFocus={() => setF('m')} onBlur={() => setF(null)} rows={4} style={{ ...fieldStyle(f === 'm'), resize: 'vertical', minHeight: 96 }} placeholder="A few sentences on what you're building and your timeline." /></Field>
        {error && <p style={{ fontSize: 13.5, color: '#FF6B7A', margin: 0 }}>{error}</p>}
        <button type="submit" disabled={sending} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '14px 24px', borderRadius: 11, cursor: sending ? 'default' : 'pointer', opacity: sending ? 0.7 : 1, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: '#08080A', background: GRAD, border: 'none', boxShadow: '0 12px 30px -12px rgba(242,59,254,0.5)' }}>{sending ? 'Sending…' : 'Send message'} {!sending && <Icon n="Send" s={16} color="#08080A" />}</button>
      </form>
    );
  }

  function ContactPage() {
    const details = [
      ['Mail', 'Email', 'design@winkzdesigns.com'],
      ['MessageCircle', 'WhatsApp', '+1 (302) 932-3352'],
      ['MapPin', 'Location', 'Tampa, Florida · remote worldwide'],
      ['Clock', 'Response', 'Within one business day'],
    ];
    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 30 }}>
          <div style={{ maxWidth: 760 }}>
            <Reveal><Eyebrow>Contact</Eyebrow></Reveal>
            <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>Let's build <Grad>your vision.</Grad></h1></Reveal>
            <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 540 }}>Tell us what you're working on. Intro calls are 30 minutes, free, and useful even if we never work together.</p></Reveal>
          </div>
        </Section>

        <Section pad={30} style={{ paddingBottom: 90 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 24, alignItems: 'start' }} className="ct-grid">
            <Reveal>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {details.map((d, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 15, padding: '18px 20px', borderRadius: 14, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)' }}>
                    <span style={{ width: 44, height: 44, borderRadius: 11, background: 'rgba(45,227,234,0.12)', border: '1px solid rgba(45,227,234,0.24)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n={d[0]} s={20} color="#2DE3EA" /></span>
                    <div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 4 }}>{d[1]}</div><div style={{ fontSize: 15.5, fontWeight: 600 }}>{d[2]}</div></div>
                  </div>
                ))}
                <div style={{ padding: '22px 20px', borderRadius: 14, background: 'linear-gradient(150deg, rgba(242,59,254,0.1), rgba(45,227,234,0.06))', border: '1px solid rgba(255,255,255,0.1)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginBottom: 6 }}>No upfront cost</div>
                  <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>Discovery is free, you only pay once you're happy with each phase.</p>
                </div>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <div style={{ borderRadius: 20, padding: 1, background: 'linear-gradient(135deg, rgba(242,59,254,0.4), rgba(45,227,234,0.4))' }}>
                <div style={{ borderRadius: 19, background: 'linear-gradient(165deg,#111117,#0A0A0D)' }}><ContactForm /></div>
              </div>
            </Reveal>
          </div>
        </Section>

        <style>{`@media (max-width:900px){.ct-grid{grid-template-columns:1fr!important}.cf-row{grid-template-columns:1fr!important}}`}</style>
      </React.Fragment>
    );
  }

  window.ContactPage = ContactPage;
})();