// Pet MBTI — Landing page. Exports: Landing
const LC = window.PM_C;
const LS = window.PM_STR;
const { PawIcon, Sparkle, Cloud, Btn, TypeThumb } = window;

function GroupChip({ g }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: LC.panel, borderRadius: 999,
      padding: '8px 16px 8px 8px', boxShadow: '0 3px 12px rgba(168,107,52,0.07)' }}>
      <span style={{ width: 30, height: 30, borderRadius: 999, background: g.mid, flexShrink: 0 }} />
      <div style={{ lineHeight: 1.05 }}>
        <div style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 15, color: LC.ink }}>{g.name}</div>
        <div style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 700, fontSize: 11.5, color: LC.muted, whiteSpace: 'nowrap' }}>{g.role} · {g.letters}</div>
      </div>
    </div>
  );
}

function Step({ n, title, body }) {
  return (
    <div style={{ flex: 1, minWidth: 200 }}>
      <div style={{ width: 44, height: 44, borderRadius: 14, background: LC.panelAlt, display: 'grid', placeItems: 'center',
        fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 21, color: LC.pawDeep, boxShadow: '0 3px 10px rgba(168,107,52,0.08)' }}>{n}</div>
      <h3 style={{ margin: '14px 0 6px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 20, color: LC.ink }}>{title}</h3>
      <p style={{ margin: 0, fontFamily: "'Nunito', sans-serif", fontWeight: 600, fontSize: 15, lineHeight: 1.5, color: LC.ink2, textWrap: 'pretty' }}>{body}</p>
    </div>
  );
}

function Landing({ onStart, onTypes, onOpenType }) {
  const G = window.PM_GROUPS;
  const T = window.PM_TYPES;
  const previews = ['ENFP','INTJ','ISFP','ESFJ','INFP','ESTP'];
  return (
    <main>
      {/* ── HERO ── */}
      <section style={{ position: 'relative', overflow: 'hidden',
        background: `linear-gradient(180deg, ${LC.bgWarm}, ${LC.bg})` }}>
        <Cloud w={120} color="#FBEEDD" style={{ position: 'absolute', top: 60, left: '6%' }} />
        <Cloud w={90} color="#FBEEDD" style={{ position: 'absolute', top: 120, right: '10%' }} />
        <Sparkle size={26} color={G.sentinel.mid} style={{ position: 'absolute', top: 90, left: '46%' }} className="pm-float" />
        <Sparkle size={20} color={LC.paw} style={{ position: 'absolute', top: 200, right: '22%' }} className="pm-float2" />
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: '64px 28px 20px', textAlign: 'center', position: 'relative' }}>
          <h1 className="pm-up" style={{ margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(38px, 6vw, 62px)',
            lineHeight: 1.02, color: LC.ink, letterSpacing: '-.5px', textWrap: 'balance' }}>
            {LS.heroTitle[0]}<br />{LS.heroTitle[1]}
          </h1>
          <p className="pm-up" style={{ margin: '18px auto 0', maxWidth: 560, fontFamily: "'Nunito', sans-serif", fontWeight: 600,
            fontSize: 'clamp(16px, 2vw, 19px)', lineHeight: 1.55, color: LC.ink2, textWrap: 'pretty' }}>
            {LS.heroSub}
          </p>
          <div className="pm-up" style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={onStart} color={LC.pawDeep}>{LS.heroTake} <span style={{ fontSize: 22, marginTop: -2 }}>→</span></Btn>
            <Btn size="lg" kind="soft" onClick={onTypes}>{LS.heroMeet}</Btn>
          </div>
        </div>
        {/* hero illustration */}
        <div className="pm-up" style={{ maxWidth: 1100, margin: '10px auto 0', padding: '0 20px' }}>
          <img src="assets/hero.png" alt={LS.heroAlt} style={{ width: '100%', display: 'block', borderRadius: 26 }} />
        </div>
      </section>

      {/* ── FOUR FAMILIES ── */}
      <section style={{ maxWidth: 1160, margin: '0 auto', padding: '56px 28px 8px', textAlign: 'center' }}>
        <p style={{ margin: 0, fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13, letterSpacing: '2px', color: LC.pawDeep, textTransform: 'uppercase' }}>{LS.familiesKicker}</p>
        <h2 style={{ margin: '8px 0 0', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(26px, 3.4vw, 36px)', color: LC.ink }}>{LS.familiesTitle}</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 26 }}>
          <GroupChip g={G.analyst} /><GroupChip g={G.diplomat} /><GroupChip g={G.sentinel} /><GroupChip g={G.explorer} />
        </div>
      </section>

      {/* ── PREVIEW GALLERY ── */}
      <section style={{ maxWidth: 1160, margin: '0 auto', padding: '40px 28px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(168px, 1fr))', gap: 16 }}>
          {previews.map((code) => <TypeThumb key={code} type={T[code]} onClick={onOpenType} />)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 26 }}>
          <Btn kind="ghost" onClick={onTypes}>{LS.seeAll}</Btn>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section style={{ maxWidth: 1160, margin: '0 auto', padding: '48px 28px 64px' }}>
        <div style={{ background: LC.panel, borderRadius: 28, padding: 'clamp(28px, 4vw, 48px)', boxShadow: '0 6px 24px rgba(168,107,52,0.08)' }}>
          <h2 style={{ margin: '0 0 28px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(24px, 3vw, 32px)', color: LC.ink, textAlign: 'center' }}>{LS.howTitle}</h2>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 28 }}>
            <Step n="1" title={LS.steps[0].t} body={LS.steps[0].b} />
            <Step n="2" title={LS.steps[1].t} body={LS.steps[1].b} />
            <Step n="3" title={LS.steps[2].t} body={LS.steps[2].b} />
          </div>
          <div style={{ textAlign: 'center', marginTop: 34 }}>
            <Btn size="lg" onClick={onStart} color={LC.pawDeep}>{LS.startTest} <span style={{ fontSize: 22, marginTop: -2 }}>→</span></Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Landing });