// 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, consent, setConsent, onNext }) {
  const phoneOk = phone.replace(/\D/g, "").length >= 9;
  const valid = name.trim().length >= 2 && phoneOk && 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 }}>
          <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" />
        </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 });
