// iConference website — components. Relies on window.COPY, window.NODES.
const { useState, useEffect } = React;

function Nav({ lang, setLang, onDemo, t }) {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  const links = [
    { href: "#areas", label: t.nav.areaA },
    { href: "#areas", label: t.nav.areaB },
    { href: "#framework", label: t.nav.framework },
    { href: "glossary/index.html?lang=" + lang, label: t.nav.glossary },
    { href: "#news", label: t.nav.news },
    { href: "#contact", label: t.nav.contact },
  ];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <img src="assets/iconference-logo-ochre.png" alt="iConference AG" />
        <div className="nav-links">
          {links.map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-right">
          <div className="lang">
            <button className={lang === "de" ? "on" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <button className="btn btn-primary nav-cta" onClick={onDemo}>{t.nav.demo}</button>
          <button className={"nav-burger" + (open ? " open" : "")} aria-label="Menü" aria-expanded={open} onClick={() => setOpen(!open)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      <div className={"nav-drawer" + (open ? " open" : "")}>
        {links.map((l, i) => <a key={i} href={l.href} onClick={close}>{l.label}</a>)}
        <button className="btn btn-primary nav-drawer-cta" onClick={() => { close(); onDemo(); }}>{t.nav.demo}</button>
      </div>
    </nav>
  );
}

function RagMotif({ lang }) {
  const pos = [
    { left: "50%", top: "10%" }, { left: "85%", top: "31%" },
    { left: "85%", top: "73%" }, { left: "50%", top: "92%" },
    { left: "15%", top: "73%" }, { left: "15%", top: "31%" },
  ];
  const pts = [[240, 38], [408, 118], [408, 277], [240, 350], [72, 277], [72, 118]];
  return (
    <div className="motif">
      <svg viewBox="0 0 480 380" preserveAspectRatio="none">
        {pts.map((p, i) => <line key={i} className="ln" x1="240" y1="190" x2={p[0]} y2={p[1]} />)}
      </svg>
      <div className="hub"><span className="hub-mark">RAG</span></div>
      {window.NODES.map((nd, i) => (
        <div className="node" key={nd.n} style={{ ...pos[i], animationDelay: (i * 0.06) + "s" }}>
          <i style={{ background: nd.c }}></i>{lang === "de" ? nd.n : nd.e}
        </div>
      ))}
    </div>
  );
}

function Hero({ t, lang, onDemo }) {
  return (
    <header className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">{t.hero.eyebrow}</div>
          <h1>{t.hero.h1a}<em>{t.hero.h1em}</em>{t.hero.h1b}</h1>
          <p>{t.hero.sub}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onDemo}>{t.hero.cta1}<i data-lucide="arrow-right"></i></button>
            <a className="btn btn-ondark" href="#framework">{t.hero.cta2}</a>
          </div>
        </div>
        <div className="hero-photo">
          <img src="assets/hero-path.jpg" alt="Baumbestandener Weg, der in die Ferne führt — viele Wege, ein Ziel" />
        </div>
      </div>
    </header>
  );
}

function Ribbon({ t }) {
  return (
    <div className="ribbon"><div className="wrap ribbon-inner">{t.ribbon}</div></div>
  );
}

function Areas({ t, lang, onDemo }) {
  return (
    <section id="areas"><div className="wrap">
      <div className="sec-head">
        <div className="eyebrow-l">{t.areas.eyebrow}</div>
        <h2>{t.areas.h2}</h2>
        <p>{t.areas.sub}</p>
      </div>
      <div className="areas-grid">
        {t.areas.items.map((it) => (
          <article className="area" key={it.h}>
            <div className="area-top">
              <div className="area-ico"><i data-lucide={it.icon}></i></div>
              <span className="eyebrow-l">{it.tag}</span>
            </div>
            <h3>{it.h}</h3>
            <p>{it.p}</p>
            <ul className="area-points">
              {it.points.map((pt) => (
                <li key={pt}><i data-lucide="check" style={{ width: 16, height: 16 }}></i>{pt}</li>
              ))}
            </ul>
            <button className="scard-link" onClick={onDemo}>{t.nav.demo} <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i></button>
            {it.confid && (
              <p className="area-confid"><i data-lucide="shield-check"></i><span>{it.confid} <a href={"nda.html?lang=" + lang}>{it.confidLink}</a></span></p>
            )}
          </article>
        ))}
      </div>
    </div></section>
  );
}

function Framework({ t, lang }) {
  return (
    <section id="framework" className="fw"><div className="wrap">
      <div className="sec-head">
        <div className="eyebrow-l">{t.framework.eyebrow}</div>
        <h2>{t.framework.h2}</h2>
        <p>{t.framework.sub}</p>
      </div>
      <div className="fw-grid">
        <div className="fw-canvas"><RagMotif lang={lang} /></div>
        <div className="fw-pillars">
          {t.framework.pillars.map((p) => (
            <div className="pillar" key={p.h}>
              <div className="pillar-ico"><i data-lucide={p.icon}></i></div>
              <div>
                <h4>{p.h}</h4>
                <p>{p.p}</p>
              </div>
            </div>
          ))}
          <a className="btn btn-secondary" href={"framework/index.html?lang=" + lang}>{t.framework.cta}<i data-lucide="arrow-right"></i></a>
        </div>
      </div>
    </div></section>
  );
}

function Stance({ t }) {
  const s = t.stance;
  return (
    <section id="stance" className="stance"><div className="wrap">
      <div className="stance-head">
        <div className="eyebrow-l">{s.eyebrow}</div>
        <h2>{s.h2a}<em>{s.h2em}</em>{s.h2b}</h2>
        <p className="stance-lead">{s.lead}</p>
      </div>
      <div className="stance-grid">
        {s.points.map((p) => (
          <div className="stance-point" key={p.h}>
            <div className="ico"><i data-lucide={p.icon}></i></div>
            <h4>{p.h}</h4>
            <p>{p.p}</p>
          </div>
        ))}
      </div>
      <div className="stance-kicker"><i data-lucide="lightbulb"></i><p>{s.kicker}</p></div>
    </div></section>
  );
}

function Why({ t }) {
  return (
    <section id="why" className="why"><div className="wrap">
      <div className="sec-head">
        <div className="eyebrow-l">{t.why.eyebrow}</div>
        <h2>{t.why.h2}</h2>
      </div>
      <div className="why-grid">
        {t.why.items.map((it) => (
          <div className="why-item" key={it.h}>
            <div className="ico"><i data-lucide={it.icon}></i></div>
            <h4>{it.h}</h4>
            <p>{it.p}</p>
          </div>
        ))}
      </div>
      <div className="quote"><p>{t.why.quote}</p><span>{t.why.cite}</span></div>
    </div></section>
  );
}

function CTA({ t, onDemo }) {
  return (
    <section id="contact" className="cta"><div className="wrap cta-inner">
      <div>
        <h2>{t.cta.h2}</h2>
        <div className="contact">
          <a href="tel:+41796388300"><b>+41 79 638 83 00</b></a> · <a href="mailto:info@iconference.ch">info@iconference.ch</a><br />
          Grafenaustrasse 15 · 6300 Zug · Switzerland
        </div>
      </div>
    </div></section>
  );
}

function Footer({ t, lang, onDemo }) {
  return (
    <footer className="footer"><div className="wrap">
      <div className="footer-grid">
        <div>
          <img src="assets/iconference-logo-white.png" alt="iConference" />
          <div className="addr">iConference AG<br />Grafenaustrasse 15<br />6300 Zug · Switzerland<br />+41 79 638 83 00</div>
        </div>
        {t.footer.cols.map((col) => (
          <div key={col.h}>
            <h5>{col.h}</h5>
            <ul>{col.links.map((l) => { if (l === "Erstgespräch buchen" || l === "Book an intro call") return <li key={l}><a href="#contact" onClick={(e) => { e.preventDefault(); onDemo(); }}>{l}</a></li>; const href = ({ "Über uns": "#about", "About": "#about", "Kontakt": "#contact", "Contact": "#contact", "KI-Beratung": "#areas", "AI consulting": "#areas", "KI-Framework": "#framework", "AI framework": "#framework", "KI-Begriffe": "glossary/index.html?lang=" + lang, "AI Glossary": "glossary/index.html?lang=" + lang, "KI-Dienstleistung": "#areas", "AI services": "#areas", "Ansatz": "#why", "Approach": "#why", "Über diese Website": "ueber-diese-website.html?lang=" + lang, "About this website": "ueber-diese-website.html?lang=" + lang, "Visitenkarte": "visitenkarte.html", "Business card": "visitenkarte.html", "Impressum": "impressum.html?lang=" + lang, "Datenschutz": "datenschutz.html?lang=" + lang, "AGB": "agb.html?lang=" + lang, "NDA-Vorlage": "nda.html?lang=" + lang, "Imprint": "impressum.html?lang=" + lang, "Privacy": "datenschutz.html?lang=" + lang, "Terms": "agb.html?lang=" + lang, "NDA template": "nda.html?lang=" + lang })[l] || "#"; return <li key={l}><a href={href}>{l}</a></li>; })}</ul>
          </div>
        ))}
      </div>
      <div className="footer-bottom">
        <span>{t.footer.rights}</span>
        <span>{t.footer.author}</span>
        <span>Made in Switzerland 🇨🇭</span>
      </div>
    </div></footer>
  );
}

function DemoModal({ t, onClose }) {
  const [sent, setSent] = useState(false);
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}><i data-lucide="x"></i></button>
        {!sent ? (
          <React.Fragment>
            <h3>{t.modal.h}</h3>
            <p className="sub">{t.modal.sub}</p>
            <div className="field"><label>{t.modal.name}</label><input type="text" /></div>
            <div className="field"><label>{t.modal.email}</label><input type="email" placeholder="you@company.com" /></div>
            <div className="field"><label>{t.modal.msg}</label><textarea rows="3"></textarea></div>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={() => setSent(true)}>{t.modal.submit}</button>
          </React.Fragment>
        ) : (
          <div className="success">
            <div className="ok"><i data-lucide="check"></i></div>
            <h3>{t.modal.okH}</h3>
            <p className="sub" style={{ marginBottom: 0 }}>{t.modal.okP}</p>
          </div>
        )}
      </div>
    </div>
  );
}

function RagSection({ t, lang }) {
  return (
    <section id="rag" className="rag"><div className="wrap">
      <div className="sec-head">
        <div className="eyebrow-l">{t.rag.eyebrow}</div>
        <h2>{t.rag.h2}</h2>
        <p>{t.rag.sub}</p>
      </div>
      <div className="rag-cards">
        {t.rag.cards.map((c, i) => (
          <article className={"rcard" + (i === 2 ? " dark" : "")} key={c.L}>
            <div className="rcard-head">
              <span className="rletter" style={{ color: i === 1 ? "var(--navy-700)" : i === 2 ? "var(--ochre-300)" : "var(--ochre-500)" }}>{c.L}</span>
              <div className="rtitles"><h3>{c.t}</h3><span>{c.s}</span></div>
            </div>
            <p>{c.p}</p>
          </article>
        ))}
      </div>
      <a className="btn btn-secondary rag-cta" href={"explainer/index.html?lang=" + lang}>{t.rag.cta}<i data-lucide="arrow-right"></i></a>
    </div></section>
  );
}

function NewsSection({ t, items, lang }) {
  const base = (items && items.length) ? items : t.news.items.map((it) => ({ key: it.h, ...it }));
  const list = base.slice(0, 8);
  return (
    <section id="news" className="news"><div className="wrap">
      <div className="sec-head">
        <div className="news-eyebrow"><span className="eyebrow-l">{t.news.eyebrow}</span><span className="news-badge"><i data-lucide="sparkles"></i>{t.news.badge}</span></div>
        <h2>{t.news.h2}</h2>
        <p>{t.news.sub}</p>
      </div>
      <div className="news-grid">
        {list.map((it) => (
          <article className="ncard" key={it.key || it.h}>
            <div className="ncard-top"><span className="ntag">{it.tag}</span><span className="ndate">{it.date}</span></div>
            <h3>{it.h}</h3>
            <p>{it.p}</p>
            {it.source && it.source.url && (
              <a className="ncard-src" href={it.source.url} target="_blank" rel="noopener noreferrer">
                <i data-lucide="external-link"></i>{it.source.name ? t.news.sourceLabel + ": " + it.source.name : t.news.sourceLabel}
              </a>
            )}
          </article>
        ))}
      </div>
      <a className="btn btn-secondary news-all" href={"news/index.html?lang=" + (lang || "de")}>{t.news.allNews}<i data-lucide="arrow-right"></i></a>
      <div className="news-note"><i data-lucide="refresh-cw"></i>{t.news.note}</div>
    </div></section>
  );
}

function AboutSection({ t }) {
  const a = t.about;
  return (
    <section id="about" className="about"><div className="wrap">
      <div className="sec-head"><div className="eyebrow-l">{a.eyebrow}</div></div>
      <div className="about-grid">
        <div className="portrait">
          <img className="mono-av" src="assets/georges-leuenberger.jpg" alt={a.name} />
          <h3>{a.name}</h3>
          <div className="prole">{a.role}</div>
        </div>
        <div>
          <p className="about-bio">{a.bio}</p>
          <div className="career">
            <div className="career-title">{a.careerTitle}</div>
            <ul>{a.career.map((c) => <li key={c}>{c}</li>)}</ul>
          </div>
        </div>
      </div>
    </div></section>
  );
}

Object.assign(window, { Nav, Hero, Ribbon, Areas, Framework, RagSection, Stance, NewsSection, AboutSection, Why, CTA, Footer, DemoModal });