// Hero variations: V1 editorial w/ dashboard, V2 big text, V3 split with ad mockups
const { useI18n } = window;

function HeroBadge({ text }) {
  return <span className="badge">{text}</span>;
}

function HeroBtns({ variant = "v1" }) {
  const { t } = useI18n();
  return (
    <div className={`hero-${variant}-actions`}>
      <a href="https://calendly.com/diegoemanuel634/30min" target="_blank" rel="noopener" className="btn-primary btn-blue">
        <span>{t('hero.cta.primary')}</span>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
      </a>
      <a href="#metodo" className="btn-secondary">{t('hero.cta.secondary')}</a>
    </div>
  );
}

function CheckIcon() {
  return <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M2 7l3 3 7-7"/></svg>;
}

// Mini live chart inside hero dashboard (animated growth)
function MiniChart() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    let raf, start;
    const animate = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / 1800, 1);
      setProgress(p);
      if (p < 1) raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);

  // path: ascending wiggly
  const pts = [
    [0, 90], [50, 78], [100, 82], [150, 64], [200, 58],
    [250, 42], [300, 46], [350, 28], [400, 18], [440, 10]
  ];
  const W = 440, H = 100;
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
  const fillPath = `${path} L ${W} ${H} L 0 ${H} Z`;
  // length-based reveal: use stroke-dasharray
  const totalLen = 460;
  const dashOffset = totalLen * (1 - progress);
  const lastIdx = Math.floor(progress * (pts.length - 1));
  const lastPt = pts[Math.max(0, Math.min(pts.length - 1, lastIdx))];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{width:'100%', height:'100%'}}>
      <defs>
        <linearGradient id="mc-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="mc-line" x1="0" x2="1">
          <stop offset="0%" stopColor="#3B6EF5"/>
          <stop offset="100%" stopColor="#ffffff"/>
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[20, 50, 80].map(y => (
        <line key={y} x1="0" x2={W} y1={y} y2={y} stroke="rgba(245,239,224,0.05)" strokeDasharray="2 4"/>
      ))}
      {/* fill */}
      <path d={fillPath} fill="url(#mc-fill)" opacity={progress}/>
      {/* line */}
      <path d={path} fill="none" stroke="url(#mc-line)" strokeWidth="2.5"
        strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray={totalLen} strokeDashoffset={dashOffset}/>
      {/* end dot */}
      {progress > 0.95 && (
        <g>
          <circle cx={lastPt[0]} cy={lastPt[1]} r="6" fill="#ffffff" opacity="0.3"/>
          <circle cx={lastPt[0]} cy={lastPt[1]} r="3" fill="#ffffff"/>
        </g>
      )}
    </svg>
  );
}

// Live counter
function useCountUp(target, duration = 1800) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf, start;
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(eased * target);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return val;
}

function HeroV1() {
  const { t } = useI18n();

  return (
    <section className="hero hero-v1" aria-labelledby="hero-title">
      <div className="hero-v1-grid" aria-hidden="true"></div>
      <div className="hero-v1-glow" aria-hidden="true"></div>
      <div className="hero-grain" aria-hidden="true"></div>

      {/* Full-bleed background chart */}
      <div className="hero-bg-chart" aria-hidden="true">
        <BgGrowthChart/>
      </div>

      <div className="hero-v1-inner">
        <div className="hero-v1-content">
          <HeroBadge text={t('hero.badge')} />
          <h1 id="hero-title">
            {t('hero.title.v1.a')} <i>{t('hero.title.v1.b')}</i> {t('hero.title.v1.c')} <span className="green">{t('hero.title.v1.d')}</span>.
          </h1>
          <p className="hero-v1-sub">{t('hero.sub.v1')}</p>
          <HeroBtns variant="v1" />
          <div className="hero-v1-trust">
            <span><CheckIcon/> {t('hero.trust.1')}</span>
            <span><CheckIcon/> {t('hero.trust.2')}</span>
            <span><CheckIcon/> {t('hero.trust.3')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// Full-bleed ambient growth chart — animates once, fills hero
function BgGrowthChart() {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    let raf, start;
    const animate = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / 2600, 1);
      setProgress(p);
      if (p < 1) raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Wider, more dramatic ascending curve with dips for realism
  const W = 1600, H = 600;
  const pts = [
    [0, 540], [80, 510], [160, 525], [240, 478], [320, 490],
    [400, 442], [480, 460], [560, 408], [640, 396], [720, 350],
    [800, 372], [880, 318], [960, 286], [1040, 302], [1120, 248],
    [1200, 220], [1280, 240], [1360, 178], [1440, 142], [1520, 96], [1600, 70]
  ];
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
  const fillPath = `${path} L ${W} ${H} L 0 ${H} Z`;
  const totalLen = 2400;
  const dashOffset = totalLen * (1 - progress);
  const lastIdx = Math.floor(progress * (pts.length - 1));
  const lastPt = pts[Math.max(0, Math.min(pts.length - 1, lastIdx))];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" style={{width:'100%', height:'100%'}}>
      <defs>
        <linearGradient id="bg-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.22"/>
          <stop offset="60%" stopColor="#3B6EF5" stopOpacity="0.08"/>
          <stop offset="100%" stopColor="#3B6EF5" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="bg-line" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#3B6EF5"/>
          <stop offset="55%" stopColor="#5b88f7"/>
          <stop offset="100%" stopColor="#ffffff"/>
        </linearGradient>
      </defs>
      {/* horizontal gridlines */}
      {[100, 200, 300, 400, 500].map(y => (
        <line key={y} x1="0" x2={W} y1={y} y2={y} stroke="rgba(245,239,224,0.045)" strokeDasharray="3 6"/>
      ))}
      {/* vertical gridlines */}
      {[200, 400, 600, 800, 1000, 1200, 1400].map(x => (
        <line key={x} x1={x} x2={x} y1="0" y2={H} stroke="rgba(245,239,224,0.025)"/>
      ))}
      {/* fill */}
      <path d={fillPath} fill="url(#bg-fill)" opacity={progress}/>
      {/* line */}
      <path d={path} fill="none" stroke="url(#bg-line)" strokeWidth="3"
        strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray={totalLen} strokeDashoffset={dashOffset}/>
      {/* end pulse dot */}
      {progress > 0.95 && (
        <g>
          <circle cx={lastPt[0]} cy={lastPt[1]} r="14" fill="#ffffff" opacity="0.18"/>
          <circle cx={lastPt[0]} cy={lastPt[1]} r="8" fill="#ffffff" opacity="0.4"/>
          <circle cx={lastPt[0]} cy={lastPt[1]} r="4" fill="#ffffff"/>
        </g>
      )}
    </svg>
  );
}

function HeroV2() {
  const { t } = useI18n();
  return (
    <section className="hero hero-v2" aria-labelledby="hero-title">
      <div className="hero-v1-grid" aria-hidden="true"></div>
      <div className="hero-v1-glow" aria-hidden="true"></div>
      <div className="hero-grain" aria-hidden="true"></div>

      <div className="hero-v2-inner">
        <HeroBadge text={t('hero.badge')} />
        <h1 id="hero-title">
          {t('hero.title.v2.a')} <i>{t('hero.title.v2.profit')}</i><br/>
          {t('hero.title.v2.b')} <span className="green">{t('hero.title.v2.waste')}</span>
        </h1>
        <p className="hero-v2-sub">{t('hero.sub.v2')}</p>
        <HeroBtns variant="v2" />
        <div className="hero-v2-stats">
          <div className="hero-v2-stat">
            <div className="num"><i>{t('hero.v2.stat1.num')}</i></div>
            <div className="lbl">{t('hero.v2.stat1.lbl')}</div>
          </div>
          <div className="hero-v2-stat">
            <div className="num"><span className="blue">{t('hero.v2.stat2.num')}</span></div>
            <div className="lbl">{t('hero.v2.stat2.lbl')}</div>
          </div>
          <div className="hero-v2-stat">
            <div className="num"><i>{t('hero.v2.stat3.num')}</i></div>
            <div className="lbl">{t('hero.v2.stat3.lbl')}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroV3() {
  const { t } = useI18n();
  return (
    <section className="hero hero-v3" aria-labelledby="hero-title">
      <div className="hero-v1-grid" aria-hidden="true"></div>
      <div className="hero-grain" aria-hidden="true"></div>

      <div className="hero-v3-inner">
        <div className="hero-v3-left">
          <HeroBadge text={t('hero.badge')} />
          <h1 id="hero-title">
            {t('hero.title.v1.a')} <i>{t('hero.title.v1.b')}</i><br/>
            {t('hero.title.v1.c')} <span className="green">{t('hero.title.v1.d')}</span>.
          </h1>
          <p className="hero-v3-sub">{t('hero.sub.v3')}</p>
          <HeroBtns variant="v3" />
          <div className="hero-v3-trust">
            <span><CheckIcon/> {t('hero.trust.1')}</span>
            <span><CheckIcon/> {t('hero.trust.2')}</span>
            <span><CheckIcon/> {t('hero.trust.3')}</span>
          </div>
        </div>
        <div className="hero-v3-right">
          <AdsAttractScene compact={true} />
        </div>
      </div>
    </section>
  );
}

window.HeroV1 = HeroV1;
window.HeroV2 = HeroV2;
window.HeroV3 = HeroV3;
window.MiniChart = MiniChart;
window.BgGrowthChart = BgGrowthChart;
window.useCountUp = useCountUp;
window.CheckIcon = CheckIcon;