// WhyTrillion — four nested success callouts, mirroring the home page's
// [!question] → [!success] structure.
function WhyTrillion() {
  const pillars = [
    {
      title: 'Compliance-First',
      lede: "We don't cut corners, and since platforms reward compliance that means:",
      bullets: [
        'better ad quality scores',
        'lower CPMs',
        'longer-term account health',
      ],
      tail: 'The benefits of our industry-leading compliance & spotless record are passed along to ALL of our clients!',
    },
    {
      title: 'AI-Powered by Default',
      lede: 'Every campaign we run has an AI layer that takes full advantage of:',
      bullets: [
        'automated bidding',
        'creative testing',
        'predictive targeting',
        'and so much MORE!',
      ],
      tail: 'Access the latest tools & LLMs — machine-grade efficiency without sacrificing human interaction, oversight, & strategy.',
    },
    {
      title: 'Full-Funnel or Nothing',
      lede: 'Siloed campaigns leak revenue at every gap. We build your marketing as one connected system, so that:',
      bullets: [
        'we connect awareness to conversion',
        'every channel has a role',
        'nothing runs in isolation',
      ],
      tail: 'When every channel feeds the next, the whole outperforms the sum of its parts!',
    },
    {
      title: 'You Own the Data',
      lede: 'We report what is actually happening, so you can make fully-informed decisions:',
      bullets: [
        'easy-to-understand',
        '24/7 context',
        'NO vanity metrics',
        'NO padded numbers',
        '100% transparency & truth',
      ],
    },
  ];
  return (
    <section className="td-section">
      <div className="td-callout td-callout--question">
        <div className="td-callout__head">❔ Question</div>
        <h2 className="td-callout__h">Why <span style={{color:'var(--trillion-gold)'}}>Trillion Digital<sup>™</sup></span> ?</h2>
        <div className="td-pillars">
          {pillars.map(p => (
            <div key={p.title} className="td-callout td-callout--success td-pillar">
              <div className="td-callout__head">✅ Success</div>
              <h3 className="td-pillar__h">{p.title}</h3>
              <p className="td-pillar__lede">{p.lede}</p>
              <ul className="td-checklist">
                {p.bullets.map(b => (
                  <li key={b}><span className="td-checklist__m">✅</span><span><strong><em>{b}</em></strong></span></li>
                ))}
              </ul>
              {p.tail && <p className="td-pillar__tail">{p.tail}</p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyTrillion = WhyTrillion;