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

function OutputPreview() {
  const { isMobile, isTablet } = marketingPreviewSite.useViewport();

  return (
    <section id="example-deal" style={{ padding: isMobile ? '48px 20px 64px' : '64px 32px 96px', background: 'var(--paper-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 40, maxWidth: 640 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>What you get</span>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 30 : 40, lineHeight: 1.05, letterSpacing: '-0.025em', color: 'var(--ink)', margin: '14px 0 0' }}>
            A verdict, <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>not a spreadsheet.</span>
          </h2>
        </div>
        <div style={{
          background: '#fff', borderRadius: 20, padding: isMobile ? 20 : 32,
          boxShadow: '0 12px 30px -8px rgba(20,32,26,0.14), 0 4px 8px -2px rgba(20,32,26,0.06)',
          display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1.4fr 1fr', gap: 32,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
              <i data-lucide="map-pin" style={{ width: 16, height: 16, color: 'var(--ink-3)' }}/>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)' }}>2418 Linden Ave &middot; Austin, TX 78704</span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, background: '#E7F0E7', color: '#1A4420', padding: '4px 10px', borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#2F7238' }}/>Strong deal &middot; Low risk
              </span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))', gap: 12, marginBottom: 18 }}>
              <FullMetric label="Net monthly profit" value="+$340" sub="vs $0 break-even" tone="good"/>
              <FullMetric label="Annual ROI" value="11.4%" sub="+1.8 vs market avg" tone="ink"/>
              <FullMetric label="Cash-on-cash" value="8.7%" sub="Year 1 estimate" tone="ink"/>
            </div>
            <BigChart/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Ways to improve this deal</div>
            <RecoCard icon="trending-down" title="Reduce maintenance reserve" impact="+$1,200/yr" cta="Get inspection quote" href={marketingPreviewSite.buildHref(marketingPreviewSite.paths.app, 'service-inspection')}/>
            <RecoCard icon="banknote" title="Refinance to 6.10%" impact="+$2,400/yr | saves $34k over 30y" cta="See lender quotes" href={marketingPreviewSite.buildHref(marketingPreviewSite.paths.app, 'service-refinance')}/>
            <RecoCard icon="key-round" title="Self-manage instead of 8% PM" impact="+$2,544/yr" cta="See PM alternatives" href={marketingPreviewSite.buildHref(marketingPreviewSite.paths.app, 'service-management')}/>
            <div style={{ marginTop: 8, padding: 14, background: 'var(--paper)', borderRadius: 12, border: '1px solid var(--hairline)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <i data-lucide="sparkles" style={{ width: 14, height: 14, color: 'var(--brand-600)' }}/>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>AI deal analysis</span>
              </div>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.45, color: 'var(--ink)', margin: 0 }}>
                "This property generates positive cashflow but financing costs are eating about 38% of NOI. Refinancing or negotiating $12k off purchase would push ROI past 13%."
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FullMetric({ label, value, sub, tone }) {
  const { isMobile } = marketingPreviewSite.useViewport();
  const color = tone === 'good' ? 'var(--good)' : tone === 'bad' ? 'var(--bad)' : 'var(--ink)';

  return (
    <div style={{ background: 'var(--paper)', borderRadius: 12, padding: '16px 18px' }}>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 24 : 28, color, marginTop: 6, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{value}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function BigChart() {
  const { isMobile } = marketingPreviewSite.useViewport();
  const cashflow = [40, 56, 70, 88, 104, 122];
  const equity = [20, 38, 58, 80, 104, 132];
  const width = isMobile ? 420 : 560;
  const height = isMobile ? 180 : 200;
  const pad = 16;
  const max = 140;
  const stepX = (width - pad * 2) / (cashflow.length - 1);
  const toPath = (series) => series.map((point, index) => `${index === 0 ? 'M' : 'L'} ${pad + index * stepX} ${height - pad - (point / max) * (height - pad * 2)}`).join(' ');

  return (
    <div style={{ background: 'var(--paper)', borderRadius: 12, padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10, 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>
        <div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--ink-2)', flexWrap: 'wrap' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 2, background: 'var(--brand-500)', borderRadius: 2 }}/>Cashflow</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 2, background: 'var(--amber-500)', borderRadius: 2 }}/>Equity</span>
        </div>
      </div>
      <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        <defs>
          <linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2F7238" stopOpacity="0.16"/>
            <stop offset="100%" stopColor="#2F7238" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((guide, index) => (
          <line key={index} x1={pad} x2={width - pad} y1={pad + guide * (height - pad * 2)} y2={pad + guide * (height - pad * 2)} stroke="#E4DED1" strokeDasharray="2 4"/>
        ))}
        <path d={`${toPath(cashflow)} L ${pad + (cashflow.length - 1) * stepX} ${height - pad} L ${pad} ${height - pad} Z`} fill="url(#g2)"/>
        <path d={toPath(cashflow)} fill="none" stroke="#2F7238" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
        <path d={toPath(equity)} fill="none" stroke="#D69A2C" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" strokeDasharray="4 3"/>
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, 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>
  );
}

function RecoCard({ icon, title, impact, cta, href }) {
  return (
    <div style={{ background: '#fff', border: '1px solid var(--hairline)', borderRadius: 12, padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--amber-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--amber-700)', flexShrink: 0 }}>
        <i data-lucide={icon} style={{ width: 18, height: 18 }}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink)' }}>{title}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--good)', marginTop: 2 }}>{impact}</div>
      </div>
      <a href={href} style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, color: 'var(--brand-600)', whiteSpace: 'nowrap', padding: '6px 4px', textDecoration: 'none' }}>{cta} -&gt;</a>
    </div>
  );
}

window.OutputPreview = OutputPreview;
window.FullMetric = FullMetric;
window.BigChart = BigChart;
window.RecoCard = RecoCard;