/* global React, Reveal, SectionHeader, Arrow, HeroCanvas, SectionBg, useScrollY, setUserMode, setUserPalette, setUserLanguage */
// Section components — Hero, Services, Work, About, Contact, Nav, Marquee

const { useEffect, useRef, useState } = React;

const VISITOR_PALETTES = [
  { id: "copper", label: "Copper Obsidian", short: "Copper", color: "#c97a4a" },
  { id: "forest", label: "Terminal Forest", short: "Forest", color: "#4ade80" },
  { id: "indigo", label: "Midnight Indigo", short: "Indigo", color: "#818cf8" },
];

const VISITOR_LANGUAGES = [
  { id: "en", short: "EN", label: "English" },
  { id: "ar", short: "AR", label: "العربية" },
  { id: "he", short: "HE", label: "עברית" },
];

const SHARED_COPY = {
  en: {
    paletteLine: "The truth is, I couldn't pick a color. So naturally, I made it your problem.",
    nav: { services: "Services", work: "Work", about: "About", contact: "Contact", bookCall: "Book a call" },
    heroScroll: "Scroll to begin",
    heroActions: { primary: "See what I build", secondary: "Selected work" },
    sections: {
      servicesIdx: "01 / SERVICES",
      servicesLabel: "What I do",
      workIdx: "02 / WORK",
      workLabel: "Selected projects",
      aboutIdx: "03 / ABOUT",
      aboutLabel: "Profile",
      aboutTitle: "About",
    },
    motion: {
      label: "Motion system",
      title: "A campaign pipeline you can actually feel.",
      desc: "A cinematic breakdown of the flow: from WhatsApp message to generated creative, automation routing, approval, and publishing.",
      steps: ["Message", "Generate", "Approve", "Publish"],
      sequence: "LAUNCHO_SEQUENCE_01",
      frames: [
        { label: "Input", title: "Original product photo" },
        { label: "Creative", title: "Brand-aware ad design" },
        { label: "System", title: "Automation routing" },
      ],
    },
    aboutTeaser: {
      label: "Profile",
      title: "The engineer behind the systems.",
      body: "I’m Omar, an AI Solution Engineer building automations, websites, campaign workflows, and full-stack products that save businesses real time.",
      cta: "Read my story",
    },
  },
  ar: {
    paletteLine: "بصراحة... لم أستطع اختيار لون واحد، فقررت أن أحمّلك المسؤولية.",
    nav: { services: "الخدمات", work: "الأعمال", about: "عنّي", contact: "تواصل", bookCall: "احجز مكالمة" },
    heroScroll: "مرّر للمتابعة",
    heroActions: { primary: "شاهد ما أبنيه", secondary: "أعمال مختارة" },
    sections: {
      servicesIdx: "01 / الخدمات",
      servicesLabel: "ما أقدّمه",
      workIdx: "02 / الأعمال",
      workLabel: "مشاريع مختارة",
      aboutIdx: "03 / عنّي",
      aboutLabel: "الملف الشخصي",
      aboutTitle: "عن عمر",
    },
    motion: {
      label: "نظام الحركة",
      title: "مسار حملة يمكنك أن تشعر به.",
      desc: "عرض بصري لتدفّق Launcho: من رسالة واتساب إلى تصميم الإعلان، التوجيه الآلي، الموافقة، ثم النشر.",
      steps: ["رسالة", "تصميم", "موافقة", "نشر"],
      sequence: "LAUNCHO_SEQUENCE_01",
      frames: [
        { label: "إدخال", title: "صورة المنتج الأصلية" },
        { label: "تصميم", title: "إعلان متوافق مع البراند" },
        { label: "نظام", title: "توجيه الأتمتة" },
      ],
    },
    aboutTeaser: {
      label: "الملف الشخصي",
      title: "المهندس خلف الأنظمة.",
      body: "أنا عمر، مهندس حلول ذكاء اصطناعي أبني أتمتة ومواقع ومسارات حملات ومنتجات كاملة توفّر وقتًا حقيقيًا للشركات.",
      cta: "اقرأ قصتي",
    },
  },
  he: {
    paletteLine: "האמת? לא הצלחתי לבחור צבע אחד. אז העברתי את הבעיה אליכם.",
    nav: { services: "שירותים", work: "עבודות", about: "עליי", contact: "יצירת קשר", bookCall: "לקביעת שיחה" },
    heroScroll: "גללו להמשך",
    heroActions: { primary: "מה אני בונה", secondary: "עבודות נבחרות" },
    sections: {
      servicesIdx: "01 / שירותים",
      servicesLabel: "מה אני עושה",
      workIdx: "02 / עבודות",
      workLabel: "פרויקטים נבחרים",
      aboutIdx: "03 / עליי",
      aboutLabel: "פרופיל",
      aboutTitle: "על עומר",
    },
    motion: {
      label: "מערכת בתנועה",
      title: "תהליך קמפיין שמרגישים.",
      desc: "פירוק ויזואלי של Launcho: מהודעת WhatsApp לקריאייטיב, ניתוב אוטומטי, אישור ופרסום.",
      steps: ["הודעה", "יצירה", "אישור", "פרסום"],
      sequence: "LAUNCHO_SEQUENCE_01",
      frames: [
        { label: "קלט", title: "תמונת מוצר מקורית" },
        { label: "קריאייטיב", title: "עיצוב מותאם מותג" },
        { label: "מערכת", title: "ניתוב אוטומציה" },
      ],
    },
    aboutTeaser: {
      label: "פרופיל",
      title: "המהנדס שמאחורי המערכות.",
      body: "אני עומר, מהנדס פתרונות AI שבונה אוטומציות, אתרים, תהליכי קמפיינים ומוצרים מלאים שחוסכים לעסקים זמן אמיתי.",
      cta: "קראו את הסיפור",
    },
  },
};

function readLanguage() {
  const language = document.documentElement.dataset.language;
  return VISITOR_LANGUAGES.some((item) => item.id === language) ? language : "en";
}

function copyFor(language = readLanguage()) {
  return SHARED_COPY[language] || SHARED_COPY.en;
}

window.PaletteChoice = function PaletteChoice({ compact = false }) {
  const readPalette = () => {
    const palette = document.documentElement.dataset.palette;
    return VISITOR_PALETTES.some((item) => item.id === palette) ? palette : "copper";
  };
  const [palette, setPalette] = useState(readPalette);
  const [language, setLanguage] = useState(readLanguage);

  useEffect(() => {
    const onPalette = () => setPalette(readPalette());
    window.addEventListener("sitepalettechange", onPalette);
    onPalette();
    return () => window.removeEventListener("sitepalettechange", onPalette);
  }, []);
  useEffect(() => {
    const onLanguage = () => setLanguage(readLanguage());
    window.addEventListener("sitelanguagechange", onLanguage);
    onLanguage();
    return () => window.removeEventListener("sitelanguagechange", onLanguage);
  }, []);

  const choose = (next) => {
    if (typeof setUserPalette === "function") setUserPalette(next);
    else document.documentElement.dataset.palette = next;
    setPalette(next);
  };

  return React.createElement(
    "div",
    { className: `palette-choice ${compact ? "compact" : ""}`, "aria-label": "Choose site color palette" },
    !compact && React.createElement(
      "p",
      { className: "palette-choice-line" },
      copyFor(language).paletteLine
    ),
    React.createElement(
      "div",
      { className: "palette-choice-options" },
      VISITOR_PALETTES.map((item) =>
        React.createElement(
          "button",
          {
            key: item.id,
            type: "button",
            className: "palette-choice-button",
            "data-active": palette === item.id ? "true" : "false",
            onClick: () => choose(item.id),
            style: { "--swatch": item.color },
            "aria-label": `Use ${item.label}`,
            title: item.label,
          },
          React.createElement("span", { className: "palette-choice-dot" }),
          React.createElement("span", { className: "palette-choice-text" }, item.short)
        )
      )
    )
  );
};

window.LanguageChoice = function LanguageChoice({ compact = true }) {
  const [language, setLanguage] = useState(readLanguage);

  useEffect(() => {
    const onLanguage = () => setLanguage(readLanguage());
    window.addEventListener("sitelanguagechange", onLanguage);
    onLanguage();
    return () => window.removeEventListener("sitelanguagechange", onLanguage);
  }, []);

  const choose = (next) => {
    if (typeof setUserLanguage === "function") setUserLanguage(next);
    else {
      document.documentElement.dataset.language = next;
      document.documentElement.lang = next;
      document.documentElement.dir = next === "ar" || next === "he" ? "rtl" : "ltr";
      window.dispatchEvent(new CustomEvent("sitelanguagechange", { detail: { language: next } }));
    }
    setLanguage(next);
  };

  return React.createElement(
    "div",
    { className: `language-choice ${compact ? "compact" : ""}`, "aria-label": "Choose website language" },
    VISITOR_LANGUAGES.map((item) =>
      React.createElement(
        "button",
        {
          key: item.id,
          type: "button",
          className: "language-choice-button",
          "data-active": language === item.id ? "true" : "false",
          onClick: () => choose(item.id),
          "aria-label": `Switch language to ${item.label}`,
          title: item.label,
        },
        compact ? item.short : item.label
      )
    )
  );
};

// ============================================================
// Nav
// ============================================================
window.SiteNav = function SiteNav({ data, page = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  const languageCopy = data.nav || copyFor().nav;
  const readMode = () => document.documentElement.dataset.mode === "light" ? "light" : "dark";
  const [mode, setMode] = useState(readMode);
  const homePrefix = page === "home" ? "" : "index.html";
  const aboutHref = page === "about" ? "#top" : "about.html";
  const contactHref = page === "home" ? "#contact" : "index.html#contact";
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    const onMode = () => setMode(readMode());
    window.addEventListener("sitemodechange", onMode);
    onMode();
    return () => window.removeEventListener("sitemodechange", onMode);
  }, []);

  const toggleMode = () => {
    const next = mode === "dark" ? "light" : "dark";
    if (typeof setUserMode === "function") setUserMode(next);
    else document.documentElement.dataset.mode = next;
    setMode(next);
  };

  return React.createElement(
    "nav",
    { className: `nav ${scrolled ? "scrolled" : ""}` },
    React.createElement(
      "a", { href: "#top", className: "nav-brand" },
      React.createElement("span", { className: "mark" }, data.initials),
      data.brandName
    ),
    React.createElement(
      "div", { className: "nav-links" },
      React.createElement("a", { href: `${homePrefix}#services` }, languageCopy.services),
      React.createElement("a", { href: `${homePrefix}#work` }, languageCopy.work),
      React.createElement("a", { href: aboutHref }, languageCopy.about),
      React.createElement("a", { href: contactHref }, languageCopy.contact)
    ),
    React.createElement(
      "div", { className: "nav-cta" },
      React.createElement(
        "div", { className: "nav-status" },
        React.createElement("span", { className: "status-dot" }),
        data.status
      ),
      React.createElement(
        "a", { href: contactHref, className: "btn btn-primary", style: { padding: "10px 18px", fontSize: 13 } },
        languageCopy.bookCall,
        React.createElement(Arrow, null)
      ),
      React.createElement(PaletteChoice, { compact: true }),
      React.createElement(LanguageChoice, { compact: true }),
      React.createElement(
        "button",
        {
          type: "button",
          className: "theme-toggle",
          onClick: toggleMode,
          "aria-label": mode === "dark" ? "Switch to light mode" : "Switch to dark mode",
          title: mode === "dark" ? "Switch to light mode" : "Switch to dark mode",
        },
        React.createElement("span", { className: `theme-icon ${mode}` })
      )
    )
  );
};

window.HeroLoopVideo = function HeroLoopVideo({ src, poster }) {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video || !src) return undefined;

    video.loop = true;
    video.muted = true;
    video.playsInline = true;
    video.preload = "auto";
    video.currentTime = 0;

    const play = () => {
      const result = video.play();
      if (result && typeof result.catch === "function") result.catch(() => {});
    };

    play();

    return () => {
      video.pause();
    };
  }, [src]);

  return React.createElement(
    "div",
    { className: "hero-loop-video", "aria-hidden": "true" },
    React.createElement("video", {
      ref: videoRef,
      src,
      poster,
      autoPlay: true,
      loop: true,
      muted: true,
      playsInline: true,
      preload: "auto",
      className: "active",
    })
  );
};

window.HeroStillImage = function HeroStillImage({ src }) {
  return React.createElement(
    "img",
    {
      className: "hero-still-image",
      src,
      alt: "",
      "aria-hidden": "true",
      decoding: "async",
    }
  );
};

// ============================================================
// Hero
// ============================================================
window.Hero = function Hero({ data, media }) {
  const y = useScrollY();
  const hasMedia = media && media.src;
  const heroParallax = hasMedia
    ? { transform: "translate3d(0, 0, 0)" }
    : { transform: `translate3d(0, ${y * 0.35}px, 0) scale(${1 + y * 0.0004})` };
  const contentParallax = { transform: `translate3d(0, ${y * -0.15}px, 0)`, opacity: Math.max(0, 1 - y / 600) };
  return React.createElement(
    "section",
    { id: "top", className: "hero" },
    React.createElement(
      "div", { className: "hero-video-wrap", style: heroParallax },
      media && media.type === "video" && media.src
        ? React.createElement(HeroLoopVideo, { src: media.src, poster: media.poster })
        : media && media.type === "image" && media.src
          ? React.createElement(HeroStillImage, { src: media.src })
        : React.createElement(HeroCanvas, null)
    ),
    React.createElement("div", { className: "hero-veil" }),

    // Corner mono labels
    React.createElement(
      "div", { className: "hero-corners" },
      React.createElement(
        "div", { className: "hero-corner tr" },
        data.location,
        React.createElement("span", { className: "seg" })
      ),
      React.createElement(
        "div", { className: "hero-corner br" },
        React.createElement("span", { className: "seg" }),
        data.heroScroll || copyFor().heroScroll
      )
    ),

    // Content
    React.createElement(
      "div", { className: "hero-content", style: contentParallax },
      React.createElement(
        "div", { className: "hero-eyebrow" },
        React.createElement("span", { className: "line" }),
        data.eyebrow
      ),
      React.createElement("h1", { className: "hero-title h-display" },
        data.headlinePre,
        " ",
        React.createElement("span", { className: "accent" }, data.headlineAccent),
        data.headlinePost && React.createElement(React.Fragment, null, " ", data.headlinePost)
      ),
      React.createElement("p", { className: "hero-sub" }, data.sub),
      React.createElement(PaletteChoice, null),
      React.createElement(
        "div", { className: "hero-proof", "aria-label": "Proof points" },
        data.heroProof.map((item) =>
          React.createElement(
            "div", { className: "hero-proof-item", key: item.k },
            React.createElement("span", { className: "k" }, item.k),
            React.createElement("span", { className: "v" }, item.v)
          )
        )
      ),
      React.createElement(
        "div", { className: "hero-actions" },
        React.createElement("a", { href: "#services", className: "btn btn-primary" },
          data.heroActions?.primary || copyFor().heroActions.primary, React.createElement(Arrow, null)),
        React.createElement("a", { href: "#work", className: "btn btn-ghost" },
          data.heroActions?.secondary || copyFor().heroActions.secondary, React.createElement(Arrow, null))
      )
    )
  );
};

// ============================================================
// Marquee
// ============================================================
window.Marquee = function Marquee({ items }) {
  // duplicate to make seamless loop
  const doubled = [...items, ...items];
  return React.createElement(
    "div", { className: "marquee" },
    React.createElement(
      "div", { className: "marquee-track" },
      doubled.map((item, i) =>
        React.createElement(
          "span", { className: "item", key: i },
          item,
          React.createElement("span", { className: "dot" })
        )
      )
    )
  );
};

// ============================================================
// Services
// ============================================================
window.Services = function Services({ data }) {
  const shared = copyFor();
  return React.createElement(
    "section", { id: "services", className: "block" },
    React.createElement(SectionBg, { variant: "grid" }),
    React.createElement(
      "div", { className: "wrap" },
      React.createElement(Reveal, null,
        React.createElement(SectionHeader, {
          idx: data.sectionLabels?.servicesIdx || shared.sections.servicesIdx,
          label: data.sectionLabels?.servicesLabel || shared.sections.servicesLabel,
          title: data.servicesHeadline,
          kicker: data.servicesKicker,
        })
      ),
      React.createElement(
        "div", { className: "services-grid" },
        data.services.map((s, i) =>
          React.createElement(
            Reveal, { key: s.name, delay: i * 80 },
            React.createElement(
              "div", { className: "service-card" },
              React.createElement("div", { className: "num" }, String(i + 1).padStart(2, "0")),
              React.createElement("div", { className: "name h-display" }, s.name),
              React.createElement("p", { className: "desc" }, s.desc),
              React.createElement(
                "div", { className: "meta" },
                s.tags.map((t) => React.createElement("span", { className: "tag", key: t }, t))
              ),
              React.createElement(
                "span", { className: "arrow-link" },
                React.createElement(Arrow, { size: 12 })
              )
            )
          )
        )
      )
    )
  );
};

// ============================================================
// Work
// ============================================================
function ProofVisual({ item }) {
  if (item.type === "process") {
    return React.createElement(
      "article", { className: "proof-visual-card proof-process", "data-cursor-hover": "true" },
      React.createElement(
        "div", { className: "proof-visual-copy" },
        React.createElement("span", null, item.label),
        React.createElement("h3", { className: "h-display" }, item.title),
        React.createElement("p", null, item.desc)
      ),
      React.createElement(
        "div", { className: "proof-process-media", "aria-label": `${item.label} process screenshots` },
        item.steps.map((step) =>
          React.createElement(
            "figure", { className: "proof-media-pane", key: step.label },
            React.createElement("figcaption", null, step.label),
            React.createElement("img", { src: step.src, alt: step.label, loading: "lazy" })
          )
        )
      )
    );
  }

  if (item.type === "system") {
    return React.createElement(
      "article", { className: "proof-visual-card proof-system", "data-cursor-hover": "true" },
      React.createElement(
        "div", { className: "proof-visual-copy" },
        React.createElement("span", null, item.label),
        React.createElement("h3", { className: "h-display" }, item.title),
        React.createElement("p", null, item.desc)
      ),
      React.createElement(
        "div", { className: "proof-system-grid" },
        item.stats.map((stat, i) =>
          React.createElement(
            "div", { className: "proof-system-item", key: stat },
            React.createElement("span", null, String(i + 1).padStart(2, "0")),
            stat
          )
        )
      )
    );
  }

  return React.createElement(
    "article", { className: "proof-visual-card proof-wide", "data-cursor-hover": "true" },
    React.createElement(
      "div", { className: "proof-visual-copy" },
      React.createElement("span", null, item.label),
      React.createElement("h3", { className: "h-display" }, item.title),
      React.createElement("p", null, item.desc)
    ),
    React.createElement(
      "figure", { className: "proof-wide-frame" },
      React.createElement("img", { src: item.src, alt: item.title, loading: "lazy" })
    )
  );
}

function MotionCaseBoard() {
  const shared = copyFor();
  const frames = [
    {
      k: "00",
      label: shared.motion.frames[0].label,
      title: shared.motion.frames[0].title,
      src: "uploads/case-studies/launcho-product-photo.png",
    },
    {
      k: "01",
      label: shared.motion.frames[1].label,
      title: shared.motion.frames[1].title,
      src: "uploads/case-studies/launcho-generated-ad.png",
    },
    {
      k: "02",
      label: shared.motion.frames[2].label,
      title: shared.motion.frames[2].title,
      src: "uploads/case-studies/launcho-workflow-map.png",
    },
  ];

  return React.createElement(
    Reveal, { delay: 120 },
    React.createElement(
      "article", { className: "motion-case-board", "data-cursor-hover": "true" },
      React.createElement(
        "div", { className: "motion-case-copy" },
        React.createElement("div", { className: "mono-label" },
          React.createElement("span", { className: "dot" }),
          shared.motion.label
        ),
        React.createElement("h3", { className: "h-display" }, shared.motion.title),
        React.createElement("p", null,
          shared.motion.desc
        ),
        React.createElement(
          "div", { className: "motion-case-steps" },
          shared.motion.steps.map((step, i) =>
            React.createElement(
              "span", { key: step },
              React.createElement("b", null, String(i + 1).padStart(2, "0")),
              step
            )
          )
        )
      ),
      React.createElement(
        "div", { className: "motion-stage", "aria-label": "Launcho motion storyboard" },
        React.createElement(
          "div", { className: "motion-stage-top" },
          React.createElement("span", null, shared.motion.sequence),
          React.createElement("span", null, "00:12")
        ),
        React.createElement(
          "div", { className: "motion-frame-stack" },
          frames.map((frame, i) =>
            React.createElement(
              "figure",
              {
                className: "motion-frame",
                key: frame.label,
                style: { "--i": i },
              },
              React.createElement("img", { src: frame.src, alt: frame.title, loading: "lazy" }),
              React.createElement(
                "figcaption", null,
                React.createElement("span", null, frame.k),
                React.createElement("strong", null, frame.label),
                React.createElement("em", null, frame.title)
              )
            )
          )
        ),
        React.createElement(
          "div", { className: "motion-timeline", "aria-hidden": "true" },
          React.createElement("span", { className: "motion-playhead" }),
          Array.from({ length: 16 }).map((_, i) =>
            React.createElement("i", { key: i, style: { "--i": i } })
          )
        )
      )
    )
  );
}

window.Work = function Work({ data }) {
  const shared = copyFor();
  return React.createElement(
    "section", { id: "work", className: "block" },
    React.createElement(SectionBg, { variant: "waves" }),
    React.createElement(
      "div", { className: "wrap" },
      React.createElement(Reveal, null,
        React.createElement(SectionHeader, {
          idx: data.sectionLabels?.workIdx || shared.sections.workIdx,
          label: data.sectionLabels?.workLabel || shared.sections.workLabel,
          title: data.workHeadline,
          kicker: data.workKicker,
        })
      ),
      data.proofVisuals?.length && React.createElement(
        "div", { className: "proof-visual-grid", "aria-label": "Project proof visuals" },
        data.proofVisuals.map((item, i) =>
          React.createElement(
            Reveal, { key: item.title, delay: i * 70 },
            React.createElement(ProofVisual, { item })
          )
        )
      ),
      React.createElement(MotionCaseBoard, null),
      React.createElement(
        "div", { className: "work-list" },
        data.work.map((w, i) =>
          React.createElement(
            Reveal, { key: w.title, delay: i * 60 },
            React.createElement(
              "div", { className: "work-row", "data-cursor-hover": "true" },
              React.createElement("div", { className: "num" }, String(i + 1).padStart(2, "0")),
              React.createElement(
                "div", null,
                React.createElement("div", { className: "title h-display" }, w.title),
                React.createElement("div", { className: "client", style: { display: "block" } }, w.summary)
              ),
              React.createElement("div", { className: "client" }, w.client),
              React.createElement("div", { className: "year" }, w.year),
              React.createElement("div", { className: "arrow" },
                React.createElement(Arrow, { size: 14 })
              )
            )
          )
        )
      )
    )
  );
};

// ============================================================
// About teaser — homepage keeps the story short, full page carries depth
// ============================================================
window.AboutTeaser = function AboutTeaser({ data }) {
  const shared = copyFor();
  return React.createElement(
    "section", { id: "about", className: "block about-teaser" },
    React.createElement(SectionBg, { variant: "drift" }),
    React.createElement(
      "div", { className: "wrap about-teaser-grid" },
      React.createElement(Reveal, null,
        React.createElement(
          "div", null,
          React.createElement("div", { className: "mono-label", style: { marginBottom: 18 } },
            React.createElement("span", { className: "dot" }),
            data.aboutTeaser?.label || shared.aboutTeaser.label
          ),
          React.createElement("h2", { className: "about-teaser-title h-display" },
            data.aboutTeaser?.title || shared.aboutTeaser.title
          )
        )
      ),
      React.createElement(Reveal, { delay: 100 },
        React.createElement(
          "div", { className: "about-teaser-panel" },
          React.createElement("p", null,
            data.aboutTeaser?.body || shared.aboutTeaser.body
          ),
          React.createElement(
            "a", { href: "about.html", className: "btn btn-primary" },
            data.aboutTeaser?.cta || shared.aboutTeaser.cta,
            React.createElement(Arrow, null)
          )
        )
      )
    )
  );
};

// ============================================================
// About — single page, sticky portrait + long body
// ============================================================
window.About = function About({ data }) {
  const shared = copyFor();
  return React.createElement(
    "section", { id: "about", className: "block about" },
    React.createElement(SectionBg, { variant: "drift" }),
    React.createElement(
      "div", { className: "wrap" },
      React.createElement(Reveal, null,
        React.createElement(SectionHeader, {
          idx: data.sectionLabels?.aboutIdx || shared.sections.aboutIdx,
          label: data.sectionLabels?.aboutLabel || shared.sections.aboutLabel,
          title: data.sectionLabels?.aboutTitle || shared.sections.aboutTitle,
        })
      ),

      React.createElement(Reveal, null,
        React.createElement("p", { className: "about-intro" },
          data.aboutIntroPre,
          " ",
          React.createElement("em", null, data.aboutIntroAccent),
          " ",
          data.aboutIntroPost
        )
      ),

      React.createElement(
        "div", { className: "about-grid" },
        // Sticky side
        React.createElement(
          "aside", { className: "about-side" },
          React.createElement(
            "div", { className: "about-portrait" },
            data.portraitSrc
              ? React.createElement("img", { src: data.portraitSrc, alt: `${data.brandName} portrait` })
              : React.createElement("image-slot", {
                  id: "about-portrait",
                  shape: "rect",
                  radius: "4",
                  placeholder: "Drop your portrait",
                  style: { width: "100%", height: "100%" },
                })
          ),
          React.createElement(
            "div", { className: "about-meta" },
            data.aboutMeta.map((m) =>
              React.createElement(
                "div", { className: "about-meta-row", key: m.k },
                React.createElement("span", { className: "k" }, m.k),
                React.createElement("span", { className: "v" }, m.v)
              )
            )
          )
        ),

        // Body
        React.createElement(
          "div", { className: "about-body" },
          data.aboutBody.map((block, i) => {
            if (block.type === "p") {
              return React.createElement(Reveal, { key: i, delay: i * 30 },
                React.createElement("p", { dangerouslySetInnerHTML: { __html: block.html } })
              );
            }
            if (block.type === "quote") {
              return React.createElement(Reveal, { key: i },
                React.createElement("div", { className: "about-quote" }, block.text)
              );
            }
            if (block.type === "timeline") {
              return React.createElement(
                Reveal, { key: i },
                React.createElement(
                  "div", null,
                  React.createElement("div", { className: "mono-label", style: { marginBottom: 20 } },
                    React.createElement("span", { className: "dot" }),
                    block.label
                  ),
                  React.createElement(
                    "div", { className: "timeline" },
                    block.rows.map((r, j) =>
                      React.createElement(
                        "div", { className: "timeline-row", key: j },
                        React.createElement("div", { className: "when" }, r.when),
                        React.createElement(
                          "div", { className: "what" },
                          React.createElement("div", { className: "role" }, r.role),
                          React.createElement("div", { className: "org" }, r.org)
                        )
                      )
                    )
                  )
                )
              );
            }
            if (block.type === "stack") {
              return React.createElement(
                Reveal, { key: i },
                React.createElement(
                  "div", null,
                  React.createElement("div", { className: "mono-label", style: { marginBottom: 20 } },
                    React.createElement("span", { className: "dot" }),
                    block.label
                  ),
                  React.createElement(
                    "div", { className: "stack" },
                    block.items.map((it) =>
                      React.createElement("span", { className: "chip", key: it }, it)
                    )
                  )
                )
              );
            }
            return null;
          })
        )
      )
    )
  );
};

// ============================================================
// Contact / Footer
// ============================================================
window.Contact = function Contact({ data }) {
  return React.createElement(
    "section", { id: "contact", className: "contact" },
    React.createElement(SectionBg, { variant: "rays" }),
    React.createElement(
      "div", { className: "wrap" },
      React.createElement(Reveal, null,
        React.createElement("div", { className: "pretitle" },
          React.createElement("span", { className: "status-dot", style: { display: "inline-block", marginRight: 8, verticalAlign: "middle" } }),
          data.contactPretitle
        )
      ),
      React.createElement(Reveal, { delay: 100 },
        React.createElement("h2", { className: "contact-headline h-display" },
          data.contactPre,
          " ",
          React.createElement("em", null, data.contactAccent)
        )
      ),
      React.createElement(Reveal, { delay: 200 },
        React.createElement("a", { className: "contact-email", href: `mailto:${data.email}` },
          data.email,
          React.createElement(Arrow, { size: 16 })
        )
      ),
      React.createElement(
        "div", { className: "footer" },
        React.createElement("div", null, `© ${new Date().getFullYear()} ${data.brandName}`),
        React.createElement(
          "div", { className: "center" },
          data.socials.map((s) =>
            React.createElement("a", { key: s.label, href: s.href, target: "_blank", rel: "noreferrer" }, s.label)
          )
        ),
        React.createElement("div", { className: "right" }, data.location)
      )
    )
  );
};

// Force-export
Object.assign(window, { SiteNav: window.SiteNav, Hero: window.Hero, Marquee: window.Marquee, Services: window.Services, Work: window.Work, AboutTeaser: window.AboutTeaser, About: window.About, Contact: window.Contact, PaletteChoice: window.PaletteChoice, LanguageChoice: window.LanguageChoice });