const { useState, useEffect, useRef, useCallback } = React;

function Logo({ className = "logo" }) {
  return (
    <a href="#top" className={className}>
      <img className="logo-img logo-light" src="assets/dreamit-logo-light.svg" alt="DreamIT" /><img className="logo-img logo-dark" src="assets/dreamit-logo-dark.svg" alt="DreamIT" />
    </a>
  );
}

const I = {
  arrow: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>,
  arrowR: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7H12M12 7L8 3M12 7L8 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>,
  arrowUp: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 12V2M7 2L3 6M7 2L11 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>,
  plus: () => <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1V11M1 6H11" stroke="currentColor" strokeWidth="1.4"/></svg>,
  app: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="5" y="1" width="8" height="16" rx="1" stroke="currentColor" strokeWidth="1.2"/><circle cx="9" cy="14" r="0.8" fill="currentColor"/><path d="M7 3.5H11" stroke="currentColor" strokeWidth="1.2"/></svg>,
  web: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1.5" y="3" width="15" height="12" stroke="currentColor" strokeWidth="1.2"/><path d="M1.5 7H16.5 M6 3V15 M6 7L8 9L6 11" stroke="currentColor" strokeWidth="1.2"/></svg>,
  graphic: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 1L17 16H1L9 1Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter"/><circle cx="9" cy="11" r="2" stroke="currentColor" strokeWidth="1.2"/></svg>,
  seo: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="1.2"/><path d="M12 12L16 16 M6 8H10 M8 6V10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/></svg>,
  video: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1.5" y="4" width="11" height="10" stroke="currentColor" strokeWidth="1.2"/><path d="M12.5 7L16.5 4V14L12.5 11Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter"/></svg>,
  ai: () => <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="4" width="10" height="10" stroke="currentColor" strokeWidth="1.2"/><rect x="7" y="7" width="4" height="4" stroke="currentColor" strokeWidth="1.2"/><path d="M9 1V4M9 14V17M1 9H4M14 9H17M2 2L4 4M16 16L14 14M2 16L4 14M16 2L14 4" stroke="currentColor" strokeWidth="1.2"/></svg>,
  sun: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="3" stroke="currentColor" strokeWidth="1.3"/><path d="M7 1V2.5M7 11.5V13M1 7H2.5M11.5 7H13M2.5 2.5L3.6 3.6M10.4 10.4L11.5 11.5M2.5 11.5L3.6 10.4M10.4 3.6L11.5 2.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>,
  moon: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M12 8.5C11.3 9.5 10.2 10 9 10C6.8 10 5 8.2 5 6C5 4.8 5.5 3.7 6.5 3C4 3.3 2 5.4 2 8C2 10.8 4.2 13 7 13C9.6 13 11.7 11 12 8.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="miter"/></svg>,
};

function useLang() {
  const [lang, setLang] = useState((window.i18n && window.i18n.lang) || "en");
  useEffect(() => {
    if (!window.i18n) return;
    return window.i18n.onChange(setLang);
  }, []);
  const t = useCallback((k) => (window.i18n ? window.i18n.t(k) : k), [lang]);
  return { lang, t, setLang: (l) => window.i18n && window.i18n.setLang(l) };
}

function LangSwitch() {
  const { lang, setLang } = useLang();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);
  const labels = {
    en: { name: "EN", full: "English" },
    ar: { name: "ع", full: "العربية" },
    bn: { name: "বাং", full: "বাংলা" },
  };
  return (
    <div className={"lang-switch " + (open ? "open" : "")} ref={ref}>
      <button
        className="lang-switch-btn"
        onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}
        aria-label="Change language"
      >
        <span>{labels[lang].name}</span>
        <span className="caret"></span>
      </button>
      <div className="lang-menu" role="menu">
        {["en", "ar", "bn"].map(l => (
          <button
            key={l}
            className={"lang-menu-item " + (lang === l ? "active" : "")}
            onClick={() => { setLang(l); setOpen(false); }}
          >
            <span>{labels[l].full}</span>
            <span className="code">{l.toUpperCase()}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function use3DTilt(strength = 6) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      const rx = (0.5 - y) * strength;
      const ry = (x - 0.5) * strength;
      const glow = el.querySelector(".tilt-glow");
      if (glow) {
        glow.style.left = (e.clientX - r.left) + "px";
        glow.style.top = (e.clientY - r.top) + "px";
      }
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`;
      });
    };
    const onLeave = () => {
      cancelAnimationFrame(raf);
      el.style.transform = `perspective(900px) rotateX(0deg) rotateY(0deg)`;
    };
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerleave", onLeave);
    return () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerleave", onLeave);
      cancelAnimationFrame(raf);
    };
  }, [strength]);
  return ref;
}

function Tilt({ children, strength = 6, className = "", style }) {
  const ref = use3DTilt(strength);
  return (
    <div ref={ref} className={"tilt-3d " + className} style={style}>
      <span className="tilt-glow" />
      <div className="tilt-content">{children}</div>
    </div>
  );
}

function Nav({ theme, setTheme }) {
  const { t } = useLang();
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onResize = () => { if (window.innerWidth > 880) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <header className="nav">
      <div className="container nav-inner">
        <Logo />
        <nav className={"nav-links" + (menuOpen ? " open" : "")}>
          <a href="services" onClick={() => setMenuOpen(false)}>{t("nav.services")}</a>
          <a href="demo" onClick={() => setMenuOpen(false)}>Demo</a>
          <a href="blog" onClick={() => setMenuOpen(false)}>{t("nav.blog")}</a>
          <a href="about" onClick={() => setMenuOpen(false)}>{t("nav.about")}</a>
          <a href="contact" onClick={() => setMenuOpen(false)}>{t("nav.contact")}</a>
        </nav>
        <div className="nav-cta">
          <LangSwitch />
          <button
            className="theme-toggle"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            aria-label="Toggle theme"
          >
            {theme === "dark" ? <I.sun /> : <I.moon />}
          </button>
          <button
            className={"nav-hamburger" + (menuOpen ? " open" : "")}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle menu"
          >
            <span className="bar" />
          </button>
          <a href="contact" className="btn btn-primary" style={{padding: "10px 18px"}}>
            {t("nav.start")} <span className="arrow"><I.arrow /></span>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ accent }) {
  const Hero3D = window.Hero3D;
  const { t } = useLang();
  return (
    <section className="hero" id="top">
      <div className="hero-ambient" />
      <div className="container hero-inner">
        <div className="reveal">
          <div className="group-strip">
            <span className="group-chip"><span className="accent-dot" /> {t("hero.tag")}</span>
            <span className="group-chip">{t("hero.tag2")}</span>
          </div>
          <h1 className="hero-title">
            {t("hero.title.l1")}<br/>
            <span className="stroke">{t("hero.title.l2a")}</span>{" "}
            <span className="stroke">{t("hero.title.l2b")}</span>
            <span className="accent">.</span>
          </h1>
          <p className="hero-sub">{t("hero.sub")}</p>
          <div className="hero-ctas">
            <a href="contact" className="btn btn-primary">
              {t("hero.ctaStart")} <span className="arrow"><I.arrow /></span>
            </a>
            <a href="services" className="btn">
              {t("hero.ctaExplore")} <span className="arrow"><I.arrowR /></span>
            </a>
          </div>
          <div className="hero-stats">
            <div>
              <div className="hero-stat-num">{t("hero.stat1.num")}</div>
              <div className="hero-stat-label">{t("hero.stat1.lbl")}</div>
            </div>
            <div>
              <div className="hero-stat-num">{t("hero.stat2.num")}</div>
              <div className="hero-stat-label">{t("hero.stat2.lbl")}</div>
            </div>
            <div>
              <div className="hero-stat-num">{t("hero.stat3.num")}</div>
              <div className="hero-stat-label">{t("hero.stat3.lbl")}</div>
            </div>
          </div>
        </div>
        <div className="hero-visual reveal">
          {Hero3D ? <Hero3D accent={accent} /> : null}
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  const stats = [
    { num: "15+", label: "Years in Business" },
    { num: "240+", label: "Projects Shipped" },
    { num: "11", label: "Live Products" },
    { num: "60+", label: "Senior Operators" },
  ];
  return (
    <div className="stats-bar reveal">
      <div className="container stats-bar-inner">
        {stats.map((s, i) => (
          <div className="stat-item" key={i}>
            <span className="stat-num">{s.num}</span>
            <span className="stat-label">{s.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function BentoServices() {
  const items = [
    {
      icon: <I.ai />, title: "AI Development",
      desc: "Custom LLM integrations, RAG pipelines, autonomous agents and AI-powered SaaS platforms built for production.",
      tags: ["LLM", "RAG", "AGENTS"],
      href: "ai-development-company-qatar", big: true,
    },
    {
      icon: <I.app />, title: "App Development",
      desc: "Native iOS & Android and cross-platform Flutter apps, shipped on time.",
      tags: ["iOS", "ANDROID", "FLUTTER"],
      href: "app-development-company-qatar",
    },
    {
      icon: <I.web />, title: "Web Development",
      desc: "High-performance Next.js, React and Laravel web applications.",
      tags: ["NEXT.JS", "REACT", "LARAVEL"],
      href: "web-development-company-qatar",
    },
    {
      icon: <I.seo />, title: "SEO & Marketing",
      desc: "Technical, on-page and content SEO that compounds over time.",
      tags: ["TECHNICAL", "ON-PAGE", "CONTENT"],
      href: "seo-services-qatar",
    },
    {
      icon: <I.video />, title: "Video Production",
      desc: "Ad films, explainer videos and brand storytelling.",
      tags: ["AD", "EXPLAINER", "BRAND"],
      href: "video-marketing-services-qatar",
    },
    {
      icon: <I.graphic />, title: "Graphic Design",
      desc: "Brand identity, UI/UX design systems and motion graphics.",
      tags: ["BRAND", "UI/UX", "MOTION"],
      href: "graphic-design-company-qatar",
    },
  ];
  return (
    <section className="s" id="services">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow eyebrow-dot">SERVICES</span>
            <h2>What we<br/><span className="accent">build</span>.</h2>
          </div>
          <p className="lead">Six core disciplines — from AI-native software to brand identity. Every engagement is end-to-end, owned in-house.</p>
        </div>
        <div className="bento-g reveal">
          {items.map((item, i) => (
            <a href={item.href} className={"bc" + (item.big ? " bc--big" : "")} key={i}>
              <div className="bc-inner">
                <div className="bc-top">
                  <div className="bc-icon">{item.icon}</div>
                  <span className="bc-arrow"><I.arrow /></span>
                </div>
                <div className="bc-body">
                  <h3 className="bc-title">{item.title}</h3>
                  <p className="bc-desc">{item.desc}</p>
                </div>
                <div className="bc-tags">
                  {item.tags.map(tag => <span key={tag} className="bc-tag">{tag}</span>)}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductsTicker() {
  const products = ["4UAI", "Soulmate Go", "Bondhon", "Countly", "Probashi Info", "MoneyBag", "Dream International", "Dream Workforce", "Dream Tourism", "Manpower Pro", "RestroFy"];
  const doubled = [...products, ...products];
  return (
    <div className="ticker-section">
      <div className="ticker-label-col">
        <span className="eyebrow">11 Products</span>
      </div>
      <div className="ticker-overflow">
        <div className="ticker-track">
          {doubled.map((p, i) => (
            <span key={i} className="ticker-item">
              {p}<span className="ticker-sep">·</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function WhyDreamIT() {
  const reasons = [
    {
      num: "01",
      title: "Products, Not Just Deliverables",
      desc: "We've shipped 11 live products ourselves — SaaS, mobile, AI. We know the difference between code that ships and code that scales.",
    },
    {
      num: "02",
      title: "Full-Stack Ownership",
      desc: "Design, engineering, AI and DevOps under one roof. No vendor handoffs, no scope blame, one team accountable for everything.",
    },
    {
      num: "03",
      title: "15 Years, Zero Shortcuts",
      desc: "Since 2011, 240+ clients across Qatar, Bangladesh, Spain and beyond — all built on repeat business and referrals.",
    },
  ];
  return (
    <section className="s" id="why">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow eyebrow-dot">WHY DREAMIT</span>
            <h2>The studio that<br/><span className="accent">ships</span>.</h2>
          </div>
          <p className="lead">We're operators who've built our own products. That changes how we build yours.</p>
        </div>
        <div className="why-grid reveal">
          {reasons.map((r, i) => (
            <div className="why-card" key={i}>
              <div className="why-num">{r.num}</div>
              <h3 className="why-title">{r.title}</h3>
              <p className="why-desc">{r.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MiniCTA() {
  return (
    <section className="s mini-cta-section" id="start">
      <div className="container reveal">
        <div className="mini-cta">
          <div className="mini-cta-text">
            <span className="eyebrow eyebrow-dot">START BUILDING</span>
            <h2>Ready to ship<br/>something <span className="accent">real</span>?</h2>
            <p className="mini-cta-sub">Book a free 30-min strategy call. We'll tell you exactly what we'd build and how long it takes.</p>
          </div>
          <div className="mini-cta-actions">
            <a href="contact" className="btn btn-primary">Book a Free Call <span className="arrow"><I.arrow /></span></a>
            <a href="about" className="btn">Meet the Team <span className="arrow"><I.arrowR /></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useLang();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p>{t("foot.brand.tag")}</p>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">{t("foot.products")}</div>
            <ul>
              <li><a href="https://4uai.io" target="_blank" rel="noopener">4UAI</a></li>
              <li><a href="https://soulmatego.app" target="_blank" rel="noopener">Soulmate Go</a></li>
              <li><a href="https://bondhon.app" target="_blank" rel="noopener">Bondhon</a></li>
              <li><a href="https://countly.net" target="_blank" rel="noopener">Countly</a></li>
              <li><a href="https://probashiinfo.com" target="_blank" rel="noopener">Probashi Info</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">{t("foot.group")}</div>
            <ul>
              <li><a href="#">Dream International</a></li>
              <li><a href="#">Dream Workforce</a></li>
              <li><a href="#">Dream Tourism</a></li>
              <li><a href="#">Manpower Pro</a></li>
              <li><a href="#">RestroFy</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">{t("foot.studio")}</div>
            <ul>
              <li><a href="services">{t("nav.services")}</a></li>
              <li><a href="about">{t("nav.about")}</a></li>
              <li><a href="blog">{t("nav.blog")}</a></li>
              <li><a href="contact">{t("nav.contact")}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">{t("foot.company")}</div>
            <ul>
              <li><a href="about">{t("nav.about")}</a></li>
              <li><a href="contact">{t("nav.contact")}</a></li>
              <li><a href="#">{t("foot.careers")}</a></li>
              <li><a href="#">{t("foot.press")}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t("foot.copy")}</span>
          <span className="live">{t("foot.ops")}</span>
          <span>SOC 2 &middot; ISO 27001 &middot; HIPAA</span>
        </div>
      </div>
    </footer>
  );
}

function BackToTop() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button
      className={"back-to-top" + (visible ? " visible" : "")}
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      aria-label="Back to top"
    >
      <I.arrowUp />
    </button>
  );
}

function App() {
  const [theme, setTheme] = useState("dark");
  const [accent] = useState("#ff1a1a");

  useEffect(() => {
    document.body.setAttribute("data-theme", theme);
  }, [theme]);

  return (
    <>
      <Nav theme={theme} setTheme={setTheme} />
      <Hero accent={accent} />
      <StatsBar />
      <BentoServices />
      <ProductsTicker />
      <WhyDreamIT />
      <MiniCTA />
      <Footer />
      <BackToTop />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);