/* Hero — asymmetric 60/40, copy left, operational territory map right */
function Hero() {
  return (
    <section data-screen-label="01 Hero" style={{ background: 'white', position: 'relative' }}>
      <div className="container container--wide hero-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 7fr) minmax(0, 5fr)',
        gap: 80,
        alignItems: 'center',
        padding: 'clamp(72px, 9vw, 120px) 32px clamp(80px, 10vw, 140px)',
      }}>
        <div>
          <p className="eyebrow">Built for home service companies</p>
          <h1 className="h-display" style={{ marginBottom: 48 }}>
            One property management relationship can outlast decades of advertising.
          </h1>
          <p style={{
            fontFamily: 'var(--font-display)',
            fontSize: 22, fontWeight: 600,
            color: 'var(--pmhoa-blue)',
            letterSpacing: '-0.01em',
            margin: '0 0 28px',
          }}>
            Portfolios, not appointments.
          </p>
          <p className="lede" style={{ marginBottom: 36, maxWidth: '52ch' }}>
            Property managers route work to a small list of trusted vendors — for years,
            sometimes decades. PMHOA Pro builds the relationships that get you on those
            lists, in your territory. We do the outreach. You handle the work.
          </p>
          <CTAButton id="hero-cta" source="hero" />
        </div>

        <TerritoryMap />
      </div>

      {/* Verticals strip — full list with checkmark chips */}
      <div style={{
        borderTop: '1px solid var(--border)',
        background: 'var(--bg-subtle)',
      }}>
        <div className="container" style={{
          padding: 'clamp(36px, 4vw, 56px) 32px',
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'baseline',
            justifyContent: 'space-between',
            gap: 20,
            marginBottom: 24,
            flexWrap: 'wrap',
          }}>
            <div>
              <p className="eyebrow" style={{ marginBottom: 10 }}>Verticals we represent</p>
              <h3 style={{
                margin: 0,
                fontSize: 'clamp(22px, 2.2vw, 28px)',
                fontWeight: 800,
                letterSpacing: '-0.018em',
                lineHeight: 1.15,
              }}>
                200+ home service companies represented since 2020.
              </h3>
            </div>
            <span style={{
              fontSize: 13,
              color: 'var(--fg-subtle)',
              fontStyle: 'italic',
            }}>
              If your trade isn't listed, we likely still cover it. Ask.
            </span>
          </div>
          <VerticalsGrid />
        </div>
      </div>
    </section>
  );
}

function TrustItem({ children }) {
  return (
    <span style={{
      fontSize: 13,
      color: 'var(--fg-muted)',
      letterSpacing: '0.01em',
      fontWeight: 500,
    }}>{children}</span>
  );
}

/* VerticalsGrid — 24 trades shown as pill chips with checkmark icons.
   Grid layout flows across as many columns as fit, prioritizing scannability. */
function VerticalsGrid() {
  const trades = [
    'Roofing', 'HVAC', 'Plumbing', 'Electrical',
    'Painting', 'Landscaping', 'Pest Control', 'Pool & Spa',
    'Concrete', 'Janitorial', 'Fire & Water Damage', 'Tree Care',
    'Fencing', 'Garage Door', 'Window Cleaning', 'Flooring',
    'Drywall', 'Gutters', 'Irrigation', 'Asphalt Sealcoating',
    'Waterproofing', 'Fire Safety', 'Locksmith', 'Building Restoration',
  ];
  return (
    <ul style={{
      listStyle: 'none',
      margin: 0,
      padding: 0,
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
      gap: 8,
    }}>
      {trades.map((t) => (
        <li key={t} style={{
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          padding: '10px 14px',
          background: 'white',
          border: '1px solid var(--border)',
          borderRadius: 8,
          fontSize: 14,
          fontWeight: 600,
          letterSpacing: '-0.005em',
          color: 'var(--fg)',
        }}>
          <span aria-hidden="true" style={{
            width: 16, height: 16,
            borderRadius: 999,
            background: 'rgba(31,157,106,0.12)',
            color: 'var(--success)',
            display: 'grid', placeItems: 'center',
            flexShrink: 0,
          }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </span>
          <span>{t}</span>
        </li>
      ))}
    </ul>
  );
}

/* The reusable CTA module (form + button + microcopy) */
const HERO_AUDITS_BASE_URL = 'https://audits.pmhoa.pro';
function CTAModule({ id, theme }) {
  const [val, setVal] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    // Extract first 5-digit ZIP from any comma-separated input
    const z = (val.match(/\d{5}/) || [''])[0];
    if (!z) return;
    setLoading(true);
    try {
      if (typeof window.fbq === 'function') window.fbq('track', 'Lead', { content_name: 'territory_zip_start', zip: z });
      if (typeof window.gtag === 'function') window.gtag('event', 'territory_zip_start', { event_category: 'engagement', zip: z });
    } catch (err) { /* best-effort */ }
    // NOTE: audits.pmhoa.pro uses HashRouter; routes live at /#/<route>.
    const target = `${HERO_AUDITS_BASE_URL}/#/configure?startZip=${encodeURIComponent(z)}&utm_source=pmhoa.pro&utm_medium=homepage_hero`;
    setTimeout(() => { window.location.href = target; }, 350);
  };

  return (
    <form id={id} className="cta-form" onSubmit={submit} aria-label="Check your territory">
      <div className="cta-form__input-wrap">
        <label className="cta-form__label" htmlFor={(id || 'cta') + '-zip'}>
          Territory check
        </label>
        <input
          id={(id || 'cta') + '-zip'}
          className="cta-form__input"
          type="text"
          inputMode="numeric"
          placeholder="Enter your ZIP code(s) — e.g., 90210, 90211"
          value={val}
          onChange={(e) => setVal(e.target.value)}
          autoComplete="postal-code"
        />
      </div>
      <button type="submit" className="cta-form__btn" disabled={loading || !val.match(/\d{5}/)}>
        <span className="cta-form__btn-main">
          {loading ? 'Loading territory…' : 'Check Your Territory'}
        </span>
        <span className="cta-form__btn-sub">
          {loading ? 'One moment' : 'Enter Your ZIP Code'}
        </span>
      </button>
      <p className="cta-form__micro">Free territory check. 5 min to confirm fit.</p>
    </form>
  );
}

window.Hero = Hero;
window.CTAModule = CTAModule;