/* global React, ButtonFace, ButtonDot, Seam, TapeMeasure, PillButton, Kicker */
const { createElement: e, useState: useStateS } = React;
const INFO = window.TITO_INFO;

/* ───────────────────────── HEADER ───────────────────────── */
function LangToggle({ lang, setLang, onDark }) {
  const langs = ["ro", "en"];
  return e(
    "div",
    {
      className: "lang-toggle",
      style: {
        display: "inline-flex", padding: 3, borderRadius: 999,
        border: `2px solid ${onDark ? "rgba(255,255,255,.4)" : "var(--ink)"}`,
        gap: 2,
      },
    },
    langs.map((l) => {
      const active = lang === l;
      return e(
        "button",
        {
          key: l,
          onClick: () => setLang(l),
          style: {
            border: "none", cursor: "pointer", borderRadius: 999,
            padding: "5px 12px", fontSize: 13, fontWeight: 700, letterSpacing: ".08em",
            fontFamily: "var(--font-body)",
            background: active ? (onDark ? "var(--yellow)" : "var(--ink)") : "transparent",
            color: active ? (onDark ? "var(--ink)" : "var(--yellow)") : (onDark ? "#fff" : "var(--ink)"),
            transition: "all .15s ease",
          },
        },
        l.toUpperCase()
      );
    })
  );
}

function Header({ t, lang, setLang, heroMode, scrolled, onQuote, onNav }) {
  const onDark = !scrolled && heroMode === "bold";
  const logo = onDark ? "assets/tito-logo-white.png" : "assets/tito-logo-ink.png";
  const links = [
    { id: "services", label: t.nav.services },
    { id: "process", label: t.nav.process },
    { id: "contact", label: t.nav.contact },
  ];
  return e(
    "div",
    { className: "site-header" + (scrolled ? " is-scrolled" : ""), "data-ondark": onDark ? "1" : "0" },
    e(
      "div",
      { className: "header-inner" },
      e("a", { href: "#top", onClick: (ev) => { ev.preventDefault(); onNav("top"); }, className: "header-logo" },
        e("img", { src: logo, alt: "Tito Atelier", height: 30 })
      ),
      e(
        "nav",
        { className: "header-nav" },
        links.map((l) =>
          e("a", { key: l.id, href: "#" + l.id, onClick: (ev) => { ev.preventDefault(); onNav(l.id); },
            style: { color: onDark ? "#fff" : "var(--ink)" } }, l.label)
        )
      ),
      e(
        "div",
        { className: "header-right" },
        e(LangToggle, { lang, setLang, onDark }),
        e("div", { className: "header-cta" }, e(PillButton, { variant: onDark ? "solid" : "ink", size: "sm", onClick: onQuote }, t.cta.quote))
      )
    )
  );
}

/* ───────────────────────── STATEMENT + AUDIENCE ───────────────────────── */
function Statement({ t }) {
  return e(
    "section",
    { className: "section section-alt", id: "about", "data-screen-label": "About" },
    e(
      "div",
      { className: "wrap statement-wrap" },
      e(
        "div",
        { className: "statement-head" },
        e(Kicker, { children: t.statement.kicker, color: "var(--ink)" }),
        e("p", { className: "statement-lead" }, t.statement.lead)
      ),
      e(
        "div",
        { className: "statement-body" },
        e("p", { className: "statement-para" }, t.statement.body),
        e(
          "div",
          { className: "audience" },
          e("div", { className: "audience-title" }, t.statement.audienceTitle),
          e(
            "ul",
            { className: "audience-list" },
            t.statement.audience.map((a, i) =>
              e(
                "li",
                { key: i, className: "audience-item" },
                e(ButtonDot, { size: 22, color: "var(--ink)" }),
                e("div", null,
                  e("div", { className: "audience-name" }, a.t),
                  e("div", { className: "audience-desc" }, a.d)
                )
              )
            )
          )
        )
      )
    )
  );
}

/* ───────────────────────── SERVICES ───────────────────────── */
function Services({ t, onQuote }) {
  const s = t.services;
  return e(
    "section",
    { className: "section section-white", id: "services", "data-screen-label": "Services" },
    e(
      "div",
      { className: "wrap" },
      e(
        "div",
        { className: "section-head" },
        e(Kicker, { children: s.kicker, color: "var(--ink)" }),
        e("h2", { className: "section-title" }, s.title)
      ),
      e(
        "div",
        { className: "services-grid" },
        s.items.map((it, i) =>
          e(
            "article",
            { key: i, className: "svc-card" },
            e("div", { className: "svc-top" },
              e("span", { className: "svc-icon" }, e("i", { className: "bi " + it.icon })),
              e("span", { className: "svc-n" }, it.n)
            ),
            e("h3", { className: "svc-title" }, it.t),
            e("p", { className: "svc-desc" }, it.d)
          )
        )
      ),
      e(
        "article",
        { className: "tito-line" },
        e("img", { src: "assets/tito-face.png", alt: "", "aria-hidden": "true", style: { position: "absolute", right: -40, bottom: -70, width: 280, opacity: 0.14, pointerEvents: "none" } }),
        e("div", { className: "tito-line-inner" },
          e("span", { className: "tito-line-tag" }, s.tito.tag),
          e("h3", { className: "tito-line-title" }, s.tito.t),
          e("p", { className: "tito-line-desc" }, s.tito.d),
          e(PillButton, { variant: "solid", icon: "bi-arrow-right", onClick: onQuote, style: { marginTop: 22 } }, s.tito.cta)
        )
      )
    )
  );
}

/* ───────────────────────── PROCESS ───────────────────────── */
function Process({ t }) {
  const p = t.process;
  return e(
    "section",
    { className: "section section-ink", id: "process", "data-screen-label": "Process" },
    e(
      "div",
      { className: "wrap" },
      e(
        "div",
        { className: "section-head" },
        e(Kicker, { children: p.kicker, color: "var(--yellow)" }),
        e("h2", { className: "section-title", style: { color: "#fff" } }, p.title)
      ),
      e(
        "ol",
        { className: "process-grid" },
        p.steps.map((st, i) =>
          e(
            "li",
            { key: i, className: "step" },
            e("span", { className: "step-n" }, st.n),
            e(Seam, { color: "rgba(255,221,21,.55)", style: { width: "100%", margin: "18px 0" } }),
            e("h3", { className: "step-title" }, st.t),
            e("p", { className: "step-desc" }, st.d)
          )
        )
      )
    )
  );
}

/* ───────────────────────── CONTACT / QUOTE ───────────────────────── */
function Field({ label, children }) {
  return e("label", { className: "field" }, e("span", { className: "field-label" }, label), children);
}

function Contact({ t }) {
  const c = t.contact;
  const [sent, setSent] = useStateS(false);
  const [sending, setSending] = useStateS(false);
  const submit = (ev) => {
    ev.preventDefault();
    setSending(true);
    setTimeout(() => { setSending(false); setSent(true); }, 850);
  };
  return e(
    "section",
    { className: "section section-yellow", id: "contact", "data-screen-label": "Contact" },
    e("img", { src: "assets/tito-face-deep.png", alt: "", "aria-hidden": "true", style: { position: "absolute", left: -60, bottom: -120, width: 460, opacity: 0.5, pointerEvents: "none" } }),
    e(
      "div",
      { className: "wrap contact-wrap" },
      e(
        "div",
        { className: "contact-left" },
        e(Kicker, { children: c.kicker, color: "var(--ink)" }),
        e("h2", { className: "section-title contact-title" }, c.title),
        e("p", { className: "contact-sub" }, c.sub),
        e(
          "div",
          { className: "contact-details" },
          e("div", { className: "cd-block" },
            e("div", { className: "cd-label" }, c.reach),
            e("a", { className: "cd-line", href: "mailto:" + INFO.email }, e("i", { className: "bi bi-envelope" }), INFO.email),
            e("a", { className: "cd-line", href: "tel:" + INFO.phoneHref }, e("i", { className: "bi bi-telephone" }), INFO.phone)
          ),
          e("div", { className: "cd-block" },
            e("div", { className: "cd-label" }, c.visit),
            e("div", { className: "cd-line cd-static" }, e("i", { className: "bi bi-geo-alt" }), e("span", null, INFO.city, e("br"), INFO.street))
          ),
          e("div", { className: "cd-block" },
            e("div", { className: "cd-label" }, c.follow),
            e("div", { className: "cd-socials" },
              e(PillButton, { variant: "ink", size: "sm", icon: "bi-instagram", href: INFO.instagram }, "Instagram"),
              e(PillButton, { variant: "ink", size: "sm", icon: "bi-facebook", href: INFO.facebook }, "Facebook")
            )
          )
        )
      ),
      e(
        "div",
        { className: "contact-card" },
        sent
          ? e(
              "div",
              { className: "sent-state" },
              e("div", { className: "sent-badge" }, e("i", { className: "bi bi-check-lg" })),
              e("h3", { className: "sent-title" }, t.cta.sentTitle),
              e("p", { className: "sent-body" }, t.cta.sentBody),
              e(PillButton, { variant: "outline", onClick: () => setSent(false), style: { marginTop: 22 } }, t.cta.another)
            )
          : e(
              "form",
              { className: "quote-form", onSubmit: submit },
              e("div", { className: "form-row" },
                e(Field, { label: c.form.name }, e("input", { required: true, placeholder: c.form.namePh, className: "inp" })),
                e(Field, { label: c.form.phone }, e("input", { placeholder: c.form.phonePh, className: "inp" }))
              ),
              e(Field, { label: c.form.email }, e("input", { required: true, type: "email", placeholder: c.form.emailPh, className: "inp" })),
              e(Field, { label: c.form.type },
                e("select", { className: "inp", defaultValue: "" },
                  e("option", { value: "", disabled: true }, "—"),
                  c.form.typeOptions.map((o, i) => e("option", { key: i }, o))
                )
              ),
              e(Field, { label: c.form.message }, e("textarea", { rows: 4, placeholder: c.form.messagePh, className: "inp" })),
              e(PillButton, { variant: "ink", type: "submit", as: "button", icon: sending ? "bi-arrow-repeat" : "bi-send",
                style: { width: "100%", justifyContent: "center", marginTop: 4, opacity: sending ? 0.7 : 1 } },
                sending ? t.cta.sending : t.cta.send)
            )
      )
    )
  );
}

/* ───────────────────────── FOOTER ───────────────────────── */
function Footer({ t, onNav }) {
  return e(
    "footer",
    { className: "site-footer", "data-screen-label": "Footer" },
    e(
      "div",
      { className: "wrap footer-wrap" },
      e("div", { className: "footer-brand" },
        e("img", { src: "assets/tito-logo-yellow.png", alt: "Tito Atelier", height: 34 }),
        e("p", { className: "footer-tagline" }, t.footer.tagline)
      ),
      e("div", { className: "footer-cols" },
        e("div", { className: "footer-col" },
          e("a", { href: "mailto:" + INFO.email }, INFO.email),
          e("a", { href: "tel:" + INFO.phoneHref }, INFO.phone)
        ),
        e("div", { className: "footer-col" },
          e("span", null, INFO.city),
          e("span", null, INFO.street)
        ),
        e("div", { className: "footer-col" },
          e("a", { href: INFO.instagram }, "Instagram"),
          e("a", { href: INFO.facebook }, "Facebook")
        )
      )
    ),
    e("div", { className: "footer-bottom" },
      e("div", { className: "wrap footer-bottom-inner" },
        e("span", null, t.footer.rights),
        e("span", { className: "footer-made" }, e(ButtonDot, { size: 16, color: "var(--yellow)" }), t.footer.made)
      )
    )
  );
}

Object.assign(window, { Header, Statement, Services, Process, Contact, Footer });