/* global React, AIEngine, LogoMark, KogniteraMark,
   IconWhatsApp, IconVoice, IconWebChat, IconMobile, IconInstagram, IconEmail, IconHeadset,
   IconWelcome, IconDoc, IconChart, IconCalendar, IconCart, IconCopilot,
   IconShield, IconCar, IconBag, IconHealth, IconFinance, IconTelecom, IconTransit,
   IconArrow, IconArrowSm, IconCheck, IconX, IconPlay, IconSun, IconMoon,
   IconCloud, IconShieldCheck, IconGauge, IconBolt,
   IconLinkedIn, IconTwitter, IconYoutube, IconGlobe */

const { useEffect, useRef, useState } = React;

// ─── Count-up hook ─────────────────────────────────────────────────
function useCountUp(target, start, durationMs = 1400) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!start) { setV(0); return; }
    let raf, t0;
    const isFloat = !Number.isInteger(target);
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / durationMs);
      const eased = 1 - Math.pow(1 - p, 3);
      const val = target * eased;
      setV(isFloat ? Number(val.toFixed(1)) : Math.round(val));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, start, durationMs]);
  return v;
}

function useInView(ref, opts = { threshold: 0.25 }) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) setSeen(true); });
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref]);
  return seen;
}

// ─── NAV ───────────────────────────────────────────────────────────
function Nav({ theme, onToggleTheme, lang, onToggleLang, content }) {
  return (
    <nav className="nav" data-screen-label="nav">
      <div className="container nav-inner">
        <a className="nav-logo" href="#top" aria-label="Kognitera">
          <img src="assets/header_logo_dark.svg"  alt="Kognitera" className="nav-logo-img km-dark"  />
          <img src="assets/header_logo_light.svg" alt="Kognitera" className="nav-logo-img km-light" />
        </a>
        <div className="nav-links">
          {content.navLinks.map((l) => (
            <a key={l.href} className="nav-link" href={l.href}>{l.label}</a>
          ))}
        </div>
        <div className="nav-actions">
          <button className="lang-toggle" onClick={onToggleLang} aria-label="Language">
            <IconGlobe size={14} strokeWidth={2.2} />
            <span className={lang === "tr" ? "lang-active" : ""}>TR</span>
            <span style={{opacity: 0.35}}>/</span>
            <span className={lang === "en" ? "lang-active" : ""}>EN</span>
          </button>
          <button className="theme-toggle" onClick={onToggleTheme} aria-label="Toggle theme">
            {theme === "dark" ? <IconSun size={18} /> : <IconMoon size={18} />}
          </button>
          <a href="#demo" className="btn btn-primary btn-sm">
            {content.demoCta}
          </a>
        </div>
      </div>
    </nav>
  );
}

// ─── HERO ──────────────────────────────────────────────────────────
function Hero({ content }) {
  return (
    <section className="hero" id="top" data-screen-label="hero">
      <div className="hero-grid-bg" aria-hidden="true" />
      <div className="hero-glow" aria-hidden="true" />
      <div className="container hero-inner">
        <div className="hero-left">
          <div className="hero-badge">
            <span className="dot" />
            <span>{content.hero.badge}</span>
          </div>
          <h1 className="h-display hero-h1">
            {content.hero.h1a}<br/>
            <span className="grad">{content.hero.h1b}</span>
          </h1>
          <p className="lead hero-sub">{content.hero.sub}</p>
          <div className="hero-ctas">
            <a href="#demo" className="btn btn-primary btn-lg">
              {content.hero.cta1}
              <IconArrowSm className="arrow" />
            </a>
            <a href="#tour" className="btn btn-secondary btn-lg">
              <IconPlay size={16} /> {content.hero.cta2}
            </a>
          </div>
          <div className="hero-meta">
            {content.hero.meta.map((m, i) => (
              <span key={i} className="item"><span className="check"><IconCheck size={16} /></span>{m}</span>
            ))}
          </div>
        </div>
        <div className="hero-right">
          <div className="engine-wrap">
            <AIEngine content={content} />
          </div>
        </div>
      </div>

      {/* trust-strip — şimdilik referans olmadığı için gizli
      <div className="container">
        <div className="trust-strip">
          <span className="trust-label">{content.hero.trustLabel}</span>
          <div className="trust-logos">
            {content.hero.trustList.map((l) => <span key={l} className="trust-logo">{l}</span>)}
          </div>
        </div>
      </div>
      */}
    </section>
  );
}

// ─── METRICS ───────────────────────────────────────────────────────
function Metric({ value, suffix = "", prefix = "", label, accent, animate }) {
  const ref = useRef(null);
  const seen = useInView(ref);
  const isNum = typeof value === "number";
  const num = useCountUp(isNum ? value : 0, seen && animate && isNum, 1400);
  return (
    <div className="metric" ref={ref}>
      <div className={"metric-value" + (accent ? " accent" : "")}>
        {prefix}{isNum ? num : value}{suffix}
      </div>
      <div className="metric-label">{label}</div>
    </div>
  );
}

function Metrics({ content }) {
  return (
    <section className="metrics" data-screen-label="metrics">
      <span className="metrics-tag"><span className="pip"/>{content.metrics.tag}</span>
      <div className="container">
        <div className="metrics-grid">
          {content.metrics.items.map((m, i) => (
            <Metric key={i} {...m} animate />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROBLEM → SOLUTION ────────────────────────────────────────────
function ProblemSolution({ content }) {
  return (
    <section className="section" id="solution" data-screen-label="problem-solution">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow-mute">{content.ps.eyebrow}</span>
          <h2 className="h1">{content.ps.title}</h2>
          <p className="lead">{content.ps.sub}</p>
        </div>
        <div className="ps-grid">
          <div className="ps-col problems">
            <div className="ps-head">
              <span className="ps-stamp problem">{content.ps.problemsLabel}</span>
            </div>
            <div className="ps-list">
              {content.ps.problems.map((p, i) => (
                <div className="ps-item" key={i}>
                  <span className="marker"><IconX size={16} strokeWidth={2.4} /></span>
                  <div className="text">{p}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="ps-col solutions">
            <div className="ps-head">
              <span className="ps-stamp solution">{content.ps.solutionsLabel}</span>
            </div>
            <div className="ps-list">
              {content.ps.solutions.map((s, i) => (
                <div className="ps-item" key={i}>
                  <span className="marker"><IconCheck size={16} strokeWidth={2.6} /></span>
                  <div className="text">{s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CAPABILITIES ──────────────────────────────────────────────────
function Capabilities({ content }) {
  const ICONS = [IconCopilot, IconWelcome, IconDoc, IconChart, IconCalendar, IconCart];
  return (
    <section className="section" id="capabilities" data-screen-label="capabilities">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{content.caps.eyebrow}</span>
          <h2 className="h1">{content.caps.title}</h2>
          <p className="lead">{content.caps.sub}</p>
        </div>
        <div className="cap-grid">
          {content.caps.items.map((c, i) => {
            const Ic = ICONS[i];
            return (
              <div className="cap-card" key={i}>
                <span className="icon-frame"><Ic size={22} /></span>
                <div className="cap-num">/ / {String(i+1).padStart(2, "0")}</div>
                <h3 className="cap-title h3">{c.title}</h3>
                <p className="cap-desc">{c.desc}</p>
              </div>
            );
          })}
        </div>
        <div className="cap-summary">
          <span className="core-mark">
            <KogniteraMark size={32} />
          </span>
          <p>{content.caps.summary}</p>
          <a href="#demo" className="btn btn-secondary btn-sm">{content.caps.cta} <IconArrowSm /></a>
        </div>
      </div>
    </section>
  );
}

// ─── PHASES ────────────────────────────────────────────────────────
function Phases({ content }) {
  return (
    <section className="section phases" id="phases" data-screen-label="phases">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{content.phases.eyebrow}</span>
          <h2 className="h1">{content.phases.title}</h2>
          <p className="lead">{content.phases.sub}</p>
        </div>
        <div className="phases-track">
          <div className="phases-line" />
          <div className="phases-grid">
            {content.phases.items.map((p, i) => (
              <div className="phase" key={i}>
                <div className="phase-num">{String(i+1).padStart(2, "0")}</div>
                <div className="phase-card">
                  <span className="phase-eyebrow">{p.kicker}</span>
                  <h3 className="phase-title h3">{p.title}</h3>
                  <p className="phase-desc">{p.desc}</p>
                  <div className="phase-tag">{p.tag}</div>
                  <div className="phase-bar" aria-label={`autonomy level ${i+1} of 3`}>
                    {[0,1,2].map((s) => <span key={s} className={"seg" + (s <= i ? " on" : "")} />)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── SECTORS ───────────────────────────────────────────────────────
function Sectors({ content }) {
  const ICONS = [IconShield, IconCar, IconBag, IconHealth, IconFinance, IconTelecom, IconTransit];
  return (
    <section className="section" id="sectors" data-screen-label="sectors">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{content.sectors.eyebrow}</span>
          <h2 className="h1">{content.sectors.title}</h2>
          <p className="lead">{content.sectors.sub}</p>
        </div>
        <div className="sec-grid">
          {content.sectors.items.map((s, i) => {
            const Ic = ICONS[i];
            return (
              <div className="sec-tile" key={i}>
                <span className="sec-arrow"><IconArrowSm size={18} /></span>
                <div className="sec-row">
                  <span className="icon-frame"><Ic size={22} /></span>
                  <h3 className="sec-name h3">{s.name}</h3>
                </div>
                <p className="sec-use">{s.use}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── DEPLOYMENT ────────────────────────────────────────────────────
function Deployment({ content }) {
  return (
    <section className="section" id="deployment" data-screen-label="deployment">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{content.deploy.eyebrow}</span>
          <h2 className="h1">{content.deploy.title}</h2>
          <p className="lead">{content.deploy.sub}</p>
        </div>
        <div className="deploy-strip">
          {content.deploy.steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className="deploy-step">
                <span className="deploy-num">PHASE {String(i+1).padStart(2,"0")}</span>
                <h3 className="deploy-title h3">{s.title}</h3>
                <p className="deploy-desc">{s.desc}</p>
              </div>
              {i < content.deploy.steps.length - 1 && (
                <div className="deploy-arrow"><IconArrowSm size={20} strokeWidth={2.4} /></div>
              )}
            </React.Fragment>
          ))}
        </div>
        <div className="trust-chips">
          <div className="trust-chip">
            <span className="icon-frame"><IconCloud size={20} /></span>
            <div className="text"><strong>{content.deploy.chips[0].t}</strong><span>{content.deploy.chips[0].d}</span></div>
          </div>
          <div className="trust-chip">
            <span className="icon-frame"><IconGauge size={20} /></span>
            <div className="text"><strong>{content.deploy.chips[1].t}</strong><span>{content.deploy.chips[1].d}</span></div>
          </div>
          <div className="trust-chip">
            <span className="icon-frame"><IconShieldCheck size={20} /></span>
            <div className="text"><strong>{content.deploy.chips[2].t}</strong><span>{content.deploy.chips[2].d}</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── REFERENCES ────────────────────────────────────────────────────
function References({ content }) {
  return (
    <section className="section" id="references" data-screen-label="references">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{content.refs.eyebrow}</span>
          <h2 className="h1">{content.refs.title}</h2>
          <p className="lead">{content.refs.sub}</p>
        </div>
        <div className="ref-grid">
          {content.refs.list.map((r, i) => (
            <div className="ref-cell" key={i}>
              <div>
                {r.name}
                <span className="sub">{r.sub}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="ref-quote">
          <div className="mark">"</div>
          <div>
            <div className="text">{content.refs.quote}</div>
            <div className="attrib">{content.refs.attrib}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA + FOOTER ──────────────────────────────────────────────────
function CTA({ content, logoSrc }) {
  return (
    <section id="demo" data-screen-label="cta">
      <div className="cta">
        <div className="cta-glow" />
        <div className="cta-inner">
          <div>
            <span className="eyebrow">{content.cta.eyebrow}</span>
            <h2 className="h1" style={{margin: "14px 0 18px"}}>{content.cta.title}</h2>
            <p className="lead" style={{maxWidth: 560}}>{content.cta.sub}</p>
            <div className="hero-ctas" style={{marginTop: 28}}>
              <a href="#" className="btn btn-primary btn-lg">{content.cta.cta1} <IconArrowSm className="arrow" /></a>
              <a href="#" className="btn btn-ghost btn-lg">{content.cta.cta2}</a>
            </div>
          </div>
          <div className="cta-visual" aria-hidden="true">
            <img src="assets/header_logo_dark.svg"  alt="Kognitera" className="cta-logo-img km-dark"  />
            <img src="assets/header_logo_light.svg" alt="Kognitera" className="cta-logo-img km-light" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ content }) {
  return (
    <footer data-screen-label="footer">
      <div className="container">
        <div className="foot-grid">
          <div>
            <a className="foot-logo" href="#top" aria-label="Kognitera">
              <img src="assets/header_logo_dark.svg"  alt="Kognitera" className="foot-logo-img km-dark"  />
              <img src="assets/header_logo_light.svg" alt="Kognitera" className="foot-logo-img km-light" />
            </a>
            <p className="foot-tag">{content.foot.tag}</p>
          </div>
          <div>
            <div className="foot-h">{content.foot.product}</div>
            <div className="foot-list">
              {content.foot.productLinks.map((l) => <a key={l} href="#">{l}</a>)}
            </div>
          </div>
          <div>
            <div className="foot-h">{content.foot.company}</div>
            <div className="foot-list">
              {content.foot.companyLinks.map((l) => <a key={l} href="#">{l}</a>)}
            </div>
          </div>
          <div>
            <div className="foot-h">{content.foot.contact}</div>
            <div className="foot-addr">
              {content.foot.address.map((line, i) => <div key={i}>{line}</div>)}
              <div style={{marginTop: 8}}>
                <a href="mailto:info@infus.com.tr" style={{color: "var(--accent)"}}>info@infus.com.tr</a>
              </div>
              <div>
                <a href="https://www.infus.com.tr" style={{color: "var(--accent)"}}>www.infus.com.tr</a>
              </div>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2025 Kognitera · Powered by Infus</div>
          <div className="foot-social">
            <a href="#" aria-label="LinkedIn"><IconLinkedIn size={16} /></a>
            <a href="#" aria-label="X"><IconTwitter size={16} /></a>
            <a href="#" aria-label="YouTube"><IconYoutube size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Metrics, ProblemSolution, Capabilities, Phases, Sectors,
  Deployment, References, CTA, Footer
});