// Home page — hero with fleet photo + 2 massive appointment buttons

const HomePage = ({ onNav, lang }) => {
  return (
    <main>
      {/* Hero with full-bleed fleet photo */}
      <section style={{
        position: 'relative',
        background: 'var(--steel-900)',
        color: '#fff',
        overflow: 'hidden',
        minHeight: 620,
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(assets/jmac-fleet-clean.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center 55%',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.35) 40%, rgba(13,17,23,0.92) 100%)',
        }}/>
        {/* motion streaks */}
        <svg viewBox="0 0 1280 600" preserveAspectRatio="none" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18, pointerEvents: 'none',
        }}>
          <g stroke="#7ea4dd" strokeWidth="1.5" fill="none">
            {Array.from({length: 18}, (_, i) => (
              <line key={i} x1={i * 70 - 200} y1={80 + i * 20} x2={i * 70 + 220} y2={80 + i * 20}/>
            ))}
          </g>
        </svg>

        <div style={{
          position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: '72px 28px 64px',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 12px', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 999,
            fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--amber-400)', marginBottom: 22,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--amber-400)' }}/>
            MA · NH · VT · RI · GA · FL
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
            fontSize: 'clamp(48px, 7.2vw, 96px)', lineHeight: 0.96,
            textTransform: 'uppercase', letterSpacing: '-0.015em',
            margin: 0, maxWidth: 980, color: '#fff',
            textShadow: '0 2px 24px rgba(0,0,0,0.4)',
          }}>
            {t('Asset recovery,', lang)}<br/>
            {t('done', lang)} <span style={{ color: 'var(--amber-400)' }}>{t('right.', lang)}</span>
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.86)',
            marginTop: 22, maxWidth: 640,
          }}>
            {t('JMAC is your trusted partner in collateral recovery — bonded, insured, and audit-ready. Schedule a redemption appointment below.', lang)}
          </p>

          {/* THE TWO MASSIVE BUTTONS */}
          <div style={{
            marginTop: 56,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 20,
            maxWidth: 920,
          }}>
            <AppointmentBigButton
              icon="car"
              eyebrow={t('Step 1', lang)}
              title={t('Vehicle / Property', lang)}
              subtitle={t('Redemption Appointment', lang)}
              hint={t('View rules, watch the how-to video, and book', lang)}
              accent="var(--amber-400)"
              ctaLabel={t('Book Now', lang)}
              ctaSolid={true}
              onClick={() => onNav('vehicle')}
            />
            <AppointmentBigButton
              icon="truck"
              eyebrow={t('Step 1', lang)}
              title={t('Transporter', lang)}
              subtitle={t('Pickup Appointment', lang)}
              hint={t('Watch the how-to video and book', lang)}
              accent="#7ea4dd"
              ctaLabel={t('Book Now', lang)}
              onClick={() => onNav('transporter')}
            />
          </div>
        </div>
        <HazardStripe height={6}/>
      </section>

      {/* What we recover strip */}
      <section style={{ background: 'var(--bg-page)', borderBottom: '1px solid var(--border-1)' }}>
        <div style={{
          maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: '40px 28px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap',
        }}>
          <div>
            <Eyebrow>{t('Asset classes', lang)}</Eyebrow>
            <div style={{ marginTop: 8, fontSize: 18, color: 'var(--fg-2)', fontWeight: 500 }}>
              {t('Vehicles · Motorcycles · Boats · Campers · Heavy equipment · Aircraft', lang)}
            </div>
          </div>
          <Button variant="ghost" onClick={() => onNav('services')}>
            {t('Explore services', lang)} <Icon name="arrow" size={14}/>
          </Button>
        </div>
      </section>

      {/* Stat row */}
      <section style={{ background: 'var(--blue-900)', color: '#fff' }}>
        <div style={{
          maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: '64px 28px',
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32,
        }}>
          {[
            { num: '10+', labelKey: 'Years partnered with major lenders' },
            { num: '6',   labelKey: 'States serviced' },
            { num: '100%',labelKey: 'CFPB & FDCPA compliant' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
                fontSize: 64, lineHeight: 1, color: 'var(--amber-400)',
                letterSpacing: '-0.02em',
              }}>
                {s.num}
              </div>
              <div style={{
                marginTop: 12, fontSize: 13, fontWeight: 600,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.85)',
              }}>
                {t(s.labelKey, lang)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Quick-pick services */}
      <Section>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>{t('What we do', lang)}</Eyebrow>
          <h2 style={{ marginTop: 14, fontSize: 'clamp(32px, 4vw, 48px)' }}>
            {t('Compliant recovery. Every asset class. Every time.', lang)}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {[
            { icon: 'car',     titleKey: 'Involuntary Repossessions', bodyKey: 'Highly trained agents, full compliance with the FDCPA and state self-help statutes.' },
            { icon: 'key',     titleKey: 'Voluntary Repossessions',   bodyKey: 'A trusted intermediary between lender and borrower. Flatbed transport, on-time pickups.' },
            { icon: 'shield',  titleKey: 'Impound Repossessions',     bodyKey: 'Fast action when fees are climbing. Direct coordination with impound lots and repair shops.' },
            { icon: 'file',    titleKey: 'Post-Recovery',             bodyKey: 'Detailed condition reports, secured personal property storage, paperless releases via ClearData.' },
            { icon: 'wrench',  titleKey: 'In-House Locksmith',        bodyKey: 'Fully mobile and in-facility. Faster turnaround. No third-party costs.' },
            { icon: 'search',  titleKey: 'Skip Tracing',              bodyKey: 'In-house tracing using top-tier software. Privacy-compliant, recovery-focused.' },
          ].map(s => (
            <div key={s.titleKey} style={{
              background: '#fff', border: '1px solid var(--border-1)',
              borderRadius: 'var(--radius-md)',
              padding: 28, display: 'flex', flexDirection: 'column', gap: 14,
              boxShadow: 'var(--shadow-1)',
              borderTop: '3px solid var(--blue-700)',
            }}>
              <Icon name={s.icon} size={28} color="var(--blue-700)"/>
              <h3 style={{ fontSize: 20 }}>{t(s.titleKey, lang)}</h3>
              <p style={{ color: 'var(--fg-2)', fontSize: 14.5 }}>{t(s.bodyKey, lang)}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, textAlign: 'center' }}>
          <Button variant="primary" size="lg" onClick={() => onNav('services')}>
            {t('See all services', lang)} <Icon name="arrow" size={14}/>
          </Button>
        </div>
      </Section>

      <AffiliateBand lang={lang}/>
    </main>
  );
};

const AppointmentBigButton = ({ icon, eyebrow, title, subtitle, hint, accent, ctaLabel, ctaSolid, onClick }) => {
  const [hover, setHover] = React.useState(false);
  const ctaText = ctaLabel || 'Book Now';
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        textAlign: 'left',
        background: hover ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.04)',
        border: `1px solid ${hover ? accent : 'rgba(255,255,255,0.18)'}`,
        borderRadius: 6,
        padding: '28px 28px 26px',
        cursor: 'pointer',
        color: '#fff',
        transition: 'all 240ms cubic-bezier(.2,.9,.1,1)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hover ? '0 16px 40px rgba(0,0,0,0.35)' : 'none',
        backdropFilter: 'blur(4px)',
        overflow: 'hidden',
      }}>
      {/* accent bar */}
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 4,
        background: accent,
      }}/>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 4,
          background: 'rgba(255,255,255,0.08)',
          display: 'grid', placeItems: 'center',
          border: `1px solid ${accent}`,
        }}>
          <Icon name={icon} size={28} color={accent}/>
        </div>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: accent,
        }}>
          {eyebrow}
        </div>
      </div>
      <div style={{
        marginTop: 22,
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
        fontSize: 'clamp(32px, 3.6vw, 46px)', lineHeight: 0.98,
        textTransform: 'uppercase', letterSpacing: '-0.01em',
        color: '#fff',
      }}>
        {title}
      </div>
      <div style={{
        marginTop: 6,
        fontSize: 14, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.6)',
      }}>
        {subtitle}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 18,
        borderTop: '1px solid rgba(255,255,255,0.12)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        flexWrap: 'wrap',
      }}>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{hint}</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: ctaSolid ? '12px 20px' : '11px 18px',
          borderRadius: 6,
          background: ctaSolid ? accent : 'transparent',
          border: ctaSolid ? `1px solid ${accent}` : `2px solid ${accent}`,
          color: ctaSolid ? 'var(--steel-900)' : accent,
          fontSize: 13, fontWeight: 800, letterSpacing: '0.12em',
          textTransform: 'uppercase',
          boxShadow: ctaSolid ? (hover ? '0 12px 28px rgba(255,184,28,0.35)' : '0 6px 16px rgba(255,184,28,0.25)') : 'none',
          transform: hover ? 'translateX(4px)' : 'translateX(0)',
          transition: 'transform 240ms, box-shadow 240ms',
          whiteSpace: 'nowrap',
        }}>
          {ctaText} <Icon name="arrow" size={16} color={ctaSolid ? 'var(--steel-900)' : accent}/>
        </span>
      </div>
    </button>
  );
};

Object.assign(window, { HomePage });