// Main dliilh landing app
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "midnight",
  "accent": "gold",
  "density": "normal",
  "arFont": "ibmplex"
}/*EDITMODE-END*/;

const AR_FONTS = {
  ibmplex: "'IBM Plex Sans Arabic', system-ui, sans-serif",
  tajawal: "'Tajawal', system-ui, sans-serif",
  cairo: "'Cairo', system-ui, sans-serif",
  readex: "'Readex Pro', system-ui, sans-serif",
};

const APP_STORE_URL = "https://apps.apple.com/app/%D8%AF%D9%84%D9%8A%D9%84%D8%A9-%D9%84%D9%84%D8%AE%D8%AF%D9%85%D8%A7%D8%AA-%D9%88%D8%A7%D9%84%D9%81%D8%B9%D8%A7%D9%84%D9%8A%D8%A7%D8%AA/id6765938241";

function useReveal(){
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting){
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function StoreButton({ kind, copy }){
  const data = kind === "ios" ? copy.ios : copy.android;
  const href = kind === "ios" ? APP_STORE_URL : "https://play.google.com/store/apps/details?id=com.dliilh.app";
  const Glyph = kind === "ios" ? Icon.Apple : Icon.Play;
  return (
    <a className="store-btn" href={href} target="_blank" rel="noopener">
      <Glyph className="glyph" />
      <span className="lbl">
        <small>{data.small}</small>
        <b>{data.big}</b>
      </span>
    </a>
  );
}

function Header({ lang, setLang, copy }){
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [lang]);
  return (
    <header className="site-header">
      <div className="shell row">
        <a className="brand" href="#top" aria-label={copy.brand}>
          <img src="assets/logo.png" alt={copy.brand} />
        </a>
        <nav className="nav nav-desktop" aria-label="primary">
          <a href="#features">{copy.nav.features}</a>
          <a href="#origin">{copy.nav.origin}</a>
          <a href="#faq">{copy.nav.faq}</a>
          <a href="#download">{copy.nav.download}</a>
          <a href="privacy.html">{copy.nav.privacy}</a>
          <a href="terms.html">{copy.nav.terms}</a>
        </nav>
        <div className="header-end">
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>AR</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <button
            className={"menu-toggle" + (open ? " on" : "")}
            aria-label="menu"
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      <div className={"nav-mobile" + (open ? " open" : "")} onClick={() => setOpen(false)}>
        <a href="#features">{copy.nav.features}</a>
        <a href="#origin">{copy.nav.origin}</a>
        <a href="#faq">{copy.nav.faq}</a>
        <a href="#download">{copy.nav.download}</a>
        <a href="privacy.html">{copy.nav.privacy}</a>
        <a href="terms.html">{copy.nav.terms}</a>
      </div>
    </header>
  );
}

function PhoneStage(){
  const screens = ["assets/sc1.webp", "assets/sc2.webp", "assets/sc4.webp"];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % screens.length), 3800);
    return () => clearInterval(t);
  }, []);
  const left = (idx + screens.length - 1) % screens.length;
  const right = (idx + 1) % screens.length;
  return (
    <div className="phone-stage" aria-hidden="true">
      <div className="glow"></div>
      <div className="phone behind left">
        <img src={screens[left]} alt="" />
      </div>
      <div className="phone behind right">
        <img src={screens[right]} alt="" />
      </div>
      <div className="phone">
        <img src={screens[idx]} alt="dliilh app screenshot" />
      </div>
      <div className="phone-dots">
        {screens.map((_, i) => (
          <button
            key={i}
            className={i === idx ? "on" : ""}
            onClick={() => setIdx(i)}
            aria-label={`screen ${i+1}`}
          />
        ))}
      </div>
    </div>
  );
}

function Hero({ copy }){
  return (
    <section className="hero shell" id="top">
      <Icon.Motif className="motif" />
      <div className="hero-grid">
        <div className="reveal">
          <span className="eyebrow">{copy.eyebrow}</span>
          <h1 className="h-display">
            <span>{copy.h1a}</span>{" "}
            <span className="accent underline-pen">{copy.h1b}</span>
          </h1>
          <p className="lede">{copy.lede}</p>
          <div className="store-row">
            <StoreButton kind="ios" copy={window.__copyStores} />
            <StoreButton kind="android" copy={window.__copyStores} />
          </div>
          <div className="hero-meta">
            {copy.meta.map((m, i) => (
              <div className="item" key={i}>
                <b>{m.k}</b>
                <span>{m.v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal">
          <PhoneStage />
        </div>
      </div>
    </section>
  );
}

function Pillars({ copy }){
  return (
    <section className="section shell" id="features">
      <div className="section-head reveal">
        <span className="eyebrow">{copy.eyebrow}</span>
        <h2 className="h-section">
          {copy.title}<span className="accent">{copy.titleAccent}</span>
        </h2>
        <p>{copy.sub}</p>
      </div>
      <div className="pillars">
        {copy.items.map((it, i) => {
          const Glyph =
            it.id === "services" ? Icon.ServicesGlyph :
            it.id === "events" ? Icon.EventsGlyph :
            Icon.MarketGlyph;
          return (
            <article className="pillar reveal" data-p={it.id} key={it.id} style={{ transitionDelay: `${i * 80}ms` }}>
              <div>
                <span className="num">{it.num}</span>
                <h3>{it.h}</h3>
                <p>{it.p}</p>
              </div>
              <span className="badge">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12 L10 17 L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                {it.badge}
              </span>
              <Glyph className="glyph" />
            </article>
          );
        })}
      </div>
    </section>
  );
}

function Origin({ copy }){
  return (
    <section className="section shell" id="origin">
      <div className="origin">
        <div className="origin-art reveal">
          <div className="map-pin"></div>
          <div className="label">{copy.timeline[0].t}</div>
          <div className="timeline">
            {copy.timeline.map((t, i) => (
              <div className={"tl-item" + (i === copy.timeline.length - 1 ? " now" : "")} key={i}>
                <span className="yr">{t.yr}</span>
                <span>{t.t}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="origin-text reveal">
          <span className="eyebrow">{copy.eyebrow}</span>
          <h2>{copy.h}<span className="accent">{copy.hAccent}</span>{copy.hRest}</h2>
          <p>{copy.p1}</p>
          <p>{copy.p2}</p>
          <div className="quote">{copy.quote}</div>
        </div>
      </div>
    </section>
  );
}

function FAQ({ copy }){
  return (
    <section className="section shell" id="faq">
      <div className="section-head reveal">
        <span className="eyebrow">{copy.eyebrow}</span>
        <h2 className="h-section">{copy.h}<span className="accent">{copy.hAccent}</span></h2>
      </div>
      <div className="faq-grid">
        {copy.items.map((it, i) => (
          <details className="faq-item reveal" key={i}>
            <summary>
              <span>{it.q}</span>
              <span className="plus" aria-hidden="true">+</span>
            </summary>
            <div className="answer">{it.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

function Contact({ copy, ctaCopy, stores }){
  return (
    <section className="section shell" id="download">
      <div className="cta-card reveal">
        <h2>{ctaCopy.h}<span className="accent">{ctaCopy.hAccent}</span></h2>
        <p>{ctaCopy.p}</p>
        <div className="store-row">
          <StoreButton kind="ios" copy={stores} />
          <StoreButton kind="android" copy={stores} />
        </div>
      </div>
      <div className="contact-grid">
        <a className="contact-card reveal" href="mailto:support@dliilh.app">
          <span className="icon"><Icon.Mail width="22" height="22" /></span>
          <span className="meta">
            <small>{copy.email.lbl}</small>
            <b>{copy.email.v}</b>
          </span>
        </a>
        <a className="contact-card reveal" href="mailto:support@dliilh.app?subject=Report">
          <span className="icon"><Icon.Flag width="22" height="22" /></span>
          <span className="meta">
            <small>{copy.report.lbl}</small>
            <b>{copy.report.v}</b>
          </span>
        </a>
      </div>
    </section>
  );
}

function Footer({ copy }){
  return (
    <footer className="site-footer">
      <div className="shell row">
        <div>
          <strong style={{ color: "var(--fg)" }}>{copy.tag}</strong>
          <div style={{ marginTop: 6, fontSize: 13 }}>{copy.copyright}</div>
        </div>
        <div className="links">
          {copy.links.map((l, i) => <a href={l.h} key={i}>{l.t}</a>)}
        </div>
      </div>
    </footer>
  );
}

function App(){
  const [lang, setLang] = useState("ar");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const copy = COPY[lang];

  // Apply lang/dir to <html>
  useEffect(() => {
    document.documentElement.lang = copy.lang;
    document.documentElement.dir = copy.dir;
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.accent = t.accent;
    document.documentElement.dataset.density = t.density;
    document.title = lang === "ar" ? "دليلة — دليلك بديرتك" : "dliilh — your guide to your hometown";
    if (lang === "ar"){
      document.documentElement.style.setProperty("--font-ar", AR_FONTS[t.arFont]);
    }
  }, [lang, t]);

  useReveal();

  // expose store strings for header phone stage
  window.__copyStores = copy.stores;

  return (
    <React.Fragment>
      <Header lang={lang} setLang={setLang} copy={copy} />
      <Hero copy={copy.hero} />
      <Pillars copy={copy.pillars} />
      <Origin copy={copy.origin} />
      <FAQ copy={copy.faq} />
      <Contact copy={copy.contact} ctaCopy={copy.cta} stores={copy.stores} />
      <Footer copy={copy.footer} />

      <TweaksPanel title={lang === "ar" ? "تعديلات" : "Tweaks"}>
        <TweakSection title={lang === "ar" ? "الثيم" : "Theme"}>
          <TweakRadio
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "midnight", label: lang === "ar" ? "ليلي" : "Midnight" },
              { value: "ivory", label: lang === "ar" ? "عاجي" : "Ivory" },
            ]}
          />
        </TweakSection>
        <TweakSection title={lang === "ar" ? "اللون المميز" : "Accent"}>
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold", color: "#C9A93B" },
              { value: "cyan", color: "#4FC3E7" },
              { value: "terracotta", color: "#B96A45" },
            ]}
          />
        </TweakSection>
        <TweakSection title={lang === "ar" ? "الكثافة" : "Density"}>
          <TweakRadio
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "cozy", label: lang === "ar" ? "مدمج" : "Cozy" },
              { value: "normal", label: lang === "ar" ? "متوسط" : "Normal" },
              { value: "airy", label: lang === "ar" ? "واسع" : "Airy" },
            ]}
          />
        </TweakSection>
        {lang === "ar" && (
          <TweakSection title="خط عربي">
            <TweakSelect
              value={t.arFont}
              onChange={(v) => setTweak("arFont", v)}
              options={[
                { value: "ibmplex", label: "IBM Plex Sans Arabic" },
                { value: "tajawal", label: "Tajawal" },
                { value: "cairo", label: "Cairo" },
                { value: "readex", label: "Readex Pro" },
              ]}
            />
          </TweakSection>
        )}
      </TweaksPanel>
    </React.Fragment>
  );
}

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