/* ================================================================
   v2-contact.jsx — ContactV2 wired to Zoho Forms
   Form action: https://forms.zohopublic.ca/ryanmorin1/form/Website/...
   After submit, Zoho redirects back with ?contact=sent#contact
   which triggers the thank-you state on mount.
================================================================ */

/* ── Contact info column ───────────────────────────────────── */
function ContactInfoV2() {
  return (
    <div style={{ display: 'flex', gap: 28 }}>
      <div style={{ width: 1, background: 'var(--rule-metal)',
        alignSelf: 'stretch', minHeight: 260, flexShrink: 0 }}></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
            letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
            Contact
          </span>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.9rem, 3vw, 2.6rem)', lineHeight: 1.08, color: 'var(--fg-1)' }}>
            Let's talk about the revenue system underneath your growth.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 380 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 15.5, lineHeight: 1.7, color: 'var(--fg-2)' }}>
            If your company has invested in AI, data, systems, or transformation but the return is not showing up in revenue, margin, adoption, speed, or capacity, the issue may not be effort.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 400,
            fontSize: 15.5, lineHeight: 1.7, color: 'var(--fg-1)' }}>
            It may be the revenue system.
          </p>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 15.5, lineHeight: 1.7, color: 'var(--fg-2)' }}>
            Ryan is open to executive roles, advisory mandates, and transformation work where ambition has outgrown the operating infrastructure underneath the business.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 4 }}>
          <CLineV2 icon="phone" href="tel:6472205095">647.220.5095</CLineV2>
          <CLineV2 icon="mail"  href="mailto:ryan@ryanmorin.ca">ryan@ryanmorin.ca</CLineV2>
          <CLineV2 icon="globe" href="https://ryanmorin.ca" ext>ryanmorin.ca</CLineV2>
          <CLineV2 icon="in"    href="https://linkedin.com/in/ryandmorin" ext>in/ryandmorin</CLineV2>
        </div>
      </div>
    </div>
  );
}

/* ── Form ──────────────────────────────────────────────────── */
function ContactFormV2() {
  const sent = new URLSearchParams(window.location.search).get('contact') === 'sent';

  // After Zoho redirect, React mounts after the browser tries to honor #contact.
  // Scroll manually once the component is ready.
  React.useEffect(() => {
    if (!sent) return;
    const timer = setTimeout(() => {
      const el = document.getElementById('contact');
      if (el) {
        const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }, 350);
    return () => clearTimeout(timer);
  }, [sent]);

  const redirectUrl = React.useMemo(() => {
    try {
      const base = window.location.href.split('?')[0].split('#')[0];
      return base + '?contact=sent#contact';
    } catch (e) { return ''; }
  }, []);

  if (sent) {
    return (
      <div style={{ padding: '52px 0', textAlign: 'center',
        display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
        <span className="rm-metal" style={{ fontFamily: 'var(--font-display)',
          fontWeight: 600, fontSize: 34 }}>Thank you.</span>
        <span style={{ fontFamily: 'var(--font-sans)', color: 'var(--fg-2)', fontSize: 15 }}>
          For taking the time to connect.
        </span>
      </div>
    );
  }

  return (
    <form
      action="https://forms.zohopublic.ca/ryanmorin1/form/Website/formperma/hYcQPI6UWxpILXEc9fMmTiOrB2DHQnmv7Fjpu4uyIBM/htmlRecords/submit"
      name="form" method="POST" acceptCharset="UTF-8" encType="multipart/form-data"
      style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
    >
      {/* Zoho required hidden fields */}
      <input type="hidden" name="zf_referrer_name" defaultValue="" />
      <input type="hidden" name="zf_redirect_url" defaultValue={redirectUrl} />
      <input type="hidden" name="zc_gad" defaultValue="" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <CFieldV2 label="First Name" name="SingleLine2" required />
        <CFieldV2 label="Last Name"  name="SingleLine1" required />
      </div>
      <CFieldV2 label="Email"   name="Email"      type="email" required />
      <CFieldV2 label="Company" name="SingleLine" required />
      <CFieldV2 label="What should Ryan know?" name="MultiLine" multiline
        placeholder="AI investment not showing return, stalled growth, margin leakage, broken commercial flow, adoption challenge, leadership bottleneck, transformation mandate, or executive opportunity." />

      <div style={{ marginTop: 4 }}>
        <ButtonV2 type="submit">Send a note</ButtonV2>
      </div>
    </form>
  );
}

/* ── Page shell ────────────────────────────────────────────── */
function ContactV2() {
  return (
    <section id="contact" className="rm-section" style={{ padding: '104px 56px' }}>
      <div className="contact-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'start', maxWidth: 1160, margin: '0 auto', width: '100%',
      }}>
        <div className="reveal">
          <ContactInfoV2 />
        </div>
        <div className="reveal d1" style={{
          background: 'var(--ink-raised)', borderRadius: 10,
          padding: '36px', boxShadow: 'var(--shadow-lg), var(--shadow-inset-top)',
        }}>
          <ContactFormV2 />
        </div>
      </div>
    </section>
  );
}

/* ── Contact line ──────────────────────────────────────────── */
function CLineV2({ icon, href, ext = false, children }) {
  const [h, setH] = React.useState(false);
  const isIn = icon === 'in';
  return (
    <a href={href} target={ext ? '_blank' : undefined} rel="noreferrer"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', alignItems: 'center', gap: 13, textDecoration: 'none',
        color: h ? 'var(--fg-1)' : 'var(--fg-2)', transition: 'color 150ms',
        fontFamily: 'var(--font-sans)', fontSize: 15 }}>
      {isIn ? (
        <span style={{ width: 18, height: 18, border: '1.5px solid', borderRadius: '50%',
          borderColor: h ? 'var(--silver-300)' : 'var(--silver-500)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 9, fontWeight: 700, color: h ? 'var(--silver-300)' : 'var(--silver-500)',
          transition: 'all 150ms', flexShrink: 0 }}>in</span>
      ) : (
        <i data-lucide={icon} style={{ width: 18, height: 18, strokeWidth: 1.5, flexShrink: 0 }}></i>
      )}
      {children}
    </a>
  );
}

/* ── Form field ────────────────────────────────────────────── */
function CFieldV2({ label, placeholder, value, onChange, required = false, multiline = false, name, type = 'text' }) {
  const [foc, setFoc] = React.useState(false);
  const controlled = value !== undefined;
  const fieldStyle = {
    fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-1)',
    background: 'var(--ground)', borderRadius: 3, padding: '12px 14px',
    border: '1px solid', borderColor: foc ? 'var(--silver-400)' : 'var(--ink-line)',
    outline: 'none', width: '100%', boxSizing: 'border-box',
    boxShadow: foc ? '0 0 0 3px rgba(188,190,192,.1)' : 'none',
    transition: 'all 160ms', resize: 'vertical',
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
        letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{label}</span>
      {multiline
        ? <textarea name={name} placeholder={placeholder}
            {...(controlled ? { value, onChange } : {})}
            required={required} rows={4}
            onFocus={() => setFoc(true)} onBlur={() => setFoc(false)} style={fieldStyle} />
        : <input type={type} name={name} placeholder={placeholder}
            {...(controlled ? { value, onChange } : {})}
            required={required}
            onFocus={() => setFoc(true)} onBlur={() => setFoc(false)} style={fieldStyle} />
      }
    </label>
  );
}

Object.assign(window, { ContactV2, ContactInfoV2, ContactFormV2, CLineV2, CFieldV2 });