// Landing page - personalized by ?for= param

function Landing({ prospectSlug, onEnter, onOpenCapabilities }) {
  const prospect = PROSPECTS[prospectSlug] || PROSPECTS['alliance-climate-control'];
  const trade = TRADES[prospect.trade];
  const [revealed, setRevealed] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setRevealed(true), 80); return () => clearTimeout(t); }, []);

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--paper)',
      padding: '32px 40px 60px', boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Top nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 64 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, background: 'var(--ink)', borderRadius: 7, display: 'grid', placeItems: 'center' }}>
            <div style={{ width: 10, height: 10, border: '2px solid var(--paper)', borderRadius: 2, transform: 'rotate(45deg)' }} />
          </div>
          <span style={{ fontWeight: 600, fontSize: 15, letterSpacing: -0.3 }}>TradesFlow</span>
          <Chip tone="ghost" style={{ marginLeft: 4 }}>demo</Chip>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <Btn variant="ghost" size="sm" onClick={onOpenCapabilities}>What I can build</Btn>
          <Btn variant="ghost" size="sm" icon="mail" onClick={() => window.location.href = 'mailto:ankithc3@gmail.com?subject=Saw%20the%20' + encodeURIComponent(prospect.business) + '%20demo'}>ankithc3@gmail.com</Btn>
        </div>
      </div>

      {/* Hero */}
      <div style={{ maxWidth: 980, margin: '0 auto', width: '100%', flex: 1 }}>
        <div style={{
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1)',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '5px 10px 5px 8px', borderRadius: 999,
            background: 'var(--accent-tint)', border: '1px solid var(--accent-border)',
            color: 'var(--accent-ink)', fontSize: 12, fontFamily: 'var(--mono)',
            marginBottom: 28,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent-deep)' }} />
            BUILT FOR {prospect.business.toUpperCase()} · {trade.longLabel.toUpperCase()}
          </div>

          <h1 style={{
            fontFamily: 'var(--display)', fontWeight: 400,
            fontSize: 'clamp(40px, 5.4vw, 72px)', lineHeight: 1.04,
            letterSpacing: -1.2, margin: '0 0 32px', color: 'var(--ink)',
            textWrap: 'balance',
          }}>
            Hi {prospect.business} - <span style={{ fontStyle: 'italic', color: 'var(--ink-60)' }}>here's the demo I built for {trade.label.toLowerCase()} businesses like yours.</span>
          </h1>

          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink-70)', maxWidth: 640, margin: '0 0 12px', textWrap: 'pretty' }}>
            It's a working ops app with one feature at its core: <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>an AI that drafts itemized quotes from site-visit photos and notes</strong>. Not from a template. From the thing your tech actually saw.
          </p>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-60)', maxWidth: 640, margin: '0 0 40px' }}>
            {prospect.note}
          </p>

          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginBottom: 64 }}>
            <Btn variant="primary" size="lg" iconRight="arrow-right" onClick={onEnter}>
              Tour the demo →
            </Btn>
            <Btn variant="ghost" size="lg" onClick={onOpenCapabilities}>What I can build →</Btn>
            <span style={{ fontSize: 12, color: 'var(--ink-50)', fontFamily: 'var(--mono)', marginLeft: 8 }}>
              90 seconds · no signup · dummy data
            </span>
          </div>

          {/* Trust row */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            padding: '24px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
          }}>
            {[
              { n: '12s', l: 'AI drafts a quote' },
              { n: '7', l: 'trades seeded' },
              { n: 'ex-GST', l: 'AUD pricing' },
              { n: '1×', l: 'paid. you own the code.' },
            ].map((s, i) => (
              <div key={i} style={{ paddingLeft: i ? 24 : 0, borderLeft: i ? '1px solid var(--border)' : 'none' }}>
                <div style={{ fontFamily: 'var(--display)', fontSize: 28, lineHeight: 1.1, letterSpacing: -0.5 }}>{s.n}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 4, fontFamily: 'var(--mono)', letterSpacing: 0.3 }}>{s.l.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Preview card */}
        <div style={{
          marginTop: 56,
          border: '1px solid var(--border)', borderRadius: 14, overflow: 'hidden',
          background: 'var(--surface)', boxShadow: '0 1px 2px rgba(20,18,12,0.03), 0 24px 60px -24px rgba(20,18,12,0.15)',
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(24px)',
          transition: 'opacity 700ms ease 200ms, transform 700ms cubic-bezier(.2,.8,.2,1) 200ms',
        }}>
          <div style={{
            padding: '10px 14px', borderBottom: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)',
          }}>
            <div style={{ display: 'flex', gap: 5 }}>
              {['#E5B4AB', '#E5D3A0', '#B8CFA3'].map(c => <div key={c} style={{ width: 10, height: 10, borderRadius: 5, background: c }}/>)}
            </div>
            <div style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-60)' }}>
              tradesflow-demo.pages.dev/?for={prospect.slug}
            </div>
          </div>
          <div style={{ height: 300, position: 'relative', background: 'linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%)' }}>
            <PreviewMini trade={trade} />
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', background: 'linear-gradient(180deg, transparent 0%, rgba(245,242,236,0.0) 50%, var(--paper) 100%)' }} />
            <button onClick={onEnter} style={{
              position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
              padding: '12px 24px', borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)',
              border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
              boxShadow: '0 6px 20px rgba(20,18,12,0.25)',
            }}>
              <Icon name="play" size={12} /> Click in - the pipeline for a {trade.label.toLowerCase()} shop
            </button>
          </div>
        </div>

        {/* Footer */}
        <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--ink-50)', fontFamily: 'var(--mono)' }}>
          <div>This demo is pre-seeded with {trade.longLabel.toLowerCase()} jobs. No real data used.</div>
          <div>Built in Hyderabad · for {prospect.city}</div>
        </div>
      </div>
    </div>
  );
}

// Tiny preview of the pipeline inside the landing-page card
function PreviewMini({ trade }) {
  return (
    <div style={{ padding: 22, display: 'flex', gap: 10, height: '100%', overflow: 'hidden' }}>
      {['Enquiry', 'Site visit', 'Quoting', 'Approved'].map((label, i) => (
        <div key={label} style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-50)', textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 8 }}>
            {label} · {3 - i > 0 ? 3 - i : 1}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[0, 1].map(j => (
              <div key={j} style={{
                padding: 10, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 7,
                fontSize: 11, color: 'var(--ink-70)', lineHeight: 1.3,
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-50)', marginBottom: 2 }}>
                  J-10{47 - (i * 3 + j)}
                </div>
                <div style={{ fontWeight: 500, color: 'var(--ink)', fontSize: 11 }}>
                  {['Split AC install', 'HWS replace', 'Panel upgrade', 'Roof flash'][i]}
                </div>
                <div style={{ marginTop: 4, fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--ink-60)' }}>$2,840</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Landing });