// ASBALD — main app shell.

const TWEAK_DEFAULTS = window.__TWEAKS__ || {
  palette: 'paper-navy',
  accent: 'sky',
  displayFont: 'rubik',
  density: 'comfortable',
  logoStyle: 'compact',
};

function applyTweaks(t) {
  const h = document.documentElement;
  h.setAttribute('data-palette', t.palette);
  h.setAttribute('data-accent', t.accent);
  h.setAttribute('data-display', t.displayFont);
  h.setAttribute('data-density', t.density);
  h.setAttribute('data-logo', t.logoStyle || 'compact');
}
applyTweaks(TWEAK_DEFAULTS);

const { useI18n } = window;

// ────────────────────────── BRAND ──────────────────────────
function Brand({ size = 'nav' }) {
  const { t } = useI18n();
  const logoStyle = document.documentElement.getAttribute('data-logo') || 'compact';

  if (logoStyle === 'banner') {
    // Full horizontal partnership banner.
    return (
      <div className={`brand brand-banner brand-${size}`}>
        <img src="assets/asbald-banner.png" alt={t('brand.full')} />
      </div>
    );
  }

  if (logoStyle === 'icon') {
    return (
      <div className={`brand brand-icon-only brand-${size}`}>
        <img src="assets/asbald-logo.png" alt="ASBALD" />
      </div>
    );
  }

  // Default: compact icon + wordmark
  return (
    <div className={`brand brand-${size}`}>
      <img src="assets/asbald-logo.png" alt="ASBALD" className="brand-mark-img" />
      <div className="brand-name">
        {t('brand.name')}
        <small dir="ltr">{t('brand.sub')}</small>
      </div>
    </div>
  );
}

// ────────────────────────── NAV ──────────────────────────
function Nav() {
  const { t, lang, setLang } = useI18n();
  const [active, setActive] = React.useState('home');
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: 'home', label: t('nav.home') },
    { id: 'about', label: t('nav.about') },
    { id: 'why', label: t('nav.why') },
    { id: 'sectors', label: t('nav.sectors') },
    { id: 'bundles', label: t('nav.bundles') },
    { id: 'products', label: t('nav.products') },
    { id: 'faq', label: t('nav.faq') },
    { id: 'contact', label: t('nav.contact') },
  ];

  const go = (id) => {
    setActive(id);
    setOpen(false);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 68;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} className="brand-link">
          <Brand size="nav" />
        </a>
        <nav className="nav-links">
          {links.map(l => (
            <a key={l.id} className={`nav-link ${active===l.id?'active':''}`}
               onClick={(e) => { e.preventDefault(); go(l.id); }}
               href={`#${l.id}`}>{l.label}</a>
          ))}
        </nav>
        <div className="nav-actions">
          <button
            className="lang-toggle"
            onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')}
            aria-label={`Switch to ${lang === 'ar' ? 'English' : 'Arabic'}`}
          >
            {t('nav.lang_toggle')}
          </button>
          <a className="nav-cta" href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>
            {t('nav.cta')} <span className="arrow">→</span>
          </a>
          <button
            className="nav-burger"
            onClick={() => setOpen(!open)}
            aria-label="Menu"
            aria-expanded={open}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {open && (
        <div className="nav-mobile">
          {links.map(l => (
            <a key={l.id} className={`nav-mlink ${active===l.id?'active':''}`}
               onClick={(e) => { e.preventDefault(); go(l.id); }}
               href={`#${l.id}`}>{l.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

// ────────────────────────── HERO ──────────────────────────
function Hero() {
  const { t } = useI18n();
  return (
    <section className="hero shell" id="home">
      <div className="hero-grid">
        <div>
          <div className="hero-meta">
            <span className="dot"></span>
            <span>{t('hero.eyebrow')}</span>
          </div>
          <h1>
            {t('hero.h1_1')}<br/>
            {t('hero.h1_2')}<br/>
            <em>{t('hero.h1_3')}</em>
          </h1>
          <p className="lede">{t('hero.lede')}</p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#sectors" onClick={(e) => {
              e.preventDefault();
              document.getElementById('sectors').scrollIntoView({behavior:'smooth', block:'start'});
            }}>
              {t('hero.cta_sectors')} <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="#products" onClick={(e) => {
              e.preventDefault();
              document.getElementById('products').scrollIntoView({behavior:'smooth', block:'start'});
            }}>
              {t('hero.cta_products')}
            </a>
          </div>

          <div className="hero-stats">
            <div>
              <div className="stat-num">{t('hero.stat1_num')}</div>
              <div className="stat-lbl">{t('hero.stat1_lbl')}</div>
            </div>
            <div>
              <div className="stat-num">{t('hero.stat2_num')}</div>
              <div className="stat-lbl">{t('hero.stat2_lbl')}</div>
            </div>
            <div>
              <div className="stat-num">{t('hero.stat3_num')}</div>
              <div className="stat-lbl">{t('hero.stat3_lbl')}</div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hv-credential">
            <div className="hvc-eyebrow">
              <span className="dot"></span>
              {t('hero.cred_eyebrow')}
            </div>

            <div className="hvc-partner">
              <img src="assets/peoplelink-logo.webp" alt="PeopleLink" className="hvc-pl-logo" />
              <div>
                <div className="hvc-pl-name">PeopleLink</div>
                <div className="hvc-pl-sub">{t('hero.cred_partner_sub')}</div>
              </div>
            </div>

            <div className="hvc-divider"></div>

            <div className="hvc-stat">
              <div className="hvc-num">{t('hero.stat1_num')}</div>
              <div className="hvc-lbl">{t('hero.cred_stat_lbl')}</div>
            </div>

            <div className="hvc-foot">
              <div className="hvc-f-item">
                <div className="hvc-f-k">{t('hero.cred_hq_k')}</div>
                <div className="hvc-f-v">{t('hero.cred_hq_v')}</div>
              </div>
              <div className="hvc-f-item">
                <div className="hvc-f-k">{t('hero.cred_sectors_k')}</div>
                <div className="hvc-f-v">{t('hero.cred_sectors_v')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────── PARTNER STRIP ──────────────────────────
function PartnerStrip() {
  const { t } = useI18n();
  // Real PeopleLink customer institutions — testimonial imagery.
  const items = [
    { name: 'King Khalid Hospital', src: 'https://www.peoplelinkvc.com/images/testimonials/King-Khalid-University.webp' },
    { name: 'Panjab University', src: 'https://www.peoplelinkvc.com/images/webp-images/case-studies/learning-made-easier.webp' },
    { name: 'APSRTC', src: 'https://www.peoplelinkvc.com/images/testimonials/APSRTC.webp' },
    { name: 'MTR Foods', src: 'https://www.peoplelinkvc.com/images/testimonials/MTR.webp' },
    { name: 'Sri Padmavati', src: 'https://www.peoplelinkvc.com/images/webp-images/case-studies/sri-padmavati-mahila-visvavidyalayam.webp' },
    { name: 'Vidharba Konkan', src: 'https://www.peoplelinkvc.com/images/testimonials/Vidharba-Konkan-Gramin-Bank.webp' },
    { name: 'Central Univ. of Jharkhand', src: 'https://www.peoplelinkvc.com/images/testimonials/Central-University-Of-Jharkhand.webp' },
    { name: 'DMI · St. Eugene', src: 'https://www.peoplelinkvc.com/images/webp-images/case-studies/dmi-st-eugene.webp' },
  ];
  const track = [...items, ...items, ...items, ...items];
  return (
    <div className="partner-strip">
      <div className="shell partner-head">
        <span className="ph-eyebrow">{t('partner.eyebrow')}</span>
        <span className="ph-sub">{t('partner.sub')}</span>
      </div>
      <div className="partner-track">
        {track.map((it, i) => (
          <span key={i} className="logo-item" title={it.name}>
            <img src={it.src} alt={it.name} loading="lazy" />
          </span>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────── ABOUT ──────────────────────────
function About() {
  const { t } = useI18n();
  return (
    <section className="about" id="about">
      <div className="shell about-grid">
        <div className="about-text">
          <div className="eyebrow">{t('about.eyebrow')}</div>
          <h2>{t('about.title')}</h2>
          <p>{t('about.p1')}</p>
          <p>{t('about.p2')}</p>
        </div>
        <div className="about-card">
          <div className="pl-mark">
            <img src="assets/peoplelink-logo.webp" alt="PeopleLink" className="pl-wordmark" />
            <div>
              <div className="pl-name">PeopleLink {t('about.pl_name')}</div>
              <div className="pl-sub">{t('about.pl_sub')}</div>
            </div>
          </div>
          <div className="row">
            <span className="k">{t('about.row_partnership_k')}</span>
            <span className="v">{t('about.row_partnership_v')}</span>
          </div>
          <div className="row">
            <span className="k">{t('about.row_coverage_k')}</span>
            <span className="v">{t('about.row_coverage_v')}</span>
          </div>
          <div className="row">
            <span className="k">{t('about.row_services_k')}</span>
            <span className="v">{t('about.row_services_v')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────── CONTACT ──────────────────────────
function Contact() {
  const { t } = useI18n();
  return (
    <section className="contact shell" id="contact">
      <div className="contact-card contact-static">
        <div className="contact-head">
          <div className="eyebrow">{t('contact.eyebrow')}</div>
          <h2>{t('contact.title')}</h2>
          <p className="contact-lede">{t('contact.lede')}</p>
        </div>

        <div className="contact-channels">
          <a className="ch-card" href="tel:+963964455271">
            <div className="ch-k">{t('contact.phone_k')}</div>
            <div className="ch-v" dir="ltr">+963 964 455 271</div>
            <div className="ch-sub">{t('contact.phone_sub')}</div>
          </a>
          <a className="ch-card" href="mailto:sales@asbaldgroup.com">
            <div className="ch-k">{t('contact.email_k')}</div>
            <div className="ch-v" dir="ltr">sales@asbaldgroup.com</div>
            <div className="ch-sub">{t('contact.email_sub')}</div>
          </a>
          <div className="ch-card">
            <div className="ch-k">{t('contact.hq_k')}</div>
            <div className="ch-v">{t('contact.hq_v')}</div>
            <div className="ch-sub">{t('contact.hq_sub')}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────── FOOTER ──────────────────────────
function Footer() {
  const { t } = useI18n();
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-brand">
            <Brand size="footer" />
            <p>{t('footer.tagline')}</p>
          </div>
          <div>
            <h4>{t('footer.sectors_h')}</h4>
            <ul>
              <li><a href="#sectors">{t('footer.sectors_health')}</a></li>
              <li><a href="#sectors">{t('footer.sectors_edu')}</a></li>
              <li><a href="#sectors">{t('footer.sectors_biz')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('footer.products_h')}</h4>
            <ul>
              <li><a href="#products">{t('footer.products_panels')}</a></li>
              <li><a href="#products">{t('footer.products_cams')}</a></li>
              <li><a href="#products">{t('footer.products_platforms')}</a></li>
              <li><a href="#products">{t('footer.products_outdoor')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('footer.contact_h')}</h4>
            <ul>
              <li><a href="tel:+963964455271" dir="ltr" style={{display:'inline-block'}}>+963 964 455 271</a></li>
              <li><a href="mailto:sales@asbaldgroup.com" dir="ltr" style={{display:'inline-block'}}>sales@asbaldgroup.com</a></li>
              <li>{t('hero.cred_hq_v')}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t('footer.copyright')}</span>
          <span className="pl-tag">
            <span className="dot"></span>
            {t('footer.pl_tag')}
          </span>
        </div>
      </div>
    </footer>
  );
}

// ────────────────────────── TWEAKS ──────────────────────────
const ACCENT_HEX = {
  sky:     '#2c7fbf',
  navy:    '#0f2d52',
  signal:  '#ff6a3c',
  emerald: '#34c98a',
  amber:   '#f0b430',
  cobalt:  '#4d7dff',
};

function TweaksUI() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  const onAccent = (hex) => {
    const tok = Object.entries(ACCENT_HEX).find(([, h]) => h === hex)?.[0] || 'sky';
    setTweak('accent', tok);
  };

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Logo">
        <window.TweakRadio
          label="Style"
          value={t.logoStyle || 'compact'}
          onChange={(v) => setTweak('logoStyle', v)}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'icon', label: 'Icon' },
            { value: 'banner', label: 'Banner' },
          ]}
        />
      </window.TweakSection>

      <window.TweakSection label="Palette">
        <window.TweakSelect
          label="Theme"
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            { value: 'paper-navy', label: 'Paper navy (default)' },
            { value: 'asbald-navy', label: 'Asbald navy' },
            { value: 'midnight', label: 'Midnight blue' },
            { value: 'warm-dark', label: 'Warm dark' },
            { value: 'cool-dark', label: 'Cool dark' },
            { value: 'paper', label: 'Paper · cream' },
          ]}
        />
      </window.TweakSection>

      <window.TweakSection label="Accent">
        <window.TweakColor
          label="Color"
          value={ACCENT_HEX[t.accent] || ACCENT_HEX.sky}
          onChange={onAccent}
          options={Object.values(ACCENT_HEX)}
        />
      </window.TweakSection>

      <window.TweakSection label="Layout">
        <window.TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'dense', label: 'Dense' },
            { value: 'comfortable', label: 'Comfy' },
            { value: 'airy', label: 'Airy' },
          ]}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// ────────────────────────── APP ──────────────────────────
function App() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
  };

  return (
    <window.I18nProvider>
      <Nav />
      <Hero />
      <PartnerStrip />
      <About />
      <window.WhyUs />
      <window.SectorsSection />
      <window.Bundles />
      <window.ProductsSection onExploreInClass={openModal} />
      <window.Certs />
      <window.Numbers />
      <window.Roadmap />
      <window.FAQ />
      <Contact />
      <Footer />

      {modalOpen && (
        <window.InClassModal
          onClose={closeModal}
          onContact={() => scrollTo('contact')}
        />
      )}

      <TweaksUI />
    </window.I18nProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);