/* OLIS website — Hero (light, institutional) */
(function () {
  const { Button, Badge, Card, LockMeter } = window.OLISDesignSystem_ba3bd8;
  const Icon = window.Icon;

  function CountUp({ to, prefix = '', suffix = '', dur = 1100 }) {
    const [v, setV] = React.useState(0);
    React.useEffect(() => {
      let raf, start;
      const step = (t) => {
        if (!start) start = t;
        const p = Math.min(1, (t - start) / dur);
        const e = 1 - Math.pow(1 - p, 3);
        setV(Math.round(to * e));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      return () => cancelAnimationFrame(raf);
    }, [to]);
    return <span>{prefix}{v.toLocaleString('en-US')}{suffix}</span>;
  }

  function Sparkline() {
    const pts = [8, 14, 11, 20, 17, 28, 24, 36, 33, 46, 54];
    const w = 260, h = 64, max = 56;
    const step = w / (pts.length - 1);
    const line = pts.map((p, i) => `${i * step},${h - (p / max) * h}`).join(' ');
    const area = `0,${h} ${line} ${w},${h}`;
    return (
      <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }}>
        <defs>
          <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--green-500)" stopOpacity="0.20" />
            <stop offset="1" stopColor="var(--green-500)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <polygon points={area} fill="url(#sparkFill)" />
        <polyline points={line} fill="none" stroke="var(--green-500)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  }

  function Hero({ onInvest }) {
    return (
      <section id="hero" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-canvas)' }}>
        {/* soft light-blue panel anchoring the right side */}
        <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '42%', background: 'var(--surface-alt)', borderLeft: '1px solid var(--border-subtle)', pointerEvents: 'none' }} className="olis-heropanel" />
        <div style={{
          maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--space-11) var(--gutter) var(--space-10)',
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-9)', alignItems: 'center',
          position: 'relative',
        }} className="olis-herogrid">
          <div className="olis-reveal">
            <Badge tone="brand" icon={<Icon name="badge-check" size={13} />}>{window.i18nConfig.t('programGPS2Locked')}</Badge>
            <h1 style={{ fontSize: 'clamp(2.6rem, 5vw, 4rem)', lineHeight: 1.04, letterSpacing: '-0.035em', marginTop: 22 }}>
              {window.i18nConfig.t('heroHeadline')}
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--text-body)', marginTop: 22, maxWidth: 480 }}>
              {window.i18nConfig.t('heroSubheadline')}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={onInvest} iconRight={<Icon name="arrow-right" size={18} />}>{window.i18nConfig.t('btnInvest')}</Button>
              <Button variant="secondary" size="lg" onClick={() => document.getElementById('program')?.scrollIntoView({ behavior: 'smooth' })} iconLeft={<Icon name="line-chart" size={18} />}>{window.i18nConfig.t('btnViewReturns')}</Button>
            </div>
            <div style={{ display: 'flex', gap: 26, marginTop: 34, flexWrap: 'wrap' }}>
              {[['shield-check', 'badgeCapitalProtected'], ['clock', 'badgeWithdrawAfter3'], ['repeat', 'badgeFixedCompound']].map(([ic, k]) => (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <span style={{ color: 'var(--accent)' }}><Icon name={ic} size={18} /></span>
                  <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{window.i18nConfig.t(k)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Floating dashboard preview */}
          <div className="olis-reveal" style={{ animationDelay: '.12s' }}>
            <Card padding={22} style={{ boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--positive)' }} />
                  <span style={{ fontSize: 12.5, color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{window.i18nConfig.t('statusLive')}</span>
                </div>
                <Badge tone="protected">{window.i18nConfig.t('statusProtected')}</Badge>
              </div>

              <div style={{ fontFamily: 'var(--font-text)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>{window.i18nConfig.t('balanceLabel')}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 6, lineHeight: 1 }}>
                $<CountUp to={12500} /><span style={{ fontSize: 19, color: 'var(--text-muted)' }}> USDT</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600, color: 'var(--positive)' }}>▲ +$500.00</span>
                <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>este mes · +5.0%</span>
              </div>

              <div style={{ margin: '18px 0 6px' }}><Sparkline /></div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
                <div style={{ background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '12px 14px', border: '1px solid var(--border-subtle)' }}>
                  <div style={{ fontSize: 11, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{window.i18nConfig.t('monthlyPaymentLabel')}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 600, color: 'var(--text-strong)', marginTop: 4 }}>$500.00</div>
                </div>
                <div style={{ background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '12px 14px', border: '1px solid var(--border-subtle)' }}>
                  <div style={{ fontSize: 11, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{window.i18nConfig.t('fixedRateLabel')}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 600, color: 'var(--brand)', marginTop: 4 }}>5.00%</div>
                </div>
              </div>
              <div style={{ marginTop: 14 }}>
                <LockMeter value={60} label={window.i18nConfig.t('lockedPeriodLabel')} caption={window.i18nConfig.t('withdrawAvailableLabel')} height={8} />
              </div>
            </Card>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { OLISHero: Hero, OLISCountUp: CountUp, OLISSparkline: Sparkline });
})();