// Persona picker — landing tile screen

const PersonaPicker = ({ onPick }) => {
  const personaCopy = {
    lender: {
      tagline: 'Pre-lend charge & insurance verification',
      detail: 'Register marine finance against a vessel. Confirm no prior charges, insurance in force.',
      icon: 'pound',
    },
    insurer: {
      tagline: 'Duplicate cover, fraud & claims history',
      detail: 'API call at quote — or manual portal lookup. Cross-market visibility before binding.',
      icon: 'shield',
    },
    broker: {
      tagline: 'Pre-listing clean-title check',
      detail: 'Verify a vessel is free of encumbrances. List with the MarineCheck Verified badge.',
      icon: 'doc',
    },
    marina: {
      tagline: 'Berth-grant verification',
      detail: 'Scan a paper document or enter HIN. Insurance, ownership, stolen vessel alerts.',
      icon: 'scan',
    },
    consumer: {
      tagline: 'Buyer report · £22',
      detail: 'Public-facing check. Full vessel history before committing money.',
      icon: 'user',
    },
  };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--demo-bg)', color: 'var(--demo-fg)' }}>
      {/* Demo bar (matches PersonaShell's DemoBar) */}
      <div style={{
        borderBottom: '1px solid var(--demo-line)',
        padding: '10px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'var(--demo-bg-2)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--demo-fg)' }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--demo-accent)' }} />
            <span style={{ fontSize: 12.5, fontWeight: 500 }}>MarineCheck · Demo prototype</span>
          </span>
          <span style={{ color: 'var(--demo-fg-3)', fontSize: 12 }}>·</span>
          <span className="mono" style={{ fontSize: 11.5, color: 'var(--demo-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>5 user journeys</span>
        </div>
        <span className="pill" style={{ background: 'oklch(0.27 0.012 250)', color: 'var(--demo-fg-2)', borderColor: 'var(--demo-line)', fontSize: 11 }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--demo-accent)' }} />
          v0.4 · mock data
        </span>
      </div>

      <Container style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div style={{ maxWidth: 760, marginBottom: 40 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--demo-fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>
            Pick a workspace to walk through
          </div>
          <h1 style={{
            fontSize: 40, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.05,
            margin: 0, color: 'var(--demo-fg)', textWrap: 'balance',
          }}>
            Five journeys. One register.
          </h1>
          <p style={{ fontSize: 15, color: 'var(--demo-fg-2)', marginTop: 14, maxWidth: 600, lineHeight: 1.55 }}>
            Each persona enters a different MarineCheck workspace. The same 12 mock vessels sit behind all of them —
            three carry flags so you can show what the system catches.
          </p>
        </div>

        {/* Tile grid — each tile shows a mini "product window" preview */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 16,
        }}>
          {PERSONAS.map((p, i) => {
            const c = personaCopy[p.id];
            const isHero = p.id === 'lender' || p.id === 'insurer';
            return (
              <button
                key={p.id}
                type="button"
                onClick={() => onPick(p.id)}
                style={{
                  textAlign: 'left',
                  padding: 0,
                  background: 'oklch(0.24 0.012 250)',
                  border: '1px solid var(--demo-line)',
                  borderRadius: 12,
                  display: 'flex', flexDirection: 'column',
                  cursor: 'pointer',
                  transition: 'transform .15s, box-shadow .15s, border-color .15s, background .15s',
                  animation: `fadeUp .35s ${i * 0.05}s both ease`,
                  color: 'inherit',
                  fontFamily: 'inherit',
                  overflow: 'hidden',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = '0 20px 40px -10px rgba(0,0,0,0.4)';
                  e.currentTarget.style.borderColor = 'var(--demo-accent)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'none';
                  e.currentTarget.style.boxShadow = 'none';
                  e.currentTarget.style.borderColor = 'var(--demo-line)';
                }}
              >
                {/* Mini browser preview at the top of the tile */}
                <div style={{
                  background: 'var(--paper)',
                  borderBottom: '1px solid var(--demo-line)',
                  padding: '8px 10px',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <span style={{ display: 'flex', gap: 3 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff5f57' }} />
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#febc2e' }} />
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#28c840' }} />
                  </span>
                  <div className="mono" style={{
                    flex: 1, fontSize: 10, color: 'var(--ink-3)',
                    background: 'white', border: '1px solid var(--line)', borderRadius: 4, padding: '2px 8px',
                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>
                    <Icon name="lock" size={8} color="var(--clean)" />&nbsp;{window.PERSONA_URLS && window.PERSONA_URLS[p.id]}
                  </div>
                </div>

                {/* Tile body */}
                <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 9,
                      background: 'oklch(0.3 0.012 250)',
                      color: 'var(--demo-accent)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      border: '1px solid var(--demo-line)',
                    }}>
                      <Icon name={c.icon} size={17} strokeWidth={1.7} />
                    </div>
                    {isHero && <span className="pill" style={{ background: 'oklch(0.3 0.04 245)', color: 'var(--demo-accent)', borderColor: 'oklch(0.4 0.05 245)', fontSize: 10 }}>Hero journey</span>}
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--demo-fg-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                      Journey {String(PERSONAS.findIndex(x => x.id === p.id) + 1).padStart(2, '0')}
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 16, marginTop: 4, color: 'var(--demo-fg)' }}>{p.label}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--demo-fg-2)', marginTop: 4 }}>{c.tagline}</div>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--demo-fg-3)', lineHeight: 1.55, minHeight: 36 }}>
                    {c.detail}
                  </div>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    paddingTop: 12, borderTop: '1px solid var(--demo-line)',
                    color: 'var(--demo-accent)', fontSize: 12.5, fontWeight: 500,
                    marginTop: 'auto',
                  }}>
                    Enter workspace
                    <Icon name="arrowRight" size={13} />
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Footer note */}
        <div style={{
          marginTop: 40, padding: 16, borderRadius: 10,
          background: 'oklch(0.24 0.012 250)',
          border: '1px solid var(--demo-line)',
          display: 'flex', gap: 14, alignItems: 'flex-start',
        }}>
          <div style={{ color: 'var(--demo-accent)', paddingTop: 1 }}>
            <Icon name="sparkle" size={14} />
          </div>
          <div style={{ fontSize: 12, color: 'var(--demo-fg-2)', lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--demo-fg)' }}>Reading the prototype. </strong>
            Everything you see in the dark frame around each workspace is <em>demo narration</em> — journey title,
            step strip, persona switcher. The white browser window inside is the actual MarineCheck product. 12 mock vessels
            sit in the register; three carry flags (outstanding charge, duplicate cover, stolen alert).
          </div>
        </div>
      </Container>
    </div>
  );
};

Object.assign(window, { PersonaPicker });