// T2 Falcon — Marketing (left) panel

const Marketing = ({ t }) => (
  <aside className="marketing" aria-label="Product highlights">
    <div className="brand-row">
      <BrandLogo size={44} />
      <div className="brand-text">
        {t.brand}
        <small>{t.brandSub}</small>
      </div>
    </div>

    <div className="hero">
      <div className="hero-eyebrow">
        <span className="dot"></span>
        {t.heroEyebrow}
      </div>
      <h1>
        {t.heroTitle1}<span className="accent">{t.heroTitleAccent}</span>{t.heroTitle2}
      </h1>
      <p>{t.heroBody}</p>

      <div className="features">
        <div className="feature">
          <div className="feature-icon"><Icon name="chat" size={18} /></div>
          <div className="feature-title">{t.feat1Title}</div>
          <div className="feature-sub">{t.feat1Sub}</div>
        </div>
        <div className="feature">
          <div className="feature-icon"><Icon name="shield" size={18} /></div>
          <div className="feature-title">{t.feat2Title}</div>
          <div className="feature-sub">{t.feat2Sub}</div>
        </div>
        <div className="feature">
          <div className="feature-icon"><Icon name="bolt" size={18} /></div>
          <div className="feature-title">{t.feat3Title}</div>
          <div className="feature-sub">{t.feat3Sub}</div>
        </div>
      </div>
    </div>

    <div className="marketing-footer">
      <div>{t.footerCopy}</div>
      <div>
        <a href="#">{t.footerTerms}</a>
        <a href="#">{t.footerPrivacy}</a>
        <a href="#">{t.footerHelp}</a>
      </div>
    </div>
  </aside>
);

window.Marketing = Marketing;