// Hero — full-bleed photo card with display headline
// Accepts optional `content` (from CMS) and `lang` for i18n

const Hero = ({ onExplore, onPricing, content, lang }) => {
  const c = content || {};

  const eyebrow  = i18(c.eyebrow, lang)  || 'Your Creative Partner';
  const subtitle = i18(c.subtitle, lang) || 'High-quality branding, web, and product design delivered through a simple monthly subscription. No delays, no hiring, no wasted time.';
  const cta1     = c.ctaPrimary   ? i18(c.ctaPrimary.label, lang)   || 'Explore Services'  : 'Explore Services';
  const cta2     = c.ctaSecondary ? i18(c.ctaSecondary.label, lang) || 'View Pricing Plans' : 'View Pricing Plans';

  const cmsTitle = i18(c.title, lang);

  return (
    <section className="ag-hero" id="ag-section-home">
      <div className="ag-hero__card" />
      <div className="ag-hero__content">
        <EyebrowPill withSparkle>{eyebrow}</EyebrowPill>
        <h1 className="ag-hero__title">
          {cmsTitle ? (
            <>
              {cmsTitle}
              <span className="ag-hero__title-row">
                <span className="ag-hero__title-pill" aria-hidden="true">
                  <svg viewBox="0 0 60 36" width="60" height="36" aria-hidden="true">
                    <rect x="6"  y="6"  width="22" height="22" rx="6" transform="rotate(-30 17 17)" fill="rgba(255,255,255,0.18)"/>
                    <rect x="22" y="6"  width="22" height="22" rx="6" transform="rotate(-30 33 17)" fill="rgba(255,255,255,0.32)"/>
                    <rect x="38" y="6"  width="22" height="22" rx="6" transform="rotate(-30 49 17)" fill="rgba(255,255,255,0.55)"/>
                  </svg>
                </span>
              </span>
            </>
          ) : (
            <>
              Design That Moves Your
              <span className="ag-hero__title-row">
                <span>Business Forward</span>
                <span className="ag-hero__title-pill" aria-hidden="true">
                  <svg viewBox="0 0 60 36" width="60" height="36" aria-hidden="true">
                    <rect x="6"  y="6"  width="22" height="22" rx="6" transform="rotate(-30 17 17)" fill="rgba(255,255,255,0.18)"/>
                    <rect x="22" y="6"  width="22" height="22" rx="6" transform="rotate(-30 33 17)" fill="rgba(255,255,255,0.32)"/>
                    <rect x="38" y="6"  width="22" height="22" rx="6" transform="rotate(-30 49 17)" fill="rgba(255,255,255,0.55)"/>
                  </svg>
                </span>
              </span>
            </>
          )}
        </h1>
        <p className="ag-hero__sub">{subtitle}</p>
        <div className="ag-hero__ctas">
          <Button variant="dark"  onClick={onExplore}>{cta1}</Button>
          <Button variant="light" onClick={onPricing}>{cta2}</Button>
        </div>
      </div>
      <a className="ag-hero__scroll" onClick={onExplore}>
        <span>{t('hero.scroll', lang)}</span>
        <span className="ag-hero__scroll-chev">↓</span>
      </a>
    </section>
  );
};

window.Hero = Hero;