/* global React */
const { useState } = React;
const marketingCtaSite = window.RentLensSite;

function CTA() {
  const [addr, setAddr] = useState('');
  const { isMobile } = marketingCtaSite.useViewport();

  function handleSubmit(e) {
    e.preventDefault();
    const nextAddress = addr.trim() || '2418 Linden Ave, Austin, TX 78704';
    window.location.href = marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'deal-inputs', { address: nextAddress });
  }

  return (
    <section id="try-address" style={{ padding: isMobile ? '56px 20px' : '96px 32px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 34 : 56, lineHeight: 1.05, letterSpacing: '-0.03em', color: 'var(--ink)', margin: 0 }}>
          Try it with a <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>property address.</span>
        </h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, color: 'var(--ink-2)', marginTop: 18 }}>
          No card. Free for the first three deals.
        </p>
        <form onSubmit={handleSubmit} style={{
          marginTop: 36, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 8,
          background: '#fff', borderRadius: 14, padding: 8,
          boxShadow: '0 12px 30px -8px rgba(20,32,26,0.14), 0 4px 8px -2px rgba(20,32,26,0.06)',
          border: '1px solid var(--hairline)', maxWidth: 580, margin: '36px auto 0',
        }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px' }}>
            <i data-lucide="map-pin" style={{ width: 18, height: 18, color: 'var(--ink-3)' }}/>
            <input
              value={addr}
              onChange={(e) => setAddr(e.target.value)}
              placeholder="2418 Linden Ave, Austin, TX"
              style={{
                flex: 1, border: 'none', outline: 'none', background: 'transparent',
                fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--ink)', padding: '14px 0',
              }}
            />
          </div>
          <button type="submit" style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15,
            background: 'var(--brand-500)', color: '#fff', border: 'none',
            padding: '12px 22px', borderRadius: 10, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>Analyze -&gt;</button>
        </form>
        <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 18, justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>
          <span>SOC 2 Type II</span><span>&middot;</span><span>50 states</span><span>&middot;</span><span>4.8 stars on G2</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { isMobile, isTablet } = marketingCtaSite.useViewport();
  const groups = [
    {
      title: 'Product',
      links: [
        ['Analyze', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'deal-inputs')],
        ['Saved deals', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'saved-deals')],
        ['Services', '#services'],
        ['Pricing', '#pricing'],
      ],
    },
    {
      title: 'Explore',
      links: [
        ['How it works', '#how-it-works'],
        ['For investors', '#for-investors'],
        ['Example deal', '#example-deal'],
        ['Try an address', '#try-address'],
      ],
    },
    {
      title: 'App',
      links: [
        ['Projection', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'projection')],
        ['Risk score', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'risk-panel')],
        ['AI analysis', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'ai-analysis')],
        ['Take action', marketingCtaSite.buildHref(marketingCtaSite.paths.app, 'services')],
      ],
    },
    {
      title: 'Design system',
      links: [
        ['Brand colors', '../../preview/colors-brand.html'],
        ['Buttons', '../../preview/components-buttons.html'],
        ['Marketing UI', '../marketing/index.html'],
        ['App UI', '../app/index.html'],
      ],
    },
  ];

  return (
    <footer style={{ padding: isMobile ? '56px 20px 32px' : '64px 32px 40px', background: 'var(--ink)', color: 'var(--paper)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : '1.4fr repeat(4, minmax(0, 1fr))', gap: 40 }}>
          <div>
            <a href="#top" style={{ display: 'inline-flex' }}>
              <img src="../../assets/logo-full-dark.svg" alt="Propbee" style={{ height: 28 }}/>
            </a>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: '#A3AEA7', marginTop: 16, maxWidth: 280, lineHeight: 1.5 }}>
              The decision engine for US rental property investors. Analyze, decide, act - same afternoon.
            </p>
          </div>
          {groups.map((group) => (
            <div key={group.title}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: '#A3AEA7', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>{group.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {group.links.map(([label, href]) => (
                  <li key={label}><a href={href} style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--paper)', textDecoration: 'none' }}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid #2A3530',
          display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
          flexDirection: isMobile ? 'column' : 'row', gap: 12, fontFamily: 'var(--font-mono)',
          fontSize: 11, color: '#A3AEA7',
        }}>
          <span>&copy; 2026 Propbee, Inc. All projections are estimates, not financial advice.</span>
          <span>SOC 2 Type II &middot; Made in Austin</span>
        </div>
      </div>
    </footer>
  );
}

window.CTA = CTA;
window.Footer = Footer;