function Landing({ onStart }) {
  const archetypeNames = Object.values(window.APP_DATA.archetypes).map(a => a.name);

  return (
    <div className="landing">
      <span className="landing-eyebrow">7 questions · 2 minutes</span>
      <h1>
        Find out what actually makes <em>them</em> light up.
      </h1>
      <p className="landing-sub">
        Giftly Engine turns a short set of everyday questions into a gift-preference
        profile — the kind of thing that's usually just a hunch, made explicit so you
        stop guessing and start giving well.
      </p>
      <button className="cta-primary" onClick={onStart}>
        Start the quiz →
      </button>
      <span className="landing-meta">No sign-up. No email. Just seven honest answers.</span>

      <div className="archetype-preview-row">
        {archetypeNames.map(name => (
          <span className="archetype-chip" key={name}>{name}</span>
        ))}
      </div>

      <div className="landing-cards">
        <div className="landing-card">
          <span className="landing-card-icon">🧭</span>
          <h3>Answer honestly</h3>
          <p>Seven quick scenarios about how you actually spend time, money, and attention — not what sounds impressive.</p>
        </div>
        <div className="landing-card">
          <span className="landing-card-icon">✨</span>
          <h3>Get your profile</h3>
          <p>We tally your answers into a gift-preference archetype, with the traits that drive what you love receiving.</p>
        </div>
        <div className="landing-card">
          <span className="landing-card-icon">🎯</span>
          <h3>See matched ideas</h3>
          <p>A short list of gift ideas built specifically for your profile — ready to send to whoever's shopping for you.</p>
        </div>
      </div>
    </div>
  );
}