/* ActiveFit360 marketing — Contact page */
const NS_ct = window.Activefit360DesignSystem_d87766;

function ContactPage({ onBook }) {
  const { Card, Button, Badge } = NS_ct;
  const I = window.Icon;
  const c = window.AF_CONTACT;
  const rows = [
    ['map-pin', 'Visit us', [c.address1, c.address2]],
    ['phone', 'Call', [c.phone]],
    ['printer', 'Referral fax', [c.fax]],
    ['mail', 'Email', [c.email]],
  ];
  return (
    <section style={{ padding: '32px var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        {/* header */}
        <div style={{ textAlign: 'center', marginBottom: 'var(--space-12)' }}>
          <Badge variant="green" dot>We're here to help</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px,5vw,56px)', letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '16px auto 0', maxWidth: '16ch', lineHeight: 1.05 }}>
            Let's get you moving
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '14px auto 0', maxWidth: '46ch', lineHeight: 1.6 }}>
            Reach out with a question or book directly — we'll confirm your visit within one business day.
          </p>
        </div>

        {/* two-column layout */}
        <div className="af-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'start' }}>

          {/* left — info cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {rows.map(([icon, label, lines]) => (
              <Card key={label} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 'var(--space-5) var(--space-6)' }}>
                <span style={{ flex: '0 0 auto', width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I name={icon} size={22} /></span>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)', marginBottom: 4 }}>{label}</div>
                  {lines.map(l => <div key={l} style={{ fontSize: 15.5, fontWeight: 700, color: 'var(--ink-900)' }}>{l}</div>)}
                </div>
              </Card>
            ))}
            <div style={{ marginTop: 4 }}>
              <Button variant="primary" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Book an Appointment</Button>
            </div>
          </div>

          {/* right — Google Maps embed */}
          <div style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', border: '1px solid var(--border-soft)', height: 420 }}>
            <iframe
              title="ActiveFit360 location"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2972.4!2d-88.1459!3d41.7282!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e579b1f8a9c1d%3A0x1a2b3c4d5e6f7a8b!2s3420%20Lacrosse%20Ln%20%23121%2C%20Naperville%2C%20IL%2060564!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
              width="100%"
              height="100%"
              style={{ border: 0, display: 'block' }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContactPage });