/* Solution — dark hero card with title, subtitle, and a row of pills.
   The 4th pill is the "Yours." active state. */

const Solution = () => {
  const { StarSpark, useViewport } = window.AAS;
  const { isSm } = useViewport();

  const pills = ['🪽 Free your time','💎 Deliver more value','💰 Make more money.'];

  return (
    <section>
      <div className="container">
        <div className="solution-card">
          <div className="eyebrow solution-eyebrow">THE SOLUTION</div>
          <h2 className="solution-title">
            Your own app, <span className="it">made to reach the world.</span>
          </h2>
          <p className="solution-sub">
            A custom-built app where your followers live, learn, and transform. Designed around your program, your content, your community.
          </p>
          <div className="solution-pills">
            {pills.map((t, i) => (
              <div key={i} className={`solution-pill${i === 2 ? ' solution-pill--active' : ''}`}>{t}</div>
            ))}
          </div>

          {/* Sparkles — hide on phones so they don't crowd the headline. */}
          {!isSm && (
            <>
              <span className="solution-spark solution-spark--1"><StarSpark color="#EBA8F2" size={24}/></span>
              <span className="solution-spark solution-spark--2"><StarSpark color="#EBA8F2" size={16}/></span>
              <span className="solution-spark solution-spark--3"><StarSpark color="#fff" size={12}/></span>
            </>
          )}
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Solution = Solution;