/* global React */
const marketingHeroSite = window.RentLensSite;

function Hero() {
  const { isMobile, isTablet } = marketingHeroSite.useViewport();

  return (
    <section id="overview" style={{ padding: isMobile ? '52px 20px 48px' : isTablet ? '72px 24px 56px' : '80px 32px 64px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1.05fr 1fr', gap: isMobile ? 28 : 64, alignItems: 'center' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: 'var(--paper-2)', border: '1px solid var(--hairline)',
              padding: '6px 12px', borderRadius: 999,
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
              color: 'var(--ink-2)', marginBottom: 24,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brand-500)' }}/>
              Used on 42,000+ deals since 2023
            </div>
            <h1 style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: isMobile ? 56 : isTablet ? 60 : 68,
              lineHeight: 1.02, letterSpacing: '-0.035em', color: 'var(--ink)', margin: 0,
            }}>
              Is this property<br/>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontStyle: 'italic', color: 'var(--brand-600)' }}>actually</span> a good investment?
            </h1>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: isMobile ? 17 : 19, lineHeight: 1.5,
              color: 'var(--ink-2)', marginTop: 24, maxWidth: 480,
            }}>
              Analyze rental income, ROI, and 5-year returns in seconds. Then act on what we find - inspection, refinance, management - without leaving the page.
            </p>
            <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12, marginTop: 36, alignItems: isMobile ? 'stretch' : 'center' }}>
              <a href={marketingHeroSite.buildHref(marketingHeroSite.paths.app, 'deal-inputs')} style={{
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16,
                background: 'var(--brand-500)', color: '#fff', border: 'none',
                padding: '14px 22px', borderRadius: 12, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                textDecoration: 'none',
              }}>Analyze a property <span style={{ fontSize: 18 }}>-&gt;</span></a>
              <a href="#example-deal" style={{
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15,
                background: 'transparent', color: 'var(--ink-2)', border: 'none',
                padding: '14px 8px', cursor: 'pointer', textDecoration: 'none',
                textAlign: isMobile ? 'center' : 'left',
              }}>See an example deal</a>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>
              <span>Free, no card</span>
              <span>&middot;</span>
              <span>Results in &lt; 5 sec</span>
              <span>&middot;</span>
              <span>50 states</span>
            </div>
          </div>
          <DashboardPreview />
        </div>
      </div>
    </section>
  );
}

function DashboardPreview() {
  const { isMobile } = marketingHeroSite.useViewport();
  const inspectionHref = marketingHeroSite.buildHref(marketingHeroSite.paths.app, 'service-inspection');
  const refinanceHref = marketingHeroSite.buildHref(marketingHeroSite.paths.app, 'service-refinance');

  return (
    <div style={{
      background: '#fff', borderRadius: 20,
      boxShadow: '0 24px 60px -12px rgba(20,32,26,0.18), 0 8px 16px -4px rgba(20,32,26,0.08)',
      padding: isMobile ? 16 : 22, position: 'relative', minWidth: 0, overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--brand-500)' }}/>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-2)' }}>2418 Linden Ave &middot; Austin, TX</span>
        <span style={{
          marginLeft: 'auto', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
          background: '#E7F0E7', color: '#1A4420', padding: '3px 8px', borderRadius: 999,
        }}>Strong deal</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))', gap: 10, marginBottom: 16 }}>
        {[
          ['Net monthly', '+$340', 'var(--good)'],
          ['Annual ROI', '11.4%', 'var(--ink)'],
          ['Cash-on-cash', '8.7%', 'var(--ink)'],
        ].map(([label, value, color]) => (
          <div key={label} style={{ background: 'var(--paper)', borderRadius: 10, padding: '12px 14px' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 22, color, marginTop: 4, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{value}</div>
          </div>
        ))}
      </div>
      <MiniChart />
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 8, marginTop: 14 }}>
        <a href={inspectionHref} style={{ flex: 1, background: 'var(--brand-500)', color: '#fff', borderRadius: 8, padding: '10px 12px', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, textAlign: 'center', textDecoration: 'none' }}>Get inspection quote</a>
        <a href={refinanceHref} style={{ flex: 1, background: 'var(--paper-2)', color: 'var(--ink)', borderRadius: 8, padding: '10px 12px', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, textAlign: 'center', textDecoration: 'none' }}>Refinance options</a>
      </div>
    </div>
  );
}

function MiniChart() {
  const points = [40, 56, 70, 88, 104, 122];
  const width = 380;
  const height = 120;
  const pad = 8;
  const max = 130;
  const stepX = (width - pad * 2) / (points.length - 1);
  const path = points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${pad + index * stepX} ${height - pad - (point / max) * (height - pad * 2)}`).join(' ');
  const area = `${path} L ${pad + (points.length - 1) * stepX} ${height - pad} L ${pad} ${height - pad} Z`;

  return (
    <div style={{ background: 'var(--paper)', borderRadius: 10, padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8, flexWrap: 'wrap', gap: 8 }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>5-year projection</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--good)' }}>+$84,200 equity</span>
      </div>
      <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2F7238" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#2F7238" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={area} fill="url(#g1)"/>
        <path d={path} fill="none" stroke="#2F7238" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        {points.map((point, index) => (
          <circle key={index} cx={pad + index * stepX} cy={height - pad - (point / 130) * (height - pad * 2)} r={index === points.length - 1 ? 4 : 2.5} fill="#2F7238"/>
        ))}
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)' }}>
        {['Y0', 'Y1', 'Y2', 'Y3', 'Y4', 'Y5'].map((year) => <span key={year}>{year}</span>)}
      </div>
    </div>
  );
}

window.Hero = Hero;
window.DashboardPreview = DashboardPreview;
window.MiniChart = MiniChart;