// Flowshift — main app
const { useState, useEffect, useRef, useMemo } = React;

function useLang() {
  const [lang, setLang] = useState(() => {
    return localStorage.getItem("flowshift_lang") || "en";
  });
  useEffect(() => { localStorage.setItem("flowshift_lang", lang); }, [lang]);
  return [lang, setLang];
}

function Nav({ lang, setLang, copy }) {
  return (
    <div className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="logo">
          <img src="assets/flowshift-logo.svg" className="logo-mark" alt="" aria-hidden="true" />
          <span>Flowshift</span>
        </a>
        <nav className="nav-links">
          <a href="#process">{copy.nav.process}</a>
          <a href="#services">{copy.nav.services}</a>
          <a href="#impact">{copy.nav.work}</a>
          <a href="#contact">{copy.nav.contact}</a>
        </nav>
        <div className="lang-toggle" role="tablist">
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "nl" ? "active" : ""} onClick={() => setLang("nl")}>NL</button>
        </div>
        <a href="#contact" className="btn btn-accent">
          <span className="dot" style={{ background: "var(--accent-ink)" }}></span>
          {copy.nav.cta}
        </a>
      </div>
    </div>
  );
}

function Terminal({ copy }) {
  const [shown, setShown] = useState(0);
  useEffect(() => {
    setShown(0);
    const interval = setInterval(() => {
      setShown((n) => {
        if (n >= copy.lines.length) { clearInterval(interval); return n; }
        return n + 1;
      });
    }, 700);
    return () => clearInterval(interval);
  }, [copy.lines]);

  return (
    <div className="terminal">
      <div className="term-bar">
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <div className="dots"><span></span><span></span><span></span></div>
          <span>{copy.title}</span>
        </div>
        <div className="status">{copy.status}</div>
      </div>
      <div className="term-body">
        {copy.lines.slice(0, shown).map((l, i) => (
          <div key={i} className="term-line" data-who={l.who}>
            <span className="t">{l.t}</span>
            <span className="who">{l.who}</span>
            <span className="msg">{l.msg}{i === shown - 1 && i < copy.lines.length - 1 ? <span className="term-cursor"></span> : null}</span>
          </div>
        ))}
      </div>
      <div className="term-metrics">
        <div>
          <div className="k">{copy.metric_a}</div>
          <div className="v">{copy.metric_a_val}<span className="unit">h</span></div>
        </div>
        <div>
          <div className="k">{copy.metric_b}</div>
          <div className="v">{copy.metric_b_val}</div>
        </div>
        <div>
          <div className="k">{copy.metric_c}</div>
          <div className="v">{copy.metric_c_val}</div>
        </div>
      </div>
    </div>
  );
}

function Hero({ copy }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">{copy.hero.eyebrow}</div>
            <h1>
              {copy.hero.h1_a}{" "}
              <span className="italic">{copy.hero.h1_b}</span>
              <br />
              <span className="muted">{copy.hero.h1_c}</span>
            </h1>
            <p className="hero-sub">{copy.hero.sub}</p>
            <div className="hero-cta">
              <a className="btn" href="#contact">
                <span className="dot"></span>
                {copy.hero.cta_primary}
              </a>
              <a className="btn btn-ghost" href="#process">{copy.hero.cta_secondary}</a>
            </div>
            <div className="hero-meta">
              <span>{copy.hero.badge_left}</span>
              <span>{copy.hero.badge_right}</span>
            </div>
          </div>
          <div>
            <Terminal copy={copy.terminal} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Ticker({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {doubled.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

function Services({ copy }) {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">{copy.services.eyebrow}</div>
          <div>
            <h2 className="section-title">{copy.services.title}</h2>
            <p className="section-sub">{copy.services.sub}</p>
          </div>
        </div>
        <div className="services">
          {copy.services.items.map((s, i) => (
            <div className="service" key={i}>
              <div className="service-head">
                <span className="service-code">/ {s.code}</span>
                <span>{s.num}</span>
              </div>
              <h3>{s.title}</h3>
              <div className="service-tag">{s.tag}</div>
              <p className="service-body">{s.body}</p>
              <ul className="service-bullets">
                {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ copy }) {
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">{copy.process.eyebrow}</div>
          <div>
            <h2 className="section-title">
              How we build <span className="italic">you a superpower.</span>
            </h2>
            <p className="section-sub">{copy.process.sub}</p>
          </div>
        </div>
        <div className="process-grid">
          {copy.process.steps.map((s, i) => (
            <div className="process-step" key={i}>
              <div className="n">STEP {s.n}</div>
              <h4>{s.t}</h4>
              <div className="d">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare({ copy }) {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);

  const update = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    const p = ((clientX - r.left) / r.width) * 100;
    setPos(Math.max(4, Math.min(96, p)));
  };

  useEffect(() => {
    const move = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      update(x);
    };
    const up = () => { dragging.current = false; document.body.style.userSelect = ""; };
    window.addEventListener("mousemove", move);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("mouseup", up);
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchend", up);
    };
  }, []);

  const onDown = (e) => {
    dragging.current = true;
    document.body.style.userSelect = "none";
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    update(x);
  };

  return (
    <section className="section" id="impact">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">{copy.slider.eyebrow}</div>
          <div>
            <h2 className="section-title">
              Drag to see what <span className="italic">a week looks like.</span>
            </h2>
            <p className="section-sub">{copy.slider.sub}</p>
          </div>
        </div>
        <div className="compare" ref={ref} onMouseDown={onDown} onTouchStart={onDown}>
          <div className="compare-pane before">
            <div className="compare-label">{copy.slider.before_label}</div>
            <div className="compare-stats">
              {copy.slider.stats.map((s, i) => (
                <div className="compare-stat" key={i}>
                  <span className="label">{s.k}</span>
                  <span className="value">{s.b}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="compare-pane after" style={{ clipPath: `inset(0 0 0 ${pos}%)` }}>
            <div className="compare-label">{copy.slider.after_label}</div>
            <div className="compare-stats">
              {copy.slider.stats.map((s, i) => (
                <div className="compare-stat" key={i}>
                  <span className="label">{s.k}</span>
                  <span className="value">{s.a}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="compare-handle" style={{ left: `${pos}%` }}></div>
          <div className="compare-hint" style={{ left: `${pos}%` }}>← {copy.slider.drag_hint} →</div>
        </div>
      </div>
    </section>
  );
}

function Contact({ copy }) {
  return (
    <section className="section" id="contact" style={{ paddingBottom: 64 }}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">{copy.contact.eyebrow}</div>
          <div>
            <h2 className="contact-title">
              Tell us what's <span className="italic">boring you.</span>
            </h2>
            <p className="section-sub">{copy.contact.sub}</p>
          </div>
        </div>
        <div className="contact">
          <div>
            <div className="contact-details">
              <div className="contact-row">
                <span className="k">Email</span>
                <a href={`mailto:${copy.contact.email}`}>{copy.contact.email}</a>
              </div>
              <div className="contact-row">
                <span className="k">Phone</span>
                <a href={`tel:${copy.contact.phone.replace(/\s/g, "")}`}>{copy.contact.phone}</a>
              </div>
              <div className="contact-row">
                <span className="k">Location</span>
                <span>{copy.contact.location}</span>
              </div>
              <div className="contact-row">
                <span className="k">Response</span>
                <span style={{ color: "var(--ok)" }}>● Within 24h, always</span>
              </div>
            </div>
            <div style={{ marginTop: 40 }}>
              <a className="btn btn-accent" href="https://outlook.office.com/bookwithme/user/3ae9efefd12944bda568c44b0317df37%40flowshift.nl" target="_blank" rel="noreferrer">
                {copy.contact.cta}
              </a>
            </div>
          </div>
          <div style={{ background: "var(--paper)", padding: 0 }}>
            <BookingCard copy={copy} />
          </div>
        </div>
      </div>
    </section>
  );
}

function BookingCard({ copy }) {
  const [selected, setSelected] = useState(1);
  const slots = [
    { day: "MON", date: "28", month: "APR", time: "10:00" },
    { day: "TUE", date: "29", month: "APR", time: "14:30" },
    { day: "WED", date: "30", month: "APR", time: "11:00" },
    { day: "THU", date: "01", month: "MAY", time: "09:30" },
    { day: "FRI", date: "02", month: "MAY", time: "15:00" },
  ];
  return (
    <div style={{ padding: "32px 36px", height: "100%", display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--ink-3)" }}>/ DISCOVERY CALL</div>
        <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--ok)" }}>● 30 MIN · FREE</div>
      </div>
      <div style={{ fontFamily: "Instrument Serif, serif", fontSize: 32, lineHeight: 1.1, marginBottom: 8 }}>
        Pick a time that works.
      </div>
      <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 28 }}>
        Available slots this week · CET
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 24 }}>
        {slots.map((s, i) => (
          <button
            key={i}
            onClick={() => setSelected(i)}
            style={{
              border: "1px solid var(--rule)",
              padding: "14px 6px",
              background: selected === i ? "var(--ink)" : "var(--bg)",
              color: selected === i ? "var(--bg)" : "var(--ink)",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 4,
              transition: "all 0.15s",
              cursor: "pointer",
            }}
          >
            <span style={{ fontSize: 10, letterSpacing: "0.1em", opacity: 0.7 }}>{s.day}</span>
            <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{s.date}</span>
            <span style={{ fontSize: 10, letterSpacing: "0.1em", opacity: 0.7 }}>{s.month}</span>
            <span style={{ fontSize: 11, marginTop: 4 }}>{s.time}</span>
          </button>
        ))}
      </div>
      <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-3)", borderTop: "1px dashed var(--rule-soft)", paddingTop: 14, marginTop: "auto" }}>
        → You'll get a calendar invite + short form to describe what's bugging you.
      </div>
    </div>
  );
}

function Footer({ copy }) {
  return (
    <footer className="wrap footer">
      <div>
        <div className="brand" style={{ fontWeight: 600, fontSize: 14, marginBottom: 6 }}>Flowshift</div>
        <div>{copy.footer.tag}</div>
      </div>
      <div>
        <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", marginBottom: 10 }}>SECTIONS</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <a href="#process">{copy.nav.process}</a>
          <a href="#services">{copy.nav.services}</a>
          <a href="#impact">{copy.nav.work}</a>
          <a href="#contact">{copy.nav.contact}</a>
        </div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div>{copy.footer.rights}</div>
        <div style={{ marginTop: 6 }}>{copy.footer.kvk}</div>
      </div>
    </footer>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useLang();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const copy = window.FLOWSHIFT_COPY[lang];

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

  return (
    <>
      <Nav lang={lang} setLang={setLang} copy={copy} />
      <Hero copy={copy} />
      <Ticker items={copy.ticker} />
      <Services copy={copy} />
      <Process copy={copy} />
      <Compare copy={copy} />
      <Contact copy={copy} />
      <Footer copy={copy} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance" />
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "light", label: "Light" },
            { value: "dark", label: "Dark" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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