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

function InvestorFit() {
  const { isMobile, isTablet } = marketingMoreSite.useViewport();
  const fits = [
    {
      title: 'First-time investors',
      body: 'See if your first rental actually cashflows before you inherit someone else\'s deferred maintenance.',
      detail: 'Plain-English verdicts, not finance-speak.',
    },
    {
      title: 'Small portfolio owners',
      body: 'Compare deals faster and see where financing, insurance, or management is dragging returns.',
      detail: 'Built for 1 to 20 doors, not institutional underwriting teams.',
    },
    {
      title: 'Out-of-state buyers',
      body: 'Make a go or no-go call without knowing every local vendor before you start.',
      detail: 'Action cards connect analysis to inspection, insurance, and PM options.',
    },
  ];

  return (
    <section id="for-investors" style={{ padding: isMobile ? '56px 20px' : '80px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: isTablet ? 'column' : 'row', gap: 28, alignItems: 'flex-end', marginBottom: 36 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>For investors</div>
            <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' }}>
              Built for people who want <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>clarity before commitment.</span>
            </h2>
          </div>
          <p style={{ flex: 1, maxWidth: 420, margin: 0, fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)' }}>
            Propbee is strongest when you need a fast verdict, a realistic downside view, and a next step you can actually take the same day.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : 'repeat(3, minmax(0, 1fr))', gap: 20 }}>
          {fits.map((fit) => (
            <div key={fit.title} style={{ background: '#fff', border: '1px solid var(--hairline)', borderRadius: 16, padding: 24, boxShadow: 'var(--shadow-sm)' }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--paper)', border: '1px solid var(--hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand-600)', marginBottom: 18 }}>
                <i data-lucide="briefcase-business" style={{ width: 18, height: 18 }}/>
              </div>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, color: 'var(--ink)', margin: '0 0 10px' }}>{fit.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{fit.body}</p>
              <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>{fit.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesTeaser() {
  const { isMobile, isTablet } = marketingMoreSite.useViewport();
  const services = [
    ['shield-check', 'Inspection', 'Catch maintenance risk before it destroys your year-one margin.', marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'service-inspection')],
    ['umbrella', 'Insurance', 'Compare landlord coverage without shopping three sites yourself.', marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'service-insurance')],
    ['key-round', 'Management', 'See what self-managing versus hiring a PM really does to cashflow.', marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'service-management')],
    ['banknote', 'Refinance', 'Find out whether rate relief is the fastest path to a better ROI.', marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'service-refinance')],
  ];

  return (
    <section id="services" style={{ padding: isMobile ? '56px 20px' : '80px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 32, maxWidth: 680 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Services</div>
          <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' }}>
            When a deal is close, we show the moves that <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>actually change the outcome.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))', gap: 16 }}>
          {services.map(([icon, title, body, href]) => (
            <a key={title} href={href} style={{ background: '#fff', border: '1px solid var(--hairline)', borderRadius: 16, padding: 20, textDecoration: 'none', color: 'inherit', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--paper)', border: '1px solid var(--hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' }}>
                <i data-lucide={icon} style={{ width: 18, height: 18 }}/>
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 18, color: 'var(--ink)' }}>{title}</div>
              <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)' }}>{body}</p>
              <div style={{ marginTop: 'auto', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--brand-600)' }}>Open in app -&gt;</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { isMobile, isTablet } = marketingMoreSite.useViewport();
  const plans = [
    ['Free', '$0', 'Analyze your first 3 deals', ['Live ROI and cashflow', '5-year projection', 'Service recommendations'], marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'deal-inputs')],
    ['Starter', '$29/mo', 'For active first-time investors', ['Unlimited deal analysis', 'Saved deals', 'Sharable deal links'], marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'saved-deals')],
    ['Pro', '$99/mo', 'For small operators and agents', ['Portfolio workflows', 'Team access', 'Priority lender and PM quotes'], marketingMoreSite.buildHref(marketingMoreSite.paths.app, 'services')],
  ];

  return (
    <section id="pricing" style={{ padding: isMobile ? '56px 20px' : '88px 32px', background: 'var(--paper-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 32, maxWidth: 680 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Pricing</div>
          <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' }}>
            Start free. Pay only when you want <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>more volume and memory.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : 'repeat(3, minmax(0, 1fr))', gap: 16 }}>
          {plans.map(([name, price, subtitle, features, href], index) => (
            <div key={name} style={{ background: '#fff', border: index === 1 ? '1px solid var(--brand-200)' : '1px solid var(--hairline)', borderRadius: 18, padding: 24, boxShadow: index === 1 ? 'var(--shadow-md)' : 'var(--shadow-sm)', position: 'relative' }}>
              {index === 1 && (
                <div style={{ position: 'absolute', top: 18, right: 18, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, color: 'var(--brand-700)', background: 'var(--brand-50)', border: '1px solid var(--brand-100)', borderRadius: 999, padding: '4px 8px' }}>
                  Most popular
                </div>
              )}
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{name}</div>
              <div style={{ marginTop: 8, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 36, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--ink)' }}>{price}</div>
              <p style={{ margin: '12px 0 0', fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)' }}>{subtitle}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {features.map((feature) => (
                  <li key={feature} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <i data-lucide="check" style={{ width: 16, height: 16, color: 'var(--good)', marginTop: 2, flexShrink: 0 }}/>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>{feature}</span>
                  </li>
                ))}
              </ul>
              <a href={href} style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '100%', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, background: index === 0 ? 'var(--paper)' : 'var(--brand-500)', color: index === 0 ? 'var(--ink)' : '#fff', borderRadius: 10, padding: '12px 16px', textDecoration: 'none', border: index === 0 ? '1px solid var(--hairline)' : 'none' }}>
                Open {name.toLowerCase()} -&gt;
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.InvestorFit = InvestorFit;
window.ServicesTeaser = ServicesTeaser;
window.Pricing = Pricing;