/* OLIS website — content sections (light, institutional) */
(function () {


  const { Button, Badge, Card, LockMeter, Input, Avatar, Tabs } = window.OLISDesignSystem_ba3bd8;
  const Icon = window.Icon;
  const i18n = window.i18nConfig;

  function SectionHead({ eyebrow, title, sub, center }) {
    return (
      <div style={{ maxWidth: 640, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left' }}>
        <div className="olis-eyebrow">{eyebrow}</div>
        <h2 style={{ fontSize: 'clamp(1.9rem, 3.4vw, 2.5rem)', marginTop: 14, letterSpacing: '-0.025em' }}>{title}</h2>
        {sub && <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-muted)', marginTop: 14 }}>{sub}</p>}
      </div>
    );
  }

  function IconTile({ name, size = 22, tone = 'brand' }) {
    const c = tone === 'accent' ? { bg: 'var(--accent-soft)', fg: 'var(--green-600)', bd: 'rgba(29,138,82,0.22)' }
                                : { bg: 'var(--brand-soft)', fg: 'var(--brand)', bd: 'rgba(35,79,176,0.18)' };
    return (
      <span style={{ width: 44, height: 44, flex: 'none', borderRadius: 'var(--radius-md)', background: c.bg, border: `1px solid ${c.bd}`, display: 'grid', placeItems: 'center', color: c.fg }}>
        <Icon name={name} size={size} />
      </span>
    );
  }

  /* ---------- About OLIS ---------- */
  function About() {
    return (
      <section id="about" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-canvas)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead center eyebrow="OLIS" title={i18n.t('aboutSectionTitle')} />
          <div style={{ marginTop: 'var(--space-8)', maxWidth: 720, margin: '0 auto' }}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', textAlign: 'center', marginBottom: 'var(--space-6)' }}>
              {i18n.t('aboutIntro')}
            </p>
            <div style={{ background: 'var(--surface-alt)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-7)', border: '1px solid var(--border-subtle)', marginBottom: 'var(--space-7)' }}>
              <h3 style={{ fontSize: 20, marginBottom: 12, color: 'var(--text-strong)' }}>{i18n.t('aboutTeamTitle')}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-body)' }}>
                {i18n.t('aboutTeamDesc')}
              </p>
            </div>
            <div style={{ background: 'var(--brand-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', border: '1px solid rgba(35,79,176,0.18)', marginBottom: 'var(--space-6)' }}>
              <p style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.6, color: 'var(--text-strong)', margin: 0 }}>
                {i18n.t('aboutMission')}
              </p>
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-body)', textAlign: 'center', fontStyle: 'italic' }}>
              {i18n.t('aboutValues')}
            </p>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- Reserve Fund ---------- */
  function ReserveFund() {
    const items = [
      { ic: 'building-2', tone: 'accent', t: i18n.t('reserveFundMechanism'), d: i18n.t('reserveFundMechanismDesc') },
      { ic: 'shield-check', tone: 'brand', t: i18n.t('reserveFundGuarantee'), d: i18n.t('reserveFundGuaranteeDesc') },
      { ic: 'circle-dollar-sign', tone: 'brand', t: i18n.t('reserveFundStructure'), d: i18n.t('reserveFundStructureDesc') },
    ];
    return (
      <section id="reserve-fund" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-canvas)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead center eyebrow="Protection" title={i18n.t('reserveFundTitle')} sub={i18n.t('reserveFundIntro')} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 'var(--space-7)' }} className="olis-steps">
            {items.map((it) => (
              <Card key={it.t} padding={24} interactive style={{ display: 'flex', flexDirection: 'column' }}>
                <IconTile name={it.ic} tone={it.tone} />
                <h3 style={{ fontSize: 18, marginTop: 16, marginBottom: 8 }}>{it.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)' }}>{it.d}</p>
              </Card>
            ))}
          </div>
          <div style={{ marginTop: 'var(--space-8)', background: 'var(--accent-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', border: '1px solid rgba(29,138,82,0.22)', textAlign: 'center' }}>
            <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--green-600)', margin: 0 }}>
              {i18n.t('reserveFundStatement')}
            </p>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- Legal Framework ---------- */
  function LegalFramework() {
    const items = [
      { ic: 'scale-3', tone: 'brand', t: i18n.t('legalStructure'), d: i18n.t('legalStructureDesc') },
      { ic: 'check-circle-2', tone: 'accent', t: i18n.t('governance'), d: i18n.t('governanceDesc') },
      { ic: 'user-check', tone: 'brand', t: i18n.t('legalRights'), d: i18n.t('legalRightsDesc') },
    ];
    return (
      <section id="legal-framework" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-alt)', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead center eyebrow="Transparency" title={i18n.t('legalFrameworkTitle')} sub={i18n.t('legalFrameworkIntro')} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 'var(--space-7)' }} className="olis-steps">
            {items.map((it) => (
              <Card key={it.t} padding={24} interactive style={{ display: 'flex', flexDirection: 'column' }}>
                <IconTile name={it.ic} tone={it.tone} />
                <h3 style={{ fontSize: 18, marginTop: 16, marginBottom: 8 }}>{it.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)' }}>{it.d}</p>
              </Card>
            ))}
          </div>
          <div style={{ marginTop: 'var(--space-8)', background: 'var(--brand-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', border: '1px solid rgba(35,79,176,0.18)', textAlign: 'center' }}>
            <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--brand)', margin: 0 }}>
              {i18n.t('legalStatement')}
            </p>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- How it works ---------- */
  function HowItWorks() {
    const steps = [
      { ic: 'wallet', n: '01', t: i18n.t('stepInvest'), d: i18n.t('stepInvestDesc') },
      { ic: 'banknote', n: '02', t: i18n.t('stepReceive'), d: i18n.t('stepReceiveDesc') },
      { ic: 'activity', n: '03', t: i18n.t('stepMonitor'), d: i18n.t('stepMonitorDesc') },
      { ic: 'arrow-down-to-line', n: '04', t: i18n.t('stepWithdraw'), d: i18n.t('stepWithdrawDesc') },
    ];
    return (
      <section id="how-it-works" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-canvas)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead eyebrow={i18n.t('sectionHowItWorks')} title={i18n.t('sectionHowItWorksTitle')} sub={i18n.t('sectionHowItWorksSub')} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 'var(--space-7)' }} className="olis-steps">
            {steps.map((s, i) => (
              <div key={s.n} style={{ position: 'relative' }}>
                <Card padding={22} interactive style={{ height: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <IconTile name={s.ic} />
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-faint)' }}>{s.n}</span>
                  </div>
                  <h3 style={{ fontSize: 20, marginTop: 18 }}>{s.t}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', marginTop: 8 }}>{s.d}</p>
                </Card>
                {i < steps.length - 1 && (
                  <span style={{ position: 'absolute', top: '50%', right: -13, transform: 'translateY(-50%)', color: 'var(--brand)', zIndex: 2, background: 'var(--surface-canvas)', borderRadius: 99 }} className="olis-stepArrow">
                    <Icon name="arrow-right" size={20} />
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- GPS-II Plan + returns calculator ---------- */
  function Plan({ onInvest }) {
    const [amount, setAmount] = React.useState(1000);
    const [mode, setMode] = React.useState('fijo');
    const months = 12;
    const rate = 0.05;
    let monthly, total, gains;
    if (mode === 'fijo') {
      monthly = amount * rate;
      gains = monthly * months;
      total = amount + gains;
    } else {
      total = amount * Math.pow(1 + rate, months);
      gains = total - amount;
      monthly = amount * rate;
    }
    const fmt = (n) => '$' + Math.round(n).toLocaleString('en-US');
    const onAmt = (e) => {
      const v = parseInt((e.target.value || '').replace(/[^0-9]/g, ''), 10);
      setAmount(isNaN(v) ? 0 : v);
    };

    const includes = [
      i18n.t('includeFixed'),
      i18n.t('includePayment'),
      i18n.t('includeMonitoring'),
      i18n.t('includeProtection'),
      i18n.t('includeIndividual'),
      i18n.t('includeWithdraw'),
    ];

    return (
      <section id="program" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-alt)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead center eyebrow={i18n.t('sectionProgram')} title={i18n.t('sectionProgramTitle')} sub={i18n.t('sectionProgramSub')} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 22, marginTop: 'var(--space-7)', alignItems: 'stretch' }} className="olis-planGrid">

            {/* Plan card */}
            <Card tone="brand" padding={28} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Badge tone="brand">GPS-II Investment</Badge>
                <Badge tone="protected" icon={<Icon name="shield-check" size={13} />}>LOCKED 60%</Badge>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 22 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', color: 'var(--brand)', lineHeight: 1 }}>5%</span>
                <span style={{ fontSize: 17, color: 'var(--text-muted)' }}>{i18n.t('monthlyFixed')}</span>
              </div>
              <p style={{ fontSize: 14.5, color: 'var(--text-muted)', marginTop: 8 }}>{i18n.t('investFromText')}</p>
              <div style={{ height: 1, background: 'var(--border-subtle)', margin: '22px 0' }} />
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
                {includes.map((it) => (
                  <li key={it} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--accent)', marginTop: 1, flex: 'none' }}><Icon name="check" size={18} /></span>
                    <span style={{ fontSize: 14.5, color: 'var(--text-body)', lineHeight: 1.4 }}>{it}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 24 }}>
                <Button variant="primary" size="lg" full onClick={onInvest} iconRight={<Icon name="arrow-right" size={18} />}>{i18n.t('btnOpenAccount')}</Button>
              </div>
            </Card>

            {/* Calculator */}
            <Card padding={28} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <h3 style={{ fontSize: 20 }}>{i18n.t('calculatorTitle')}</h3>
                <span style={{ color: 'var(--brand)' }}><Icon name="line-chart" size={20} /></span>
              </div>

              <div style={{ marginTop: 20 }}>
                <Input label={i18n.t('investAmount')} prefix="$" suffix="USDT" value={amount.toLocaleString('en-US')} onChange={onAmt} />
                <input type="range" min="1000" max="200000" step="1000" value={amount}
                  onChange={(e) => setAmount(parseInt(e.target.value, 10))}
                  className="olis-range" style={{ width: '100%', marginTop: 14 }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-faint)', marginTop: 4 }}>
                  <span>$1k</span><span>$200k</span>
                </div>
              </div>

              <div style={{ marginTop: 18 }}>
                <Tabs value={mode} onChange={setMode} items={[{ value: 'fijo', label: i18n.t('modeFixed') }, { value: 'compuesto', label: i18n.t('modeCompound') }]} />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 18 }}>
                <div style={{ background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '14px 16px', border: '1px solid var(--border-subtle)' }}>
                  <div style={{ fontSize: 11, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{mode === 'fijo' ? i18n.t('monthlyPayment') : i18n.t('month1Approx')}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600, color: 'var(--text-strong)', marginTop: 6 }}>{fmt(monthly)}</div>
                </div>
                <div style={{ background: 'var(--accent-soft)', borderRadius: 'var(--radius-md)', padding: '14px 16px', border: '1px solid rgba(29,138,82,0.22)' }}>
                  <div style={{ fontSize: 11, color: 'var(--green-600)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{i18n.t('gains12Months')}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600, color: 'var(--green-600)', marginTop: 6 }}>+{fmt(gains)}</div>
                </div>
              </div>
              <div style={{ marginTop: 12, background: 'var(--surface-inset)', borderRadius: 'var(--radius-md)', padding: '14px 16px', border: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{i18n.t('projectedBalance')}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600, color: 'var(--text-strong)' }}>{fmt(total)}</span>
              </div>
              <p style={{ fontSize: 11.5, color: 'var(--text-faint)', marginTop: 14, lineHeight: 1.5 }}>
                {i18n.t('calculatorDisclaimer')}
              </p>
            </Card>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- Protection / trust ---------- */
  function Protection() {
    const items = [
      { ic: 'landmark', tone: 'accent', t: i18n.t('protectionFundTitle'), d: i18n.t('protectionFundDesc') },
      { ic: 'badge-check', tone: 'brand', t: i18n.t('protectionAgreementsTitle'), d: i18n.t('protectionAgreementsDesc') },
      { ic: 'activity', tone: 'brand', t: i18n.t('protectionTransparencyTitle'), d: i18n.t('protectionTransparencyDesc') },
    ];
    return (
      <section id="protection" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-canvas)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-9)', alignItems: 'center' }} className="olis-protGrid">
          <div>
            <SectionHead eyebrow={i18n.t('sectionProtectionEyebrow')} title={i18n.t('sectionProtectionTitle')} sub={i18n.t('sectionProtectionSub')} />
            <div style={{ display: 'flex', gap: 14, marginTop: 28, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderRadius: 'var(--radius-md)', border: '1px solid rgba(29,138,82,0.22)', background: 'var(--accent-soft)' }}>
                <span style={{ color: 'var(--green-600)' }}><Icon name="shield-check" size={22} /></span>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 600, color: 'var(--green-600)' }}>100%</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{i18n.t('capitalCovered')}</div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-soft)', background: 'var(--surface-card)' }}>
                <span style={{ color: 'var(--brand)' }}><Icon name="clock" size={22} /></span>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 600, color: 'var(--text-strong)' }}>3 {i18n.t('lockedFor3Months').toLowerCase()}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{i18n.t('forWithdrawal')}</div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {items.map((it) => (
              <Card key={it.t} padding={22} interactive style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <IconTile name={it.ic} tone={it.tone} />
                <div>
                  <h3 style={{ fontSize: 17 }}>{it.t}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', marginTop: 6 }}>{it.d}</p>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- Testimonials ---------- */
  function Testimonials() {
    const t = [
      { n: i18n.t('testimonial1Name'), r: i18n.t('testimonial1Role'), q: i18n.t('testimonial1Quote') },
      { n: i18n.t('testimonial2Name'), r: i18n.t('testimonial2Role'), q: i18n.t('testimonial2Quote') },
      { n: i18n.t('testimonial3Name'), r: i18n.t('testimonial3Role'), q: i18n.t('testimonial3Quote') },
    ];
    return (
      <section id="returns" style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-alt)', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <SectionHead center eyebrow={i18n.t('testimonialsEyebrow')} title={i18n.t('testimonialsTitle')} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 'var(--space-7)' }} className="olis-testGrid">
            {t.map((x) => (
              <Card key={x.n} padding={24}>
                <div style={{ display: 'flex', gap: 3 }}>
                  {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={15} color="var(--brand)" />)}
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)', marginTop: 16 }}>"{x.q}"</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginTop: 20 }}>
                  <Avatar name={x.n} size={38} />
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-strong)' }}>{x.n}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{x.r}</div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- Final CTA — solid blue band ---------- */
  function FinalCTA({ onInvest }) {
    return (
      <section style={{ padding: 'var(--space-10) var(--gutter)', background: 'var(--surface-canvas)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', borderRadius: 'var(--radius-2xl)', background: 'var(--surface-brand)', padding: 'var(--space-9)', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
          <div style={{ position: 'relative', maxWidth: 640 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 24, padding: '0 10px', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.14)', color: '#fff', fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11.5, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
              <Icon name="shield-check" size={13} /> {i18n.t('finalCtaBadge')}
            </span>
            <h2 style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', marginTop: 18, letterSpacing: '-0.03em', color: '#fff' }}>
              {i18n.t('finalCtaHeadline')}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-on-dark)', marginTop: 16, opacity: 0.9 }}>
              {i18n.t('finalCtaDescription')}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <Button variant="accent" size="lg" onClick={onInvest} iconRight={<Icon name="arrow-right" size={18} />}>{i18n.t('finalCtaBtnCreateAccount')}</Button>
              <button onClick={() => window.location.href = `/${i18n.locale}/contact`} style={{ display: 'inline-flex', alignItems: 'center', height: 56, padding: '0 28px', borderRadius: 'var(--radius-md)', background: 'transparent', border: '1px solid rgba(255,255,255,0.4)', color: '#fff', fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 17, cursor: 'pointer' }}>{i18n.t('finalCtaBtnTalkAdvisor')}</button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { OLISAbout: About, OLISReserveFund: ReserveFund, OLISLegalFramework: LegalFramework, OLISHowItWorks: HowItWorks, OLISPlan: Plan, OLISProtection: Protection, OLISTestimonials: Testimonials, OLISFinalCTA: FinalCTA });
})();