/* global React */

// ─── TRANSLATIONS ─────────────────────────────────────────────────────────────
const STRINGS = {
  bs: {
    nav: { services: 'Usluge', clients: 'Klijenti', about: 'O nama', contact: 'Kontakt', cta: 'Zatražite ponudu' },
    hero: {
      eyebrow: 'PAMETNA RJEŠENJA · OD 2015.',
      title1: 'Digitalna infrastruktura,',
      title2: 'pouzdana kao struja.',
      sub: 'Media Board d.o.o. projektuje, gradi i održava WiFi i hotspot sisteme, računarske mreže, LoRa IoT rješenja i fulfillment platforme, za najveće brendove u Bosni i Hercegovini i regionu.',
      cta1: 'Zatražite ponudu',
      cta2: 'Pogledajte usluge',
      artLabel: 'live · BiH + region',
      artSub: '10+ godina · 2015 → danas',
    },
    stats: [
      { num: '10', sup: '+ god.', label: 'iskustva na zahtjevnom tržištu' },
      { num: '2015', label: 'godina osnivanja' },
      { num: '6', label: 'oblasti ekspertize pod jednim krovom' },
      { num: 'BiH', label: 'i šire, regionalna pokrivenost' },
    ],
    services: {
      eyebrow: 'ČIME SE BAVIMO',
      title: 'Šest usluga, jedna kompetencija: povezana infrastruktura.',
      lede: 'Bez podizvođača za ono što je važno. Hardver, mreža, software i operativa pod istim krovom, što znači da kad nešto stane, jedan tim zna gdje da gleda.',
      items: [
        { tag: '01', title: 'WiFi mreže i hotspot sistemi', body: 'Od malih poslovnih prostora do velikih javnih i komercijalnih lokacija: projektovanje, instalacija i upravljanje WiFi pokrivanjem koje radi pod opterećenjem.' },
        { tag: '02', title: 'Računarske mreže', body: 'Projektovanje, implementacija i održavanje računarskih mreža, od kancelarije do data centra. Routing, switching, monitoring na jednom SLA.' },
        { tag: '03', title: 'Smart Digital sistemi', body: 'Inteligentna rješenja za digitalizaciju poslovnih procesa, od evidencije do automatizacije, integrisana sa postojećim sistemima klijenta.' },
        { tag: '04', title: 'LoRa tehnologija', body: 'Bežična komunikacija velikog dometa i niske potrošnje za IoT primjene: senzorika, telemetrija, smart-city. Standardna LoRaWAN oprema.' },
        { tag: '05', title: 'E-commerce platforme', body: 'Razvoj i upravljanje online prodajnim kanalima, od integracije sa skladištem do plaćanja i izvještaja. Skalabilno, sa pravim podacima.' },
        { tag: '06', title: 'Fulfillment usluge', body: 'Logistika i obrada narudžbi za e-commerce poslovanje: magacin, pakovanje, otprema, povrat. Jedan partner za cijeli lanac.' },
      ],
    },
    clients: {
      eyebrow: 'KLIJENTI KOJI NAM VJERUJU',
      title: 'Povjerenje vodećih brendova u regionu.',
      lede: 'Tokom deset godina rada uspješno smo realizovali projekte za neke od najvećih brendova u Bosni i Hercegovini i regionu, u industriji pića, finansijama, retailu i javnom sektoru.',
      note: '* Logotipi klijenata se dodaju nakon dobijanja saglasnosti za javno prikazivanje.',
      items: ['Coca-Cola', 'Vodeći pivski brendovi', 'Banke i finansijske institucije', 'Kladionice', 'Maloprodajni lanci', 'Javne i komercijalne lokacije'],
    },
    about: {
      eyebrow: 'O NAMA',
      title: 'Tehnička ekspertiza u lokalnom kontekstu.',
      body: 'Media Board d.o.o. je tehnološka kompanija sa sjedištem u Bosni i Hercegovini. Od 2015. godine pružamo napredna digitalna i mrežna rješenja klijentima u BiH i šire. Naš tim prati tehnološke trendove i prilagođava rješenja specifičnim potrebama svakog klijenta, bez obzira na veličinu projekta.',
      list: [
        'Sjedište u Banja Luci, projekti širom regiona.',
        'Vlastiti inženjerski tim, bez ključnih podizvođača.',
        'Od malih lokacija do enterprise mreža i smart-city projekata.',
        'Hardver + software + operativna podrška na istom SLA.',
      ],
      imgLabel: 'SLIKA TIMA / TERENA',
      imgSub: 'placeholder, pošaljite fotografiju',
    },
    contact: {
      eyebrow: 'KONTAKT',
      title: 'Recite nam šta treba povezati.',
      lede: 'Odgovaramo u roku od jednog radnog dana, sa konkretnim prijedlogom.',
      labels: { name: 'Ime i prezime', company: 'Kompanija', email: 'Email', phone: 'Telefon', message: 'Poruka' },
      placeholders: { name: 'Vaše ime', company: 'Naziv firme', email: 'ime@firma.ba', phone: '+387 …', message: 'Ukratko opišite projekat: lokacija, vrsta usluge, rok, šta već imate u funkciji.' },
      submit: 'Pošalji upit',
      note: 'Slanjem upita slažete se sa našom politikom privatnosti. Bez spama.',
      success: 'Hvala, vaša poruka je poslana. Javljamo se u roku od jednog radnog dana.',
      error: 'Greška pri slanju. Molimo kontaktirajte nas direktno na dragana@mediaboard.ba.',
      sending: 'Šalje se…',
    },
    footer: {
      desc: 'Pametna rješenja za digitalnu infrastrukturu. WiFi, mreže, LoRa, e-commerce i fulfillment. Vaš pouzdan partner u digitalnoj transformaciji.',
      headServices: 'Usluge',
      headCompany: 'Kompanija',
      headContact: 'Kontakt',
      links: {
        services: ['WiFi i hotspot', 'Računarske mreže', 'Smart Digital', 'LoRa / IoT', 'E-commerce', 'Fulfillment'],
        company: ['O nama', 'Klijenti', 'Kontakt', 'Karijera'],
      },
      copy: '© 2026 MEDIA BOARD d.o.o. · Sva prava zadržana',
      reg: 'Banja Luka, BiH',
    },
  },
  en: {
    nav: { services: 'Services', clients: 'Clients', about: 'About', contact: 'Contact', cta: 'Get a quote' },
    hero: {
      eyebrow: 'SMART DIGITAL SOLUTIONS · SINCE 2015',
      title1: 'Digital infrastructure,',
      title2: 'reliable as power.',
      sub: 'Media Board d.o.o. designs, builds and operates WiFi & hotspot systems, computer networks, LoRa IoT solutions and fulfilment platforms, za najveće brendove across Bosnia & Herzegovina and the wider region.',
      cta1: 'Get a quote',
      cta2: 'View services',
      artLabel: 'live · BiH + region',
      artSub: '10+ years · 2015 → today',
    },
    stats: [
      { num: '10', sup: '+ yrs', label: 'of experience in demanding markets' },
      { num: '2015', label: 'year founded' },
      { num: '6', label: 'service areas under one roof' },
      { num: 'BiH', label: 'and beyond, regional coverage' },
    ],
    services: {
      eyebrow: 'WHAT WE DO',
      title: 'Six services, one competency: connected infrastructure.',
      lede: 'No subcontractors for what matters. Hardware, network, software and operations under one roof, which means when something stops, one team knows where to look.',
      items: [
        { tag: '01', title: 'WiFi networks & hotspot systems', body: 'From small office spaces to large public and commercial locations, including design, installation and management of WiFi coverage that performs under load.' },
        { tag: '02', title: 'Computer networks', body: 'Design, implementation and maintenance of computer networks, from office to data centre. Routing, switching, monitoring on a single SLA.' },
        { tag: '03', title: 'Smart Digital systems', body: 'Intelligent solutions for digitalising business processes, from records management to automation, integrated with existing client systems.' },
        { tag: '04', title: 'LoRa technology', body: 'Long-range, low-power wireless communication for IoT applications: sensing, telemetry, smart-city. Standard LoRaWAN hardware.' },
        { tag: '05', title: 'E-commerce platforms', body: 'Development and management of online sales channels, from warehouse integration to payments and reporting. Scalable, with real data.' },
        { tag: '06', title: 'Fulfilment services', body: 'Logistics and order processing for e-commerce businesses: warehousing, packing, shipping, returns. One partner for the entire chain.' },
      ],
    },
    clients: {
      eyebrow: 'CLIENTS WHO TRUST US',
      title: 'Trusted by leading brands across the region.',
      lede: 'Over ten years of operation we have successfully delivered projects for some of the largest brands in Bosnia & Herzegovina and the wider region, across beverages, finance, retail and the public sector.',
      note: '* Client logos added once display consent is obtained.',
      items: ['Coca-Cola', 'Leading beer brands', 'Banks & financial institutions', 'Betting operators', 'Retail chains', 'Public & commercial venues'],
    },
    about: {
      eyebrow: 'ABOUT US',
      title: 'Technical expertise in a local context.',
      body: 'Media Board d.o.o. is a technology company headquartered in Bosnia & Herzegovina. Since 2015 we have provided advanced digital and network solutions to clients across BiH and the wider region. Our team follows the latest technological trends and tailors solutions to each client\'s specific needs, regardless of project scale.',
      list: [
        'Headquartered in Banja Luka; projects across the region.',
        'In-house engineering team, no key subcontractors.',
        'From small single-site locations to enterprise networks and smart-city projects.',
        'Hardware + software + operational support on one SLA.',
      ],
      imgLabel: 'TEAM / FIELD PHOTO',
      imgSub: 'placeholder, send your image',
    },
    contact: {
      eyebrow: 'CONTACT',
      title: 'Tell us what needs connecting.',
      lede: 'We respond within one business day, with a concrete proposal.',
      labels: { name: 'Full name', company: 'Company', email: 'Email', phone: 'Phone', message: 'Message' },
      placeholders: { name: 'Your name', company: 'Company name', email: 'name@company.com', phone: '+387 …', message: 'Briefly describe the project: location, service type, timeline, what you already have in place.' },
      submit: 'Send enquiry',
      note: 'By submitting you agree to our privacy policy. No spam.',
      success: 'Thank you, your message has been sent. We\'ll be in touch within one business day.',
      error: 'Sending failed. Please contact us directly at dragana@mediaboard.ba.',
      sending: 'Sending…',
    },
    footer: {
      desc: 'Smart digital solutions. WiFi, networks, LoRa, e-commerce and fulfilment, your reliable partner in digital transformation.',
      headServices: 'Services',
      headCompany: 'Company',
      headContact: 'Contact',
      links: {
        services: ['WiFi & hotspot', 'Computer networks', 'Smart Digital', 'LoRa / IoT', 'E-commerce', 'Fulfilment'],
        company: ['About us', 'Clients', 'Contact', 'Careers'],
      },
      copy: '© 2026 MEDIA BOARD d.o.o. · All rights reserved',
      reg: 'Banja Luka, BiH',
    },
  },
};

// ─── SHARED STATE: language ─────────────────────────────────────────────────
const LangCtx = React.createContext({ lang: 'bs', setLang: () => {} });
function useLang() {
  const { lang } = React.useContext(LangCtx);
  return STRINGS[lang];
}

// ─── MARK ──────────────────────────────────────────────────────────────────
function MBMark({ size = 32, pulsing = false }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" aria-label="Media Board">
      <g stroke="currentColor" strokeWidth="3.5" strokeLinecap="round">
        <line x1="46.46" y1="53.54" x2="35.78" y2="64.22"/>
        <line x1="53.54" y1="46.46" x2="64.22" y2="35.78"/>
        <line x1="46.46" y1="46.46" x2="38.60" y2="38.60"/>
        <line x1="54.70" y1="51.71" x2="65.89" y2="55.78"/>
        <line x1="51.58" y1="54.74" x2="57.95" y2="73.83"/>
      </g>
      <g stroke="currentColor" strokeWidth="3.5" fill="none">
        <circle cx="28" cy="72" r="9"/>
        <circle cx="72" cy="28" r="9"/>
      </g>
      <circle cx="50" cy="50" r="3.5" stroke="currentColor" strokeWidth="3" fill="none"/>
      <g stroke="var(--mb-accent)" strokeWidth="3.5" fill="none">
        <circle cx="34" cy="34" r="4.5"/>
        <circle cx="72" cy="58" r="4.5"/>
        <circle cx="60" cy="80" r="4.5"/>
      </g>
      {pulsing && (
        <g fill="var(--mb-accent)">
          {[[34,34,0],[72,58,.7],[60,80,1.4]].map(([cx,cy,delay]) => (
            <circle key={cx} cx={cx} cy={cy} r="4.5" opacity=".5">
              <animate attributeName="r" values="4.5;13;4.5" dur="2.2s" begin={`${delay}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity" values=".5;0;.5" dur="2.2s" begin={`${delay}s`} repeatCount="indefinite"/>
            </circle>
          ))}
        </g>
      )}
    </svg>
  );
}

// ─── ICONS ─────────────────────────────────────────────────────────────────
const WIcons = {
  wifi:    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1"/></svg>,
  network: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 17h.01M10 17h.01M14 17h.01"/><path d="M18 13V8a4 4 0 0 0-8 0"/></svg>,
  cpu:     <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></svg>,
  radio:   <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4.93 19.07A10 10 0 0 1 4.93 4.93"/><path d="M7.76 16.24a6 6 0 0 1 0-8.48"/><path d="M16.24 7.76a6 6 0 0 1 0 8.48"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><circle cx="12" cy="12" r="2"/></svg>,
  cart:    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>,
  pkg:     <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
  arrowR:  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  phone:   <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  mail:    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  pin:     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  check:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
};

const svcIcons = [WIcons.wifi, WIcons.network, WIcons.cpu, WIcons.radio, WIcons.cart, WIcons.pkg];

// ─── NAV ───────────────────────────────────────────────────────────────────
function Nav() {
  const t = useLang();
  const { lang, setLang } = React.useContext(LangCtx);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const scrollTo = (id) => {
    setMenuOpen(false);
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 180);
  };
  // Close on outside click
  React.useEffect(() => {
    if (!menuOpen) return;
    const handler = (e) => {
      if (!e.target.closest('.w-mobile-drawer') && !e.target.closest('.w-hamburger')) setMenuOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [menuOpen]);

  const links = [
    { label: t.nav.services, id: 'usluge' },
    { label: t.nav.clients, id: 'klijenti' },
    { label: t.nav.about, id: 'o-nama' },
    { label: t.nav.contact, id: 'kontakt' },
  ];

  return (
    <>
      <nav className="w-nav">
        <div className="w-nav-inner">
          <a href="#top" className="w-nav-logo">
            <MBMark size={28}/><span className="w-nav-logo-text">MEDIA BOARD</span>
          </a>
          {/* Desktop links */}
          <div className="w-nav-links">
            {links.map(l => <a key={l.id} href={`#${l.id}`} onClick={e=>{e.preventDefault();scrollTo(l.id)}}>{l.label}</a>)}
          </div>
          {/* Language toggle */}
          <button onClick={() => setLang(lang === 'bs' ? 'en' : 'bs')} style={{
            background:'transparent', border:'1px solid var(--mb-border-1)',
            borderRadius:6, padding:'5px 10px', cursor:'pointer',
            fontFamily:'var(--mb-font-mono)', fontSize:12, fontWeight:600,
            color:'var(--mb-fg-1)', letterSpacing:'.06em', transition:'background .2s',
          }}>{lang === 'bs' ? 'EN' : 'BS'}</button>
          {/* Desktop CTA */}
          <button className="w-nav-cta" onClick={() => scrollTo('kontakt')}>{t.nav.cta}</button>
          {/* Hamburger (mobile only) */}
          <button className={`w-hamburger ${menuOpen ? 'open' : ''}`} aria-label="Meni" onClick={() => setMenuOpen(o => !o)}>
            <span/><span/><span/>
          </button>
        </div>
      </nav>

      {/* Mobile CTA strip — below nav, above hero, shown on mobile via CSS */}
      <div className="w-mobile-cta-strip">
        <button className="w-nav-cta" style={{width:'100%',borderRadius:0,padding:'14px 20px',fontSize:15}}
          onClick={() => scrollTo('kontakt')}>{t.nav.cta}</button>
      </div>

      {/* Mobile drawer */}
      <div className={`w-mobile-menu ${menuOpen ? 'open' : ''}`} onClick={e => { if(e.target===e.currentTarget) setMenuOpen(false); }}>
        <div className="w-mobile-drawer">
          <div className="w-mobile-drawer-head">
            <a href="#top" className="w-nav-logo" onClick={() => setMenuOpen(false)}>
              <MBMark size={22}/><span className="w-nav-logo-text">MEDIA BOARD</span>
            </a>
            <button onClick={() => setMenuOpen(false)} style={{background:'none',border:'none',cursor:'pointer',fontSize:22,color:'var(--mb-fg-1)',padding:4}}>✕</button>
          </div>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={e=>{e.preventDefault();scrollTo(l.id)}}>{l.label}</a>
          ))}
          <div style={{marginTop:8,paddingTop:16,borderTop:'1px solid var(--mb-border-1)',display:'flex',gap:10,alignItems:'center'}}>
            <span style={{fontFamily:'var(--mb-font-mono)',fontSize:12,color:'var(--mb-fg-2)'}}>Jezik:</span>
            <button onClick={() => setLang(lang === 'bs' ? 'en' : 'bs')} style={{
              background:'var(--mb-ink-50)', border:'1px solid var(--mb-border-1)',
              borderRadius:6, padding:'5px 12px', cursor:'pointer',
              fontFamily:'var(--mb-font-mono)', fontSize:12, fontWeight:700, color:'var(--mb-fg-1)',
            }}>{lang === 'bs' ? 'EN' : 'BS'}</button>
          </div>
          <button className="w-mobile-drawer-cta" onClick={() => scrollTo('kontakt')}>{t.nav.cta}</button>
        </div>
      </div>
    </>
  );
}

// ─── HERO ──────────────────────────────────────────────────────────────────
function Hero({ layout = 'split' }) {
  const t = useLang().hero;
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  return (
    <section className={`w-hero layout-${layout}`} id="top">
      <div>
        <div className="w-hero-eyebrow">{t.eyebrow}</div>
        <h1 className="w-hero-title">{t.title1}<br/><em>{t.title2}</em></h1>
        <p className="w-hero-sub">{t.sub}</p>
        <div className="w-hero-cta">
          <button className="w-btn w-btn-primary" onClick={() => scrollTo('kontakt')}>{t.cta1} {WIcons.arrowR}</button>
          <button className="w-btn w-btn-secondary" onClick={() => scrollTo('usluge')}>{t.cta2}</button>
        </div>
      </div>
      <div className="w-hero-art">
        <div className="grid" style={{color:'var(--mb-fg-1)'}}/>
        <MBMark size={280} pulsing/>
        <div className="label-tl"><span style={{width:8,height:8,borderRadius:999,background:'var(--mb-accent)',display:'inline-block'}}/>{t.artLabel}</div>
        <div className="label-br">{t.artSub}</div>
      </div>
    </section>
  );
}

// ─── STATS ─────────────────────────────────────────────────────────────────
function Stats() {
  const t = useLang().stats;
  return (
    <section className="w-stats" style={{maxWidth:'var(--mb-container)',margin:'0 auto'}}>
      {t.map((s,i) => (
        <div key={i} className="w-stat">
          <div className="w-stat-num">{s.num}{s.sup && <sup>{s.sup}</sup>}</div>
          <div className="w-stat-label">{s.label}</div>
        </div>
      ))}
    </section>
  );
}

// ─── SERVICES ──────────────────────────────────────────────────────────────
function Services() {
  const t = useLang().services;
  return (
    <section className="w-section" id="usluge">
      <div className="w-inner">
        <div className="w-eyebrow">{t.eyebrow}</div>
        <h2 className="w-section-title">{t.title}</h2>
        <p className="w-section-lede">{t.lede}</p>
        <div className="w-services">
          {t.items.map((it, i) => (
            <article key={i} className="w-service">
              <div className="w-service-icon">{svcIcons[i]}</div>
              <div className="w-service-tag">{it.tag}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CLIENTS ───────────────────────────────────────────────────────────────
function Clients() {
  const t = useLang().clients;
  return (
    <section className="w-section w-clients tinted" id="klijenti">
      <div className="w-inner">
        <div className="w-eyebrow">{t.eyebrow}</div>
        <h2 className="w-section-title">{t.title}</h2>
        <p className="w-section-lede">{t.lede}</p>
        <div className="w-client-grid">
          {t.items.map((name, i) => (
            <div key={i} className="w-client-chip">
              <span className="w-client-chip-num">{String(i+1).padStart(2,'0')}</span>
              <span>{name}</span>
            </div>
          ))}
        </div>
        <p style={{marginTop:20,fontSize:12,color:'var(--mb-fg-3)',fontFamily:'var(--mb-font-mono)'}}></p>
      </div>
    </section>
  );
}

// ─── ABOUT ─────────────────────────────────────────────────────────────────
function About() {
  const t = useLang().about;
  return (
    <section className="w-section" id="o-nama">
      <div className="w-inner">
        <div className="w-eyebrow">{t.eyebrow}</div>
        <h2 className="w-section-title" style={{marginBottom:20}}>{t.title}</h2>
        <p style={{fontSize:17,lineHeight:1.6,color:'var(--mb-fg-2)',margin:'0 0 8px',maxWidth:760}}>{t.body}</p>
        <ul className="w-about-list" style={{maxWidth:760}}>
          {t.list.map((item,i) => (
            <li key={i}><span className="num">{String(i+1).padStart(2,'0')}</span><span>{item}</span></li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─── CONTACT ───────────────────────────────────────────────────────────────
// Web3Forms — get your free access key at https://web3forms.com
// Replace WEB3FORMS_KEY below with the key you receive on your email.
const WEB3FORMS_KEY = '299733d1-79e3-4b26-a920-0333c139dfc1';

function Contact() {
  const t = useLang().contact;
  const [status, setStatus] = React.useState('idle');
  const formRef = React.useRef(null);

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    const fd = new FormData(formRef.current);
    const body = {
      access_key: WEB3FORMS_KEY,
      subject: `Novi upit sa mediaboard.ba: ${fd.get('name')}${fd.get('company') ? ' ('+fd.get('company')+')' : ''}`,
      name:    fd.get('name'),
      company: fd.get('company') || '—',
      email:   fd.get('email'),
      phone:   fd.get('phone') || '—',
      message: fd.get('message'),
      from_name: 'mediaboard.ba kontakt forma',
    };
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(body),
      });
      const json = await res.json();
      setStatus(json.success ? 'success' : 'error');
    } catch {
      setStatus('error');
    }
  };

  return (
    <section className="w-contact" id="kontakt">
      <div className="w-contact-inner">
        <div>
          <div className="w-eyebrow" style={{color:'rgba(255,255,255,.6)'}}>{t.eyebrow}</div>
          <h2 className="w-section-title" style={{color:'#fff'}}>{t.title}</h2>
          <p className="w-section-lede" style={{color:'rgba(255,255,255,.7)'}}>{t.lede}</p>
          <div className="w-contact-info">
            <div className="w-contact-info-item">{WIcons.mail}<div><span className="lbl">EMAIL</span>dragana@mediaboard.ba</div></div>
            <div className="w-contact-info-item">{WIcons.phone}<div><span className="lbl">TELEFON</span>+387 65 336 663</div></div>
            <div className="w-contact-info-item">{WIcons.pin}<div><span className="lbl">ADRESA</span>Sime Šolaje 1a, 78000 Banja Luka, BiH</div></div>
          </div>
        </div>
        <form className="w-form" ref={formRef} onSubmit={submit}>
          {status === 'success' ? (
            <div className="w-form-success">{WIcons.check}{t.success}</div>
          ) : (
            <>
              <div className="w-form-row">
                <div className="w-form-field"><label>{t.labels.name}</label><input name="name" className="w-input" placeholder={t.placeholders.name} required/></div>
                <div className="w-form-field"><label>{t.labels.company}</label><input name="company" className="w-input" placeholder={t.placeholders.company}/></div>
              </div>
              <div className="w-form-row">
                <div className="w-form-field"><label>{t.labels.email}</label><input name="email" type="email" className="w-input" placeholder={t.placeholders.email} required/></div>
                <div className="w-form-field"><label>{t.labels.phone}</label><input name="phone" className="w-input" placeholder={t.placeholders.phone}/></div>
              </div>
              <div className="w-form-field"><label>{t.labels.message}</label><textarea name="message" className="w-textarea" placeholder={t.placeholders.message} required/></div>
              {status === 'error' && <div style={{fontSize:13,color:'var(--mb-danger)',padding:'10px 0'}}>{t.error}</div>}
              <button className="w-form-submit" type="submit" disabled={status === 'sending'}>
                {status === 'sending' ? t.sending : <>{t.submit} {WIcons.arrowR}</>}
              </button>
              <div className="w-form-note">{t.note}</div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

// ─── FOOTER ────────────────────────────────────────────────────────────────
function Footer() {
  const t = useLang().footer;
  return (
    <footer className="w-footer">
      <div className="w-footer-inner">
        <div className="w-footer-brand">
          <a href="#top" className="w-nav-logo" style={{color:'#fff'}}>
            <MBMark size={26}/><span className="w-nav-logo-text" style={{color:'#fff'}}>MEDIA BOARD</span>
          </a>
          <p style={{marginTop:14,color:'rgba(255,255,255,.55)'}}>{t.desc}</p>
        </div>
        <div>
          <h4>{t.headServices}</h4>
          <ul>{t.links.services.map((l,i)=><li key={i}><a href="#usluge">{l}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.headCompany}</h4>
          <ul>{t.links.company.map((l,i)=><li key={i}><a href={['#o-nama','#klijenti','#kontakt','#'][i]}>{l}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.headContact}</h4>
          <ul>
            <li><a href="mailto:dragana@mediaboard.ba">dragana@mediaboard.ba</a></li>
            <li><a href="tel:+38765336663">+387 65 336 663</a></li>
            <li><a href="#">Sime Šolaje 1a, 78000 Banja Luka</a></li>
          </ul>
        </div>
      </div>
      <div className="w-footer-bottom">
        <span>{t.copy}</span>
        <span>{t.reg}</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  MBMark, WIcons, LangCtx,
  Nav, Hero, Stats, Services, Clients, About, Contact, Footer,
});
