const SERVICES_LIST = [
  'Website Creation', 'App Development', 'Social Media Management',
  'Graphic Design', 'AI Automation', 'System Development', 'Multiple / Not Sure',
];
const BUDGET_LIST = [
  'Under RM 3,000', 'RM 3,000 – 8,000', 'RM 8,000 – 20,000', 'RM 20,000+', "Let's discuss"
];

function Field({ label, required, children }) {
  return (
    <div className="field">
      <label className="field-label">
        {label} {required && <span style={{ color: 'var(--stellar-cyan)' }}>*</span>}
      </label>
      {children}
    </div>
  );
}

function CustomSelect({ value, onChange, options, placeholder }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);
  return (
    <div className={`select ${open ? 'open' : ''}`} ref={ref}>
      <button type="button" className="select-btn" onClick={() => setOpen(!open)}>
        <span className={value ? '' : 'placeholder'}>{value || placeholder}</span>
        <IconChevron size={16} />
      </button>
      {open && (
        <div className="select-menu">
          {options.map(o => (
            <button type="button" key={o} className={`select-opt ${value === o ? 'sel' : ''}`} onClick={() => { onChange(o); setOpen(false); }}>
              {o}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', service: '', budget: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  const waLink = `https://wa.me/94779533487?text=${encodeURIComponent("Hi Nexitura! I'm interested in a project. Can we discuss?")}`;

  return (
    <section id="contact" data-screen-label="06 Contact" style={{
      padding: 'clamp(80px, 10vw, 140px) 0',
      background: 'var(--space-void)',
    }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">≫ GET IN TOUCH</span>
          <h2>Let's Build Something Together</h2>
          <p>We'll reply within 24 hours. No commitment required.</p>
        </div>

        <div className="contact-grid">
          {/* LEFT */}
          <div className="contact-left reveal">
            <div className="contact-info-card">
              <h3 style={{
                fontFamily: 'Orbitron', fontSize: 20,
                color: 'var(--stardust-white)', marginBottom: 8, letterSpacing: '0.04em',
              }}>Direct Channels</h3>
              <p style={{
                fontFamily: 'Syne', fontSize: 14, lineHeight: 1.7,
                color: 'var(--asteroid-grey)', marginBottom: 26,
              }}>Reach us where you're comfortable. We answer fastest on WhatsApp.</p>

              <div className="ci-item">
                <div className="ci-icon"><IconMail size={20} /></div>
                <div>
                  <div className="ci-label">EMAIL</div>
                  <a href="mailto:nexitura@gmail.com" className="ci-val">nexitura@gmail.com</a>
                </div>
              </div>
              <div className="ci-item">
                <div className="ci-icon"><IconChat size={20} /></div>
                <div>
                  <div className="ci-label">WHATSAPP</div>
                  <a href="https://wa.me/94779533487" target="_blank" rel="noopener noreferrer" className="ci-val">+94 77 953 3487</a>
                </div>
              </div>
              <div className="ci-item">
                <div className="ci-icon"><IconPin size={20} /></div>
                <div>
                  <div className="ci-label">LOCATION</div>
                  <div className="ci-val">Worldwide · Remote-First</div>
                  <div style={{ fontFamily: 'Space Mono', fontSize: 11, color: 'var(--asteroid-grey)', marginTop: 4, letterSpacing: '0.1em' }}>HQ · KUALA LUMPUR, MY</div>
                </div>
              </div>

              <a className="wa-btn" href={waLink} target="_blank" rel="noopener noreferrer">
                <IconWhatsApp size={20} />
                <span>Chat on WhatsApp</span>
              </a>

              <div className="orbit-deco">
                <div className="od-ring od1"></div>
                <div className="od-ring od2"></div>
                <div className="od-ring od3"></div>
                <div className="od-core"></div>
              </div>

              <div style={{
                marginTop: 28,
                paddingTop: 20,
                borderTop: '1px solid rgba(0,200,224,0.1)',
                display: 'flex', gap: 12, alignItems: 'center',
              }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <div className="status-dot" />
                  <div className="status-dot d2" />
                  <div className="status-dot d3" />
                </div>
                <div style={{ fontFamily: 'Space Mono', fontSize: 11, color: 'var(--asteroid-grey)', letterSpacing: '0.16em' }}>
                  AVG. REPLY: <span style={{ color: 'var(--stellar-cyan)' }}>2H 14M</span>
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT */}
          <div className="contact-right reveal" data-delay="1">
            {!sent ? (
              <form className="contact-form" onSubmit={onSubmit}>
                <div className="form-head">
                  <div className="eyebrow">≫ INQUIRY FORM</div>
                  <div className="form-step">STEP 01 / 01</div>
                </div>
                <div className="form-row">
                  <Field label="Name" required>
                    <input type="text" value={form.name} onChange={set('name')} placeholder="Aria Tanaka" required />
                  </Field>
                  <Field label="Email" required>
                    <input type="email" value={form.email} onChange={set('email')} placeholder="aria@company.com" required />
                  </Field>
                </div>
                <Field label="Company">
                  <input type="text" value={form.company} onChange={set('company')} placeholder="Company name (optional)" />
                </Field>
                <Field label="Service Interested In" required>
                  <CustomSelect value={form.service} onChange={(v) => setForm({...form, service: v})} options={SERVICES_LIST} placeholder="Choose a service" />
                </Field>
                <Field label="Budget Range">
                  <CustomSelect value={form.budget} onChange={(v) => setForm({...form, budget: v})} options={BUDGET_LIST} placeholder="Optional — helps us scope" />
                </Field>
                <Field label="Message" required>
                  <textarea value={form.message} onChange={set('message')} placeholder="Tell us about your project — goals, timeline, anything we should know." rows={5} required />
                </Field>
                <button type="submit" className="submit-btn">
                  Send Message <IconArrowRight size={18} />
                </button>
                <div style={{
                  fontFamily: 'Space Mono', fontSize: 11,
                  color: 'var(--asteroid-grey)', letterSpacing: '0.12em',
                  textAlign: 'center', marginTop: 16,
                }}>
                  ENCRYPTED · NO MARKETING LISTS · ANSWERED PERSONALLY
                </div>
              </form>
            ) : (
              <div className="contact-form success">
                <div className="success-check">
                  <svg width="80" height="80" viewBox="0 0 80 80">
                    <circle cx="40" cy="40" r="36" fill="none" stroke="var(--stellar-cyan)" strokeWidth="2"
                      strokeDasharray="226" strokeDashoffset="226" style={{ animation: 'draw-circle 0.6s forwards' }} />
                    <path d="M24 42 L36 54 L58 30" fill="none" stroke="var(--stellar-cyan)" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"
                      strokeDasharray="60" strokeDashoffset="60" style={{ animation: 'draw-check 0.4s 0.5s forwards' }} />
                  </svg>
                </div>
                <h3 style={{
                  fontFamily: 'Orbitron', fontSize: 22,
                  color: 'var(--stellar-cyan)', marginTop: 24, marginBottom: 10,
                  letterSpacing: '0.02em',
                }}>Message received.</h3>
                <p style={{ fontFamily: 'Syne', fontSize: 16, color: 'var(--stardust-white)', marginBottom: 10 }}>
                  We'll be in touch within 24 hours.
                </p>
                <p style={{ fontFamily: 'Syne', fontSize: 14, color: 'var(--asteroid-grey)', lineHeight: 1.7, marginBottom: 24 }}>
                  In the meantime — feel free to drop us a WhatsApp for a faster reply, or browse our case studies above.
                </p>
                <button type="button" className="btn-ghost" onClick={() => { setForm({ name:'',email:'',company:'',service:'',budget:'',message:'' }); setSent(false); }}>
                  Send another
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .contact-grid {
          display: grid;
          grid-template-columns: 0.85fr 1.15fr;
          gap: 24px;
          align-items: stretch;
        }
        @media (max-width: 920px) {
          .contact-grid { grid-template-columns: 1fr; }
        }

        .contact-info-card {
          position: relative;
          overflow: hidden;
          height: 100%;
          background: rgba(10,14,26,0.85);
          border: 1px solid rgba(0,200,224,0.15);
          border-radius: 18px;
          padding: 36px 32px 32px;
          backdrop-filter: blur(10px);
        }
        .ci-item {
          display: flex; gap: 16px; align-items: flex-start;
          padding: 18px 0;
          border-bottom: 1px solid rgba(0,200,224,0.08);
        }
        .ci-item:last-of-type { border-bottom: none; }
        .ci-icon {
          flex-shrink: 0;
          width: 42px; height: 42px;
          border-radius: 10px;
          background: rgba(0,200,224,0.1);
          border: 1px solid rgba(0,200,224,0.2);
          display: flex; align-items: center; justify-content: center;
          color: var(--stellar-cyan);
        }
        .ci-label {
          font-family: 'Space Mono', monospace;
          font-size: 10px; letter-spacing: 0.24em;
          color: var(--asteroid-grey);
          margin-bottom: 4px;
        }
        .ci-val {
          font-family: 'Syne', sans-serif;
          font-size: 16px; font-weight: 500;
          color: var(--stardust-white);
          text-decoration: none;
        }
        a.ci-val:hover { color: var(--stellar-cyan); }

        .wa-btn {
          display: flex; align-items: center; justify-content: center; gap: 10px;
          margin-top: 24px;
          width: 100%;
          padding: 16px;
          background: #25D366;
          color: white;
          border-radius: 12px;
          font-family: 'Syne', sans-serif;
          font-weight: 700;
          font-size: 16px;
          text-decoration: none;
          transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
        }
        .wa-btn:hover {
          background: #1EB85D;
          transform: scale(1.02);
          box-shadow: 0 0 30px rgba(37,211,102,0.35);
        }

        .orbit-deco {
          position: absolute;
          right: -100px; top: -80px;
          width: 220px; height: 220px;
          pointer-events: none;
          opacity: 0.6;
        }
        .od-ring {
          position: absolute; inset: 0;
          border: 1px solid rgba(0,200,224,0.18);
          border-radius: 50%;
        }
        .od1 { animation: spin 20s linear infinite; }
        .od2 { inset: 24px; border-color: rgba(108,58,255,0.18); animation: spin 14s linear infinite reverse; }
        .od3 { inset: 50px; border-color: rgba(0,200,224,0.25); animation: spin 9s linear infinite; }
        .od-core {
          position: absolute; top: 50%; left: 50%;
          width: 6px; height: 6px;
          background: var(--stellar-cyan);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 16px var(--stellar-cyan);
        }
        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        .status-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: #3fdc8a;
          box-shadow: 0 0 10px #3fdc8a;
        }
        .status-dot.d2 { background: rgba(63,220,138,0.5); box-shadow: none; }
        .status-dot.d3 { background: rgba(63,220,138,0.2); box-shadow: none; }

        /* Form */
        .contact-form {
          height: 100%;
          background: rgba(10,14,26,0.6);
          border: 1px solid rgba(108,58,255,0.18);
          border-radius: 18px;
          padding: 36px 32px 32px;
          backdrop-filter: blur(10px);
        }
        .form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
        .form-step {
          font-family: 'Space Mono', monospace;
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--asteroid-grey);
        }
        .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
        .field { margin-bottom: 18px; }
        .field-label {
          display: block;
          font-family: 'Space Mono', monospace;
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--asteroid-grey);
          margin-bottom: 8px;
          text-transform: uppercase;
        }
        .contact-form input,
        .contact-form textarea,
        .select-btn {
          width: 100%;
          background: rgba(3,4,10,0.5);
          border: none;
          border-bottom: 1.5px solid rgba(0,200,224,0.2);
          padding: 12px 0;
          color: var(--stardust-white);
          font-family: 'Syne', sans-serif;
          font-size: 15px;
          transition: border-color 0.25s;
        }
        .contact-form input:focus,
        .contact-form textarea:focus,
        .select.open .select-btn,
        .select-btn:focus {
          outline: none;
          border-bottom-color: var(--stellar-cyan);
          box-shadow: 0 1px 0 var(--stellar-cyan);
        }
        .contact-form textarea {
          resize: vertical;
          min-height: 120px;
          font-family: inherit;
        }
        .contact-form input::placeholder, .contact-form textarea::placeholder {
          color: rgba(74,80,112,0.7);
        }

        .select { position: relative; }
        .select-btn {
          text-align: left;
          display: flex; align-items: center; justify-content: space-between;
          cursor: pointer;
          color: var(--stardust-white);
        }
        .select-btn .placeholder { color: rgba(74,80,112,0.7); }
        .select.open .select-btn svg { transform: rotate(180deg); }
        .select-btn svg { color: var(--stellar-cyan); transition: transform 0.25s; }
        .select-menu {
          position: absolute;
          top: calc(100% + 6px); left: 0; right: 0;
          background: var(--nebula-deep);
          border: 1px solid rgba(0,200,224,0.25);
          border-radius: 10px;
          padding: 6px;
          z-index: 10;
          box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0,200,224,0.1);
          max-height: 240px; overflow-y: auto;
        }
        .select-opt {
          display: block; width: 100%;
          text-align: left;
          padding: 10px 14px;
          font-family: 'Syne', sans-serif;
          font-size: 14px;
          color: var(--stardust-white);
          border-radius: 6px;
          background: transparent;
          cursor: pointer;
          transition: background 0.15s;
        }
        .select-opt:hover { background: rgba(0,200,224,0.08); color: var(--stellar-cyan); }
        .select-opt.sel { background: rgba(0,200,224,0.12); color: var(--stellar-cyan); }

        .submit-btn {
          margin-top: 12px;
          width: 100%;
          padding: 18px;
          background: linear-gradient(135deg, var(--stellar-cyan), var(--nova-purple));
          color: var(--space-void);
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          font-size: 16px;
          border-radius: 12px;
          display: flex; align-items: center; justify-content: center; gap: 10px;
          cursor: pointer;
          transition: transform 0.25s, box-shadow 0.25s;
        }
        .submit-btn:hover {
          transform: scale(1.02);
          box-shadow: 0 0 40px rgba(0,200,224,0.4), 0 0 80px rgba(108,58,255,0.18);
        }

        .contact-form.success {
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          text-align: center;
          min-height: 480px;
        }
        .success-check {
          padding: 12px;
          border-radius: 50%;
          background: rgba(0,200,224,0.05);
          border: 1px solid rgba(0,200,224,0.2);
        }
        @keyframes draw-circle { to { stroke-dashoffset: 0; } }
        @keyframes draw-check { to { stroke-dashoffset: 0; } }
      `}</style>
    </section>
  );
}

window.Contact = Contact;