// Screen 1: Landing & Contact Gate (combined into landing flow)

function LandingScreen({ T, t, accent, theme, onStart }) {
  return (
    <div style={{ position: "relative", minHeight: "100%", padding: "20px 22px 40px", display: "flex", flexDirection: "column", gap: 0 }}>
      <AmbientBg T={T} accent={accent} theme={theme} />
      <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 8 }}>
        <div style={{
          fontFamily: FONTS.ui, fontSize: 10.5, fontWeight: 600, letterSpacing: 1.4,
          color: accent.primary, padding: "5px 12px", borderRadius: 999,
          background: accent.primarySoft, border: `1px solid ${accent.primary}33`,
          textTransform: "uppercase", marginBottom: 16,
        }}>{t.badge}</div>

        <LucyOrb size={140} accent={accent} theme={theme} />

        <div style={{ height: 20 }} />
        <SerifTitle T={T} size={40}>{t.landingTitle}</SerifTitle>
        <div style={{ height: 12 }} />
        <Body T={T} size={14} style={{ textAlign: "center", maxWidth: 320 }}>{t.landingSub}</Body>

        <div style={{ height: 24 }} />

        {/* Feature rows — editorial */}
        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 0, borderTop: `1px solid ${T.border}` }}>
          {[
            { n: "01", title: t.feat1Title, body: t.feat1Body },
            { n: "02", title: t.feat2Title, body: t.feat2Body },
            { n: "03", title: t.feat3Title, body: t.feat3Body },
          ].map(f => (
            <div key={f.n} style={{
              display: "grid", gridTemplateColumns: "auto 1fr", gap: 16,
              padding: "16px 0", borderBottom: `1px solid ${T.border}`,
              alignItems: "baseline",
            }}>
              <span style={{ fontFamily: FONTS.fraunces, fontSize: 22, color: accent.primary, letterSpacing: -0.5 }}>{f.n}</span>
              <div>
                <div style={{ fontFamily: FONTS.ui, fontSize: 14, fontWeight: 600, color: T.text, marginBottom: 2 }}>{f.title}</div>
                <Body T={T} size={12.5}>{f.body}</Body>
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 28 }} />
        <PrimaryButton onClick={onStart} accent={accent} T={T}>{t.cta}</PrimaryButton>
        <div style={{ height: 12 }} />
        <Body T={T} size={11.5} style={{ textAlign: "center", color: T.textMute }}>{t.ctaSub}</Body>
      </div>
    </div>
  );
}

function ContactScreen({ T, t, accent, theme, name, setName, phone, setPhone, gender, setGender, totalAssets, setTotalAssets, consent, setConsent, onNext }) {
  const phoneOk = phone.replace(/\D/g, "").length >= 9;
  const valid = name.trim().length >= 2 && phoneOk && totalAssets !== "" && consent;
  return (
    <div style={{ position: "relative", minHeight: "100%", padding: "20px 22px 100px" }}>
      <AmbientBg T={T} accent={accent} theme={theme} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <Kicker T={T} accent={accent}>{t.contactKicker}</Kicker>
        <div style={{ height: 14 }} />
        <SerifTitle T={T} size={42}>{t.contactTitle}</SerifTitle>
        <div style={{ height: 24 }} />

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Gender */}
          <div style={{ position: "relative" }}>
            <select
              value={gender}
              onChange={(e) => setGender(e.target.value)}
              style={{
                width: "100%", padding: "18px 16px 8px", borderRadius: 12,
                border: `1.5px solid ${gender ? accent.primary : T.border}`,
                background: gender ? `${accent.primary}08` : "transparent",
                color: T.text, fontSize: 16, fontFamily: FONTS.ui,
                appearance: "none", outline: "none",
              }}
            >
              <option value="anh">Anh</option>
              <option value="chị">Chị</option>
            </select>
            <label style={{
              position: "absolute", left: 16, top: gender ? 6 : 14,
              fontSize: gender ? 10 : 16, color: gender ? accent.primary : T.textDim,
              pointerEvents: "none", transition: "all 150ms", fontFamily: FONTS.ui,
            }}>Danh xưng</label>
          </div>

          <FloatingInput label={t.nameLabel} value={name} onChange={setName} placeholder={t.namePh} T={T} accent={accent} />
          <FloatingInput label={t.phoneLabel} value={phone} onChange={setPhone} placeholder={t.phonePh} T={T} accent={accent} type="tel" />
          
          {/* Total Assets */}
          <div style={{ position: "relative" }}>
            <select
              value={totalAssets}
              onChange={(e) => setTotalAssets(e.target.value)}
              style={{
                width: "100%", padding: "18px 16px 8px", borderRadius: 12,
                border: `1.5px solid ${totalAssets ? accent.primary : T.border}`,
                background: totalAssets ? `${accent.primary}08` : "transparent",
                color: T.text, fontSize: 16, fontFamily: FONTS.ui,
                appearance: "none", outline: "none",
              }}
            >
              <option value="" disabled hidden></option>
              <option value="100m-500m">100 triệu - 500 triệu</option>
              <option value="500m-2b">500 triệu - 2 tỷ</option>
              <option value="2b-10b">2 tỷ - 10 tỷ</option>
              <option value="10b-20b">10 tỷ - 20 tỷ</option>
              <option value="20b-100b">20 tỷ - 100 tỷ</option>
              <option value="hidden">Không muốn tiết lộ</option>
            </select>
            <label style={{
              position: "absolute", left: 16, top: totalAssets ? 6 : 14,
              fontSize: totalAssets ? 10 : 16, color: totalAssets ? accent.primary : T.textDim,
              pointerEvents: "none", transition: "all 150ms", fontFamily: FONTS.ui,
            }}>Tổng Tài Sản Đầu Tư</label>
            <svg style={{ position: "absolute", right: 16, top: 18, pointerEvents: "none" }} width="12" height="8" viewBox="0 0 12 8" fill="none">
              <path d="M1 1.5L6 6.5L11 1.5" stroke={T.textDim} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>

        <div style={{ height: 20 }} />

        {/* Consent */}
        <button onClick={() => setConsent(!consent)} style={{
          display: "flex", alignItems: "flex-start", gap: 12,
          background: "transparent", border: "none", padding: 0, cursor: "pointer", textAlign: "left",
        }}>
          <div style={{
            width: 18, height: 18, borderRadius: 5, marginTop: 2,
            border: `1.5px solid ${consent ? accent.primary : T.borderStrong}`,
            background: consent ? accent.primary : "transparent",
            display: "flex", alignItems: "center", justifyContent: "center",
            transition: "all 150ms",
          }}>
            {consent && <svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.5 2.5L9 3" stroke="#0B0F19" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
          </div>
          <Body T={T} size={12.5} style={{ flex: 1, color: T.textDim }}>{t.consent}</Body>
        </button>

        <div style={{ height: 28 }} />
        <PrimaryButton onClick={onNext} accent={accent} T={T} disabled={!valid}>{t.next}</PrimaryButton>
      </div>
    </div>
  );
}

Object.assign(window, { LandingScreen, ContactScreen });
