// Stage 1: Form Picker (Salaried vs SEP)

const FormPicker = ({ onPick }) => {
  const [hover, setHover] = React.useState(null);
  const cards = [
    { id: "salaried", title: "Salaried", subtitle: "Individual with monthly salary from an employer",
      meta: "31 fields · Personal loan, home, vehicle, wedding",
      icon: "user", color: V.orange, },
    { id: "sep", title: "Self-Employed Professional", subtitle: "Doctors, CAs, traders, shop owners, consultants",
      meta: "49 fields · Working capital, business expansion, machinery",
      icon: "briefcase", color: V.purple, },
  ];
  return (
    <div style={{ maxWidth: 960, margin: "0 auto", padding: "64px 32px" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <Eyebrow style={{ marginBottom: 14 }}>New Application</Eyebrow>
        <h1 style={{ fontFamily: V.font, fontSize: 36, fontWeight: V.fw.m, color: V.brown, margin: 0, lineHeight: 1.1, letterSpacing: "-0.015em" }}>
          What kind of applicant?
        </h1>
        <p style={{ fontFamily: V.font, fontSize: 14, color: V.brownMid, marginTop: 10, maxWidth: 520, margin: "10px auto 0" }}>
          Pick a form, upload a voice note from your client call, and we'll pre-fill the application in seconds.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {cards.map(c => (
          <div key={c.id}
            onMouseEnter={() => setHover(c.id)}
            onMouseLeave={() => setHover(null)}
            onClick={() => onPick(c.id)}
            style={{
              position: "relative", cursor: "pointer",
              background: V.white, border: `1px solid ${hover === c.id ? c.color : V.borderMed}`,
              borderRadius: V.radius, padding: 28,
              transition: "transform 0.2s, box-shadow 0.2s, border-color 0.2s",
              transform: hover === c.id ? "translateY(-2px)" : "translateY(0)",
              boxShadow: hover === c.id ? V.shadowMd : "none",
            }}>
            {hover === c.id && <FocusCorners color={c.color} size={12} thick={1.5} inset={-5}/>}
            <div style={{
              width: 48, height: 48, borderRadius: V.radius,
              background: c.id === "salaried" ? V.orangeSubtle : V.purpleSubtle,
              display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18,
            }}>
              <Icon name={c.icon} size={22} color={c.color}/>
            </div>
            <div style={{ fontFamily: V.font, fontSize: 20, fontWeight: V.fw.m, color: V.brown, marginBottom: 6, letterSpacing: "-0.01em" }}>
              {c.title}
            </div>
            <div style={{ fontFamily: V.font, fontSize: 13, color: V.brownMid, lineHeight: 1.5, marginBottom: 14 }}>
              {c.subtitle}
            </div>
            <div style={{ fontFamily: V.font, fontSize: 11, color: V.brownFaded, fontVariantNumeric: "tabular-nums", letterSpacing: "0.01em" }}>
              {c.meta}
            </div>
            <div style={{
              position: "absolute", top: 24, right: 24,
              width: 30, height: 30, borderRadius: "50%",
              background: hover === c.id ? c.color : "transparent",
              border: hover === c.id ? "none" : `1px solid ${V.borderMed}`,
              display: "flex", alignItems: "center", justifyContent: "center",
              transition: "all 0.2s",
            }}>
              <Icon name="arrowRight" size={13} color={hover === c.id ? V.white : V.brownFaded}/>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 28, padding: "14px 18px", background: V.white,
        border: `1px solid ${V.borderLight}`, borderRadius: V.radius,
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: V.radiusSm, background: V.orangeSubtle,
          display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
        }}>
          <Icon name="shield" size={14} color={V.orange}/>
        </div>
        <div style={{ fontFamily: V.font, fontSize: 12, color: V.brownMid, lineHeight: 1.5 }}>
          Voice notes are transcribed and extracted on-device via secure inference. Aadhaar is never stored in full — only the last four digits are retained.
        </div>
      </div>
    </div>
  );
};

window.FormPicker = FormPicker;