// Marketing sections: trust marquee, services, portfolio, process, why, quote, CTA.
const { Icon: DSIcon, Badge } = window.ArmaekDesignSystem_06a5c5;

function useI18n() {
  const { lang } = window.ArmaekI18n.useLang();
  return { lang, t: window.ArmaekI18n.STR[lang], data: window.ArmaekData.getData(lang) };
}

/* ---- Trust marquee band ---- */
function TrustBand() {
  const { t } = useI18n();
  const row = [...t.trust.items, ...t.trust.items];
  return (
    <div className="band" style={{ padding: '26px 0' }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <span className="faint" style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase',
          letterSpacing: 'var(--tracking-wider)', fontSize: 'var(--text-2xs)', whiteSpace: 'nowrap' }}>
          {t.trust.label}
        </span>
        <div className="marquee" style={{ flex: 1 }}>
          <div className="marquee-track">
            {row.map((x, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 14,
                fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)',
                fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>
                <DSIcon name="star" size={14} color="var(--accent)" /> {x}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Portfolio with filter chips ---- */
function Portfolio() {
  const { useReveal, ImagePanel } = window.ArmaekLib;
  const { t, data } = useI18n();
  const ref = useReveal();
  return (
    <section id="portfolio" className="section band" ref={ref}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="kicker center">{t.portfolio.kicker}</span>
          <h2 className="h2" style={{ marginTop: 16 }}>{t.portfolio.title}</h2>
        </div>
        <div className="cols-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
          {data.portfolio.map(([ic, title, photo, iconImg]) => (
            <div key={title} className="surface lift" style={{ overflow: 'hidden' }}>
              <ImagePanel icon={ic} src={photo} style={{ height: 200 }} />
              <div style={{ padding: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  {iconImg
                    ? <img src={window.AURL(iconImg)} alt="" loading="lazy" style={{ width: 30, height: 30, flexShrink: 0 }} />
                    : <span style={{ color: 'var(--accent-bright)', display: 'flex' }}><DSIcon name={ic} size={18} /></span>}
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, textTransform: 'uppercase',
                    letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-md)', color: 'var(--text-heading)', margin: 0, flex: 1 }}>{title}</h3>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Process ---- */
function Process() {
  const { useReveal } = window.ArmaekLib;
  const { t, data } = useI18n();
  const ref = useReveal();
  return (
    <section id="proces" className="section" ref={ref}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 48 }}>
          <h2 className="h2" style={{ maxWidth: 560 }}>{t.process.title}</h2>
        </div>
        <div className="cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
          {data.process.map(([n, title, d], i) => (
            <div key={n} className="reveal" data-d={String(i + 1)}
              style={{ padding: '0 26px 0 0', position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                <span className="display gold-text" style={{ fontSize: 34 }}>{n}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--gradient-gold-h)', opacity: 0.5 }} />
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, textTransform: 'uppercase',
                letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-md)', color: 'var(--text-heading)', marginBottom: 10 }}>{title}</h3>
              <p className="faint" style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-normal)' }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Why Armaek (split with feature list) ---- */
function Why() {
  const { useReveal, ImagePanel } = window.ArmaekLib;
  const { t, data } = useI18n();
  const ref = useReveal();
  return (
    <section id="preco" className="section band" ref={ref}>
      <div className="wrap why-split" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div className="reveal why-img" style={{ height: 440, borderRadius: 'var(--radius-md)', overflow: 'hidden',
          border: '1px solid var(--border-hairline)', boxShadow: 'var(--shadow-lg)' }}>
          <ImagePanel icon="award" src={WHY_PHOTO} style={{ height: '100%' }} />
        </div>
        <div>
          <span className="kicker reveal">{t.why.kicker}</span>
          <h2 className="h2 reveal" data-d="1" style={{ marginTop: 16, marginBottom: 28, maxWidth: 520 }}>{t.why.title}</h2>
          <div className="why-vals" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26 }}>
            {data.values.map(([ic, title, d], i) => (
              <div key={title} className="reveal" data-d={String(i + 1)} style={{ display: 'flex', gap: 14 }}>
                <span style={{ color: 'var(--accent-bright)', flexShrink: 0 }}><DSIcon name={ic} size={24} strokeWidth={1.6} /></span>
                <div>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, textTransform: 'uppercase',
                    letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-sm)', color: 'var(--text-heading)', marginBottom: 6 }}>{title}</h4>
                  <p className="faint" style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-normal)' }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Quote / statement band ---- */
function QuoteBand() {
  const { useReveal } = window.ArmaekLib;
  const { t } = useI18n();
  const q = t.quoteBand;
  const ref = useReveal();
  return (
    <section className="section" ref={ref} style={{ textAlign: 'center' }}>
      <div className="wrap reveal" style={{ maxWidth: 900 }}>
        <DSIcon name="shield-check" size={40} color="var(--accent)" />
        <p className="display" style={{ fontSize: 'clamp(24px,3vw,40px)', lineHeight: 1.15, marginTop: 24, textTransform: 'none', fontWeight: 500 }}>
          {q.pre}<span className="gold-text">{q.gold}</span>{q.post}
        </p>
        <div className="faint" style={{ marginTop: 26, fontFamily: 'var(--font-display)', textTransform: 'uppercase',
          letterSpacing: 'var(--tracking-wider)', fontSize: 'var(--text-xs)' }}>
          Marek Hupcej · {q.role}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA band ---- */
function CtaBand({ onQuote }) {
  const { useReveal } = window.ArmaekLib;
  const { t } = useI18n();
  const ref = useReveal();
  return (
    <section id="kontakt" ref={ref} className="section" style={{ paddingBlock: 0 }}>
      <div className="wrap">
        <div className="reveal surface" style={{
          position: 'relative', overflow: 'hidden', padding: 'clamp(40px,6vw,72px)',
          textAlign: 'center', borderColor: 'var(--border-gold)',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--glow-warm)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <h2 className="h2" style={{ maxWidth: 640, margin: '0 auto 18px' }}>{t.cta.title}</h2>
            <p className="muted" style={{ maxWidth: 480, margin: '0 auto 30px' }}>{t.cta.sub}</p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={onQuote}>
                {t.quote} <DSIcon name="arrow-right" size={17} className="arr" />
              </button>
              <a href={'mailto:' + ARMAEK_EMAIL} className="btn btn-ghost btn-lg">{t.cta.team}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Interactive service showcase (tabs, landing) ---- */
const SVC_DEFAULT_PHOTOS = {
  'defense-material': 'assets/photos/svc-defense-material.jpg',
  'obchodne-zastupenie': 'assets/photos/svc-obchodne-zastupenie.jpg',
  'konzultacie': 'assets/photos/svc-konzultacie.jpg',
  'logisticka-podpora': 'assets/photos/svc-logisticka-podpora.jpg',
};
const ARMAEK_OV = window.ARMAEK_OVERRIDES || {};
const SVC_PHOTOS = {};
['defense-material', 'obchodne-zastupenie', 'konzultacie', 'logisticka-podpora'].forEach((slug, i) => {
  SVC_PHOTOS[slug] = (ARMAEK_OV.images && ARMAEK_OV.images.svc && ARMAEK_OV.images.svc[i]) || SVC_DEFAULT_PHOTOS[slug];
});
const WHY_PHOTO = (ARMAEK_OV.images && ARMAEK_OV.images.why) || 'assets/photos/why-armaek.jpg';
const ARMAEK_EMAIL = ARMAEK_OV.email || 'office@armaek.com';

function ServiceShowcase() {
  const { useReveal, ImagePanel } = window.ArmaekLib;
  const { t, data } = useI18n();
  const ref = useReveal();
  const [idx, setIdx] = React.useState(0);
  const s = data.services[idx];

  // Warm the cache for all tab photos so switching tabs never shows a half-loaded image.
  React.useEffect(() => {
    Object.values(SVC_PHOTOS).forEach((src) => { const im = new Image(); im.src = window.AURL(src); });
  }, []);
  return (
    <section id="sluzby-detail" className="section" ref={ref}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 48 }}>
          <h2 className="h2" style={{ maxWidth: 620 }}>{t.stacked.title}</h2>
        </div>
        {/* Mobile: all services stacked 01 text photo, 02 text photo... */}
        <div className="m-only-block svc-stack-m">
          {data.services.map((s, i) => (
            <div key={s.slug} className="svc-m reveal">
              <div className="svc-m-head">
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <h3>{s.title}</h3>
              </div>
              <p>{s.lead}</p>
              <div className="svc-m-photo">
                <ImagePanel icon={s.icon} src={SVC_PHOTOS[s.slug]} style={{ height: 260 }} />
              </div>
            </div>
          ))}
        </div>
        <div className="svc-showcase reveal m-hide" data-d="1">
          <div className="svc-tabs" role="tablist" aria-label={t.services.kicker}
            style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {data.services.map((x, i) => (
              <button key={x.slug} className={`svc-tab${i === idx ? ' on' : ''}`}
                role="tab" aria-selected={i === idx} onClick={() => setIdx(i)}>
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <span className="ttl">{x.title}</span>
              </button>
            ))}
          </div>
          <div key={s.slug} className="svc-panel surface" style={{ overflow: 'hidden' }}>
            <div className="svc-panel-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr', height: '100%' }}>
              <div style={{ padding: 'clamp(28px,3.4vw,48px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
                  letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-2xl)', color: 'var(--text-heading)', marginBottom: 14 }}>{s.title}</h3>
                <p className="muted" style={{ fontSize: 'var(--text-md)', lineHeight: 'var(--leading-normal)', marginBottom: 22, maxWidth: 460 }}>{s.lead}</p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 26 }}>
                  {s.capabilities.map(([ic, cap]) => (
                    <div key={cap} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ color: 'var(--accent-bright)', flexShrink: 0 }}><DSIcon name={ic} size={17} strokeWidth={1.6} /></span>
                      <span className="faint" style={{ fontSize: 'var(--text-sm)' }}>{cap}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10 }}>
                  <span className="display gold-text" style={{ fontSize: 30 }}>{s.stat[0]}</span>
                  <span className="faint" style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase',
                    letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-2xs)' }}>{s.stat[1]}</span>
                </div>
              </div>
              <div style={{ minHeight: 340 }}>
                <ImagePanel icon={s.icon} src={SVC_PHOTOS[s.slug]}
                  style={{ height: '100%', minHeight: 340 }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Sections = { TrustBand, ServiceShowcase, Portfolio, Process, Why, QuoteBand, CtaBand };