// FastFund website — Contact page
function Contact({ onApply }) {
  const { Button, Field, Select } = window.CapFrontDesignSystem_019e08;
  const { mobile } = window.useBreakpoint();
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const info = [
    { icon: 'phone', label: 'Call us', value: '855-555-0100', sub: 'Mon–Fri, 9am–7pm ET' },
    { icon: 'mail', label: 'Email', value: 'info@fastfundllc.com', sub: 'We reply within one business day' },
    { icon: 'clock', label: 'Funding hours', value: 'Approvals in as little as 4 hrs', sub: 'Same-day pre-qualification' },
  ];
  const offices = [
    { city: 'New York, NY', addr: '1345 Avenue of the Americas, Suite 2100', tag: 'Headquarters', icon: 'building-2' },
    { city: 'Austin, TX', addr: '401 Congress Ave, Suite 1540', tag: 'Regional office', icon: 'building' },
    { city: 'Miami, FL', addr: '1221 Brickell Ave, Suite 900', tag: 'Regional office', icon: 'building' },
    { city: 'Salt Lake City, UT', addr: '222 S Main St, Suite 500', tag: 'Regional office', icon: 'building' },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px var(--gutter) 48px' }}>
          <div className="cf-overline">Contact</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 34 : 44, letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: '8px 0 10px' }}>
            Talk to a funding expert
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: mobile ? 16 : 18, lineHeight: 1.55, color: 'var(--text-muted)', maxWidth: 600, margin: 0 }}>
            Questions about a product, a live application, or partnering with us? A dedicated relationship manager is ready to help — no bots, no runaround.
          </p>
        </div>
      </section>

      {/* Form + info */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '56px var(--gutter)', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 0.9fr', gap: mobile ? 'var(--space-8)' : 'var(--space-12)', alignItems: 'start' }}>
        {/* Form */}
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-2xl)', boxShadow: 'var(--shadow-sm)', padding: mobile ? 'var(--space-6)' : 'var(--space-8)' }}>
          {!sent ? (
            <React.Fragment>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--text-strong)', marginBottom: 'var(--space-6)' }}>Send us a message</div>
              <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 'var(--space-4)' }}>
                <Field label="Full name" placeholder="Jordan Diaz" />
                <Field label="Business name" placeholder="Acme Retail LLC" />
                <Field label="Email" type="email" placeholder="you@business.com" />
                <Field label="Phone" placeholder="(555) 123-4567" />
              </div>
              <div style={{ marginTop: 'var(--space-4)' }}>
                <Select label="How can we help?" options={['I have a question about a product', 'I have a live application', 'I want to partner with FastFund', 'Press / media', 'Something else']} />
              </div>
              <div style={{ marginTop: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label htmlFor="cf-msg" style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>Message</label>
                <textarea id="cf-msg" rows="4" placeholder="Tell us a bit about what you need…" style={{
                  border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '12px 14px',
                  fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)', resize: 'vertical', outline: 'none', background: 'var(--surface-card)',
                }}></textarea>
              </div>
              <div style={{ marginTop: 'var(--space-6)', display: 'flex', alignItems: 'center', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
                <Button variant="accent" size="lg" onClick={() => setSent(true)} iconRight={<i data-lucide="send" style={{ width: 17, height: 17 }}></i>}>Send message</Button>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>Or call <strong style={{ color: 'var(--text-strong)' }}>855-555-0100</strong></span>
              </div>
            </React.Fragment>
          ) : (
            <div style={{ textAlign: 'center', padding: 'var(--space-10) var(--space-4)' }}>
              <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--status-success-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto var(--space-5)' }}>
                <i data-lucide="check" style={{ width: 30, height: 30, color: 'var(--green-600)' }}></i>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--text-strong)', marginBottom: 8 }}>Message sent</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-muted)', maxWidth: 340, margin: '0 auto var(--space-6)' }}>Thanks for reaching out. A relationship manager will get back to you within one business day.</div>
              <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
            </div>
          )}
        </div>

        {/* Info column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            {info.map((it) => (
              <div key={it.label} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'flex-start', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)' }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--surface-brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--violet-600)', flexShrink: 0 }}>
                  <i data-lucide={it.icon} style={{ width: 21, height: 21 }}></i>
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{it.label}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--text-strong)', margin: '3px 0 2px' }}>{it.value}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{it.sub}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ background: 'var(--gradient-ink)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)' }}>
            <div className="cf-overline" style={{ color: 'var(--teal-300)', marginBottom: 'var(--space-4)' }}>Our offices</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              {offices.map((o) => (
                <div key={o.city} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <span style={{ width: 38, height: 38, borderRadius: 'var(--radius-md)', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--teal-300)', flexShrink: 0 }}>
                    <i data-lucide={o.icon} style={{ width: 19, height: 19 }}></i>
                  </span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: '#fff' }}>{o.city}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--neutral-400)' }}>{o.addr}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--teal-300)', marginTop: 3 }}>{o.tag}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Apply CTA band */}
      <section style={{ background: 'var(--surface-page)', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '48px var(--gutter)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--text-strong)', marginBottom: 4 }}>Ready to skip ahead and just apply?</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-muted)' }}>Free to apply · No credit impact · Offers in as little as 4 hours</div>
          </div>
          <Button variant="primary" size="lg" onClick={onApply} iconRight={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>Start my application</Button>
        </div>
      </section>
    </div>
  );
}
window.Contact = Contact;