/* FlytAI — SVG Icons, Hooks, and Page Section Components */

/* ═══ ICONS ═══════════════════════════════════════════ */
function IconCheck({ size = 14 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: '2.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M3 8.5l3.5 3.5L13 5' })
  );
}

function IconStrategy({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('circle', { cx: '12', cy: '9', r: '3' }),
    React.createElement('path', { d: 'M12 2v4M12 12v3M9 18h6M4.93 4.93l2.83 2.83M19.07 4.93l-2.83 2.83' })
  );
}

function IconAutomation({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83' }),
    React.createElement('circle', { cx: '12', cy: '12', r: '3' })
  );
}

function IconVoice({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('rect', { x: '9', y: '2', width: '6', height: '12', rx: '3' }),
    React.createElement('path', { d: 'M5.5 11a6.5 6.5 0 0 0 13 0' }),
    React.createElement('line', { x1: '12', y1: '19', x2: '12', y2: '22' }),
    React.createElement('line', { x1: '8', y1: '22', x2: '16', y2: '22' })
  );
}

function IconTarget({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('circle', { cx: '12', cy: '12', r: '10' }),
    React.createElement('circle', { cx: '12', cy: '12', r: '6' }),
    React.createElement('circle', { cx: '12', cy: '12', r: '2' })
  );
}

function IconChart({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M3 20h18' }),
    React.createElement('path', { d: 'M3 17l5-7 4 4 9-11' })
  );
}

function IconShield({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M12 3l8 4v5c0 5.25-3.5 8.25-8 10-4.5-1.75-8-4.75-8-10V7l8-4z' }),
    React.createElement('path', { d: 'M9 12l2 2 4-4' })
  );
}

function IconClock({ size = 16 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('circle', { cx: '12', cy: '12', r: '10' }),
    React.createElement('path', { d: 'M12 6v6l4 2' })
  );
}

function IconScale({ size = 16 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M21 21H3V3' }),
    React.createElement('path', { d: 'M7 17l4-6 4 3 6-8' })
  );
}

function IconMenu({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 22 22', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round' },
    React.createElement('line', { x1: '3', y1: '6', x2: '19', y2: '6' }),
    React.createElement('line', { x1: '3', y1: '11', x2: '19', y2: '11' }),
    React.createElement('line', { x1: '3', y1: '16', x2: '19', y2: '16' })
  );
}

function IconClose({ size = 22 }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 22 22', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round' },
    React.createElement('line', { x1: '5', y1: '5', x2: '17', y2: '17' }),
    React.createElement('line', { x1: '17', y1: '5', x2: '5', y2: '17' })
  );
}

const WHY_ICONS = { target: IconTarget, chart: IconChart, shield: IconShield };
const CHALLENGE_ICONS = { clock: IconClock, chart: IconChart, scale: IconScale };

/* ═══ HOOKS ═══════════════════════════════════════════ */
function useFadeIn() {
  var ref = React.useRef(null);
  var _s = React.useState(false); var visible = _s[0]; var setVisible = _s[1];
  React.useEffect(function () {
    var el = ref.current; if (!el) return;
    var done = false;
    function markVisible() { if (!done) { done = true; setVisible(true); if (obs) obs.disconnect(); } }
    var obs = new IntersectionObserver(function (entries) {
      if (entries[0].isIntersecting) markVisible();
    }, { threshold: 0, rootMargin: '0px 0px 80px 0px' });
    obs.observe(el);
    // Robust fallback chain for above-fold elements
    setTimeout(function () {
      if (done) return;
      var rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight + 80 && rect.bottom > 0) markVisible();
    }, 50);
    setTimeout(function () {
      if (done) return;
      var rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight + 80 && rect.bottom > 0) markVisible();
    }, 300);
    return function () { obs.disconnect(); };
  }, []);
  return [ref, visible];
}

/* ═══ FADE-IN WRAPPER ═════════════════════════════════ */
function FadeIn(props) {
  return React.createElement('div', { className: props.className || '' }, props.children);
}

/* ═══ NAVIGATION ══════════════════════════════════════ */
function Nav(props) {
  var t = props.t; var lang = props.lang; var onLangChange = props.onLangChange;
  var _s = React.useState(false); var menuOpen = _s[0]; var setMenuOpen = _s[1];
  var _sc = React.useState(false); var scrolled = _sc[0]; var setScrolled = _sc[1];
  var langs = ['en', 'no', 'es'];
  var langLabels = { en: 'EN', no: 'NO', es: 'ES' };

  function cycleLang() {
    var idx = langs.indexOf(lang);
    var next = langs[(idx + 1) % langs.length];
    onLangChange(next);
  }

  React.useEffect(function () {
    var onScroll = function () { setScrolled(window.scrollY > 20); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return function () { window.removeEventListener('scroll', onScroll); };
  }, []);

  return React.createElement(React.Fragment, null,
    React.createElement('nav', { className: 'nav' + (scrolled ? ' scrolled' : '') },
      React.createElement('a', { className: 'nav-logo', href: '#' }, 'Flyt', React.createElement('span', null, 'AI')),
      React.createElement('ul', { className: 'nav-links' },
        React.createElement('li', null, React.createElement('a', { href: '#niches' }, t.nav.customers)),
        React.createElement('li', { className: 'nav-sep' }),
        React.createElement('li', null, React.createElement('a', { href: '#services' }, t.nav.services)),
        React.createElement('li', { className: 'nav-sep' }),
        React.createElement('li', null, React.createElement('a', { href: '#how-it-works' }, t.nav.process)),
        React.createElement('li', { className: 'nav-sep' }),
        React.createElement('li', null, React.createElement('a', { href: '#demos' }, t.nav.demos)),
        React.createElement('li', { className: 'nav-sep' }),
        React.createElement('li', null, React.createElement('a', { href: 'pages/roi-calculator.html' }, t.nav.roi)),
        React.createElement('li', { className: 'nav-sep' }),
        React.createElement('li', null, React.createElement('a', { href: '#contact' }, t.nav.contact)),
        React.createElement('li', null, React.createElement('a', { href: 'https://calendar.app.google/rGYs2vWTLEjAHHeE9', target: '_blank', rel: 'noopener', className: 'nav-cta' }, t.nav.cta)),
        React.createElement('li', null,
          React.createElement('button', { className: 'lang-toggle', onClick: cycleLang },
            langLabels[lang]
          )
        )
      ),
      React.createElement('div', { className: 'nav-right-mobile' },
        React.createElement('button', { className: 'lang-toggle', onClick: cycleLang }, langLabels[lang]),
        React.createElement('button', { className: 'menu-btn', onClick: function () { setMenuOpen(!menuOpen); } },
          menuOpen ? React.createElement(IconClose, null) : React.createElement(IconMenu, null)
        )
      )
    ),
    menuOpen && React.createElement('div', { className: 'mobile-menu' },
      React.createElement('ul', null,
        React.createElement('li', null, React.createElement('a', { href: '#niches', onClick: function () { setMenuOpen(false); } }, t.nav.customers)),
        React.createElement('li', null, React.createElement('a', { href: '#services', onClick: function () { setMenuOpen(false); } }, t.nav.services)),
        React.createElement('li', null, React.createElement('a', { href: '#how-it-works', onClick: function () { setMenuOpen(false); } }, t.nav.process)),
        React.createElement('li', null, React.createElement('a', { href: '#demos', onClick: function () { setMenuOpen(false); } }, t.nav.demos)),
        React.createElement('li', null, React.createElement('a', { href: 'pages/roi-calculator.html', onClick: function () { setMenuOpen(false); } }, t.nav.roi)),
        React.createElement('li', null, React.createElement('a', { href: '#contact', onClick: function () { setMenuOpen(false); } }, t.nav.contact)),
        React.createElement('li', null, React.createElement('a', { href: 'https://calendar.app.google/rGYs2vWTLEjAHHeE9', target: '_blank', rel: 'noopener', onClick: function () { setMenuOpen(false); } }, t.nav.cta))
      )
    )
  );
}

/* ═══ HERO ════════════════════════════════════════════ */
function Hero(props) {
  var t = props.t;
  return React.createElement('section', { className: 'hero' },
    React.createElement('div', { className: 'hero-inner' },
      React.createElement(FadeIn, null,
        React.createElement('h1', { className: 'hero-h1' },
          t.hero.line1,
          React.createElement('br', null),
          React.createElement('em', null, t.hero.accent)
        )
      ),
      React.createElement(FadeIn, { delay: 120 },
        React.createElement('p', { className: 'hero-sub' }, t.hero.sub)
      ),
    )
  );
}

/* ═══ STATS BAR ═══════════════════════════════════════ */
function StatsBar(props) {
  var t = props.t;
  return React.createElement('div', { className: 'stats-bar' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'stats-inner' },
        t.stats.map(function (s, i) {
          return React.createElement(React.Fragment, { key: i },
            i > 0 && React.createElement('div', { className: 'stat-divider' }),
            React.createElement('div', { className: 'stat-item' },
              React.createElement('span', { className: 'stat-num' }, s.num),
              React.createElement('span', { className: 'stat-label' }, s.label)
            )
          );
        })
      )
    )
  );
}

/* ═══ ANIMATED CARD VISUALS ═══════════════════════════ */
function StrategyVisual() {
  // Animated network with scanning beam and data pulses
  var nodes = [
    { cx: 50, cy: 30 }, { cx: 20, cy: 55 }, { cx: 80, cy: 55 },
    { cx: 35, cy: 80 }, { cx: 65, cy: 80 }, { cx: 50, cy: 55 },
  ];
  var lines = [
    [0,5],[1,5],[2,5],[5,3],[5,4],[0,1],[0,2],[3,4],[1,3],[2,4]
  ];
  return React.createElement('div', { className: 'card-visual' },
    React.createElement('svg', { viewBox: '0 0 100 100', className: 'card-svg strategy-svg' },
      // Scanning beam
      React.createElement('line', { x1: 0, y1: 0, x2: 100, y2: 100, className: 'scan-beam' }),
      // Connection lines with draw animation
      lines.map(function(l, i) {
        return React.createElement('line', {
          key: 'l'+i, x1: nodes[l[0]].cx, y1: nodes[l[0]].cy,
          x2: nodes[l[1]].cx, y2: nodes[l[1]].cy,
          className: 'net-line', style: { animationDelay: (i * 0.15) + 's' }
        });
      }),
      // Pulse rings radiating from center
      React.createElement('circle', { cx: 50, cy: 55, r: 8, className: 'pulse-ring pr1' }),
      React.createElement('circle', { cx: 50, cy: 55, r: 8, className: 'pulse-ring pr2' }),
      React.createElement('circle', { cx: 50, cy: 55, r: 8, className: 'pulse-ring pr3' }),
      // Data traveling along lines
      React.createElement('circle', { cx: 50, cy: 30, r: 1.5, className: 'data-dot dd1' }),
      React.createElement('circle', { cx: 20, cy: 55, r: 1.5, className: 'data-dot dd2' }),
      React.createElement('circle', { cx: 80, cy: 55, r: 1.5, className: 'data-dot dd3' }),
      // Nodes
      nodes.map(function(n, i) {
        return React.createElement('circle', {
          key: 'n'+i, cx: n.cx, cy: n.cy, r: i === 5 ? 5 : 3,
          className: 'net-node' + (i === 5 ? ' net-core' : ''),
          style: { animationDelay: (i * 0.2) + 's' }
        });
      }),
      // Center ring
      React.createElement('circle', { cx: 50, cy: 55, r: 14, className: 'net-ring' })
    )
  );
}

function AutomationVisual() {
  // Animated data flow pipeline
  var stages = [
    { x: 12, label: 'IN' },
    { x: 35, label: '' },
    { x: 58, label: '' },
    { x: 82, label: 'OUT' },
  ];
  return React.createElement('div', { className: 'card-visual' },
    React.createElement('svg', { viewBox: '0 0 100 70', className: 'card-svg automation-svg' },
      // Flow lines
      React.createElement('line', { x1: 20, y1: 35, x2: 80, y2: 35, className: 'flow-track' }),
      // Animated particles
      React.createElement('circle', { cx: 0, cy: 35, r: 2, className: 'flow-particle p1' }),
      React.createElement('circle', { cx: 0, cy: 35, r: 2, className: 'flow-particle p2' }),
      React.createElement('circle', { cx: 0, cy: 35, r: 1.5, className: 'flow-particle p3' }),
      // Stage nodes
      stages.map(function(s, i) {
        return React.createElement('g', { key: i },
          React.createElement('rect', {
            x: s.x - 7, y: 28, width: 14, height: 14, rx: 3,
            className: 'flow-node', style: { animationDelay: (i * 0.3) + 's' }
          }),
          s.label && React.createElement('text', {
            x: s.x, y: 36, className: 'flow-label', textAnchor: 'middle', dominantBaseline: 'middle'
          }, s.label)
        );
      }),
      // Branching outputs
      React.createElement('line', { x1: 82, y1: 35, x2: 92, y2: 25, className: 'flow-branch' }),
      React.createElement('line', { x1: 82, y1: 35, x2: 92, y2: 45, className: 'flow-branch' }),
      React.createElement('circle', { cx: 92, cy: 25, r: 2.5, className: 'flow-end e1' }),
      React.createElement('circle', { cx: 92, cy: 45, r: 2.5, className: 'flow-end e2' })
    )
  );
}

function VoiceVisual() {
  return React.createElement('div', { className: 'card-visual' },
    React.createElement('svg', { viewBox: '0 0 100 100', className: 'card-svg voice-svg' },
      React.createElement('path', { d: 'M36 38 Q27 50 36 62', className: 'voice-wave vw-l1' }),
      React.createElement('path', { d: 'M27 30 Q14 50 27 70', className: 'voice-wave vw-l2' }),
      React.createElement('path', { d: 'M64 38 Q73 50 64 62', className: 'voice-wave vw-r1' }),
      React.createElement('path', { d: 'M73 30 Q86 50 73 70', className: 'voice-wave vw-r2' }),
      React.createElement('rect', { x: 42, y: 18, width: 16, height: 32, rx: 8, className: 'voice-mic-body' }),
      React.createElement('path', { d: 'M34 50 Q34 70 50 70 Q66 70 66 50', className: 'voice-mic-arc' }),
      React.createElement('line', { x1: 50, y1: 70, x2: 50, y2: 80, className: 'voice-mic-stand' }),
      React.createElement('line', { x1: 40, y1: 80, x2: 60, y2: 80, className: 'voice-mic-stand' }),
      React.createElement('circle', { cx: 50, cy: 34, r: 3.5, className: 'voice-rec-dot' })
    )
  );
}

/* ═══ SERVICE CARD ════════════════════════════════════ */
function ServiceCard(props) {
  var card = props.card; var variant = props.variant;
  var isVoice = variant === 'voice';
  var isAuto  = variant === 'automation';

  var visual   = isVoice ? React.createElement(VoiceVisual)
               : isAuto  ? React.createElement(AutomationVisual)
               : React.createElement(StrategyVisual);
  var icon     = isVoice ? React.createElement(IconVoice, { size: 18 })
               : isAuto  ? React.createElement(IconAutomation, { size: 18 })
               : React.createElement(IconStrategy, { size: 18 });
  var cls      = 'service-card' + (isAuto ? ' service-card-alt' : '');
  var iconCls  = 'card-cat-icon' + (isAuto ? ' cat-icon-alt' : '');

  return React.createElement('div', { className: cls },
    visual,
    React.createElement('div', { className: 'service-card-body' },
      React.createElement('div', { className: 'card-category' },
        React.createElement('span', { className: iconCls }, icon),
        React.createElement('span', { className: 'card-cat-label' }, card.label)
      ),
      React.createElement('h3', { className: 'card-title' }, card.title),
      React.createElement('p', { className: 'card-desc' }, card.desc),
      card.roiLink
        ? React.createElement('a', { className: 'card-roi-link', href: card.roiLink.href }, card.roiLink.label)
        : null
    )
  );
}

/* ═══ SERVICES SECTION ════════════════════════════════ */
function Services(props) {
  var t = props.t;
  return React.createElement('section', { id: 'services', className: 'services-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'section-header' },
        React.createElement('span', { className: 'section-label' }, t.services.label),
        React.createElement('h2', { className: 'section-title' }, t.services.title)
      )
    ),
    React.createElement('div', { className: 'service-cards' },
      React.createElement(FadeIn, { className: 'service-wrap' },
        React.createElement(ServiceCard, { card: t.card3, variant: 'voice' })
      ),
      React.createElement(FadeIn, { className: 'service-wrap' },
        React.createElement(ServiceCard, { card: t.card2, variant: 'automation' })
      ),
      React.createElement(FadeIn, { className: 'service-wrap' },
        React.createElement(ServiceCard, { card: t.card1, variant: 'custom' })
      )
    )
  );
}

/* ═══ STEP ANIMATED VISUALS ═══════════════════════════ */
function StepVisual1() {
  // Calendar booking animation
  return React.createElement('div', { className: 'step-visual' },
    React.createElement('svg', { viewBox: '0 0 160 120', className: 'step-anim-svg' },
      // Calendar
      React.createElement('rect', { x: 30, y: 20, width: 100, height: 80, rx: 8, className: 'sv-calendar' }),
      React.createElement('rect', { x: 30, y: 20, width: 100, height: 22, rx: '8 8 0 0', className: 'sv-cal-header' }),
      React.createElement('circle', { cx: 50, cy: 31, r: 3, fill: '#fff', opacity: 0.5 }),
      React.createElement('circle', { cx: 80, cy: 31, r: 3, fill: '#fff', opacity: 0.5 }),
      React.createElement('circle', { cx: 110, cy: 31, r: 3, fill: '#fff', opacity: 0.5 }),
      // Calendar days
      [0,1,2,3,4].map(function(row) {
        return [0,1,2,3,4].map(function(col) {
          var x = 42 + col * 18;
          var y = 52 + row * 10;
          var isHighlight = row === 1 && col === 2;
          return React.createElement('rect', {
            key: row+'-'+col, x: x, y: y, width: 10, height: 6, rx: 1.5,
            className: isHighlight ? 'sv-day-active' : 'sv-day',
            style: { animationDelay: (row * 5 + col) * 0.05 + 's' }
          });
        });
      }),
      // Check mark appearing
      React.createElement('circle', { cx: 120, cy: 85, r: 12, className: 'sv-check-circle' }),
      React.createElement('path', { d: 'M114 85l4 4 8-8', className: 'sv-check-mark' })
    )
  );
}

function StepVisual2() {
  // Strategy document being built
  return React.createElement('div', { className: 'step-visual' },
    React.createElement('svg', { viewBox: '0 0 160 120', className: 'step-anim-svg' },
      // Document
      React.createElement('rect', { x: 35, y: 10, width: 90, height: 100, rx: 6, className: 'sv-doc' }),
      React.createElement('path', { d: 'M95 10v20h20', className: 'sv-doc-fold' }),
      // Lines appearing one by one
      React.createElement('rect', { x: 50, y: 40, width: 55, height: 4, rx: 2, className: 'sv-line l1' }),
      React.createElement('rect', { x: 50, y: 50, width: 45, height: 4, rx: 2, className: 'sv-line l2' }),
      React.createElement('rect', { x: 50, y: 60, width: 50, height: 4, rx: 2, className: 'sv-line l3' }),
      // Chart
      React.createElement('rect', { x: 50, y: 72, width: 12, height: 20, rx: 2, className: 'sv-bar b1' }),
      React.createElement('rect', { x: 66, y: 64, width: 12, height: 28, rx: 2, className: 'sv-bar b2' }),
      React.createElement('rect', { x: 82, y: 56, width: 12, height: 36, rx: 2, className: 'sv-bar b3' }),
      // Arrow up
      React.createElement('path', { d: 'M100 82l6-14', className: 'sv-arrow' }),
      React.createElement('path', { d: 'M103 68l3 0 0 3', className: 'sv-arrow-head' })
    )
  );
}

function StepVisual3() {
  // Growth / launch animation
  return React.createElement('div', { className: 'step-visual' },
    React.createElement('svg', { viewBox: '0 0 160 120', className: 'step-anim-svg' },
      // Growth line
      React.createElement('path', { d: 'M20 95 Q50 90 70 70 Q90 50 110 30 Q120 20 140 10', className: 'sv-growth-line' }),
      // Glow dots along path
      React.createElement('circle', { cx: 40, cy: 91, r: 4, className: 'sv-glow-dot g1' }),
      React.createElement('circle', { cx: 70, cy: 70, r: 4, className: 'sv-glow-dot g2' }),
      React.createElement('circle', { cx: 100, cy: 40, r: 5, className: 'sv-glow-dot g3' }),
      React.createElement('circle', { cx: 135, cy: 13, r: 6, className: 'sv-glow-dot g4' }),
      // Rocket at the top
      React.createElement('g', { className: 'sv-rocket' },
        React.createElement('path', { d: 'M135 8l-4 10h8z', fill: 'var(--accent)', opacity: 0.9 }),
        React.createElement('circle', { cx: 135, cy: 6, r: 3, className: 'sv-rocket-head' })
      ),
      // Baseline
      React.createElement('line', { x1: 15, y1: 100, x2: 145, y2: 100, className: 'sv-baseline' })
    )
  );
}

var STEP_VISUALS = [StepVisual1, StepVisual2, StepVisual3];

/* ═══ HOW IT WORKS (Horizontal Timeline) ═════════════ */
function HowItWorks(props) {
  var t = props.t;

  return React.createElement('section', { id: 'how-it-works', className: 'how-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'section-header' },
        React.createElement('span', { className: 'section-label' }, t.how.label),
        React.createElement('h2', { className: 'section-title' }, t.how.title),
        React.createElement('p', { className: 'section-sub' }, t.how.sub)
      )
    ),
    /* Horizontal timeline — all steps visible */
    React.createElement('div', { className: 'htl' },
      React.createElement('div', { className: 'htl-track' },
        React.createElement('div', { className: 'htl-track-fill', style: { width: '100%' } })
      ),
      React.createElement('div', { className: 'htl-steps' },
        t.how.steps.map(function (step, i) {
          var Visual = STEP_VISUALS[i];
          return React.createElement('div', { key: i, className: 'htl-step active' },
            React.createElement('div', { className: 'htl-node active' },
              React.createElement('div', { className: 'htl-node-inner' },
                React.createElement('div', { className: 'htl-visual' }, React.createElement(Visual, null))
              )
            ),
            React.createElement('div', { className: 'htl-text' },
              React.createElement('h3', { className: 'htl-title' }, step.title),
              React.createElement('p', { className: 'htl-desc' }, step.desc)
            )
          );
        })
      )
    ),
    /* CTA below */
    React.createElement('div', { className: 'process-bottom-cta' },
      React.createElement('a', {
        href: 'https://calendar.app.google/rGYs2vWTLEjAHHeE9',
        target: '_blank', rel: 'noopener',
        className: 'btn btn-dark'
      }, t.how.stepCta || 'Book a call')
    )
  );
}

/* ═══ CLIENT DEMOS ════════════════════════════════════ */
function StarRating({ count }) {
  return React.createElement('div', { className: 'demo-stars' },
    Array.from({ length: count }).map(function(_, i) {
      return React.createElement('span', { key: i, className: 'demo-star' }, '★');
    }),
    React.createElement('span', { className: 'demo-rating-num' }, count + '.0')
  );
}

var LANG_FLAGS = { no: '🇳🇴', en: '🇬🇧', es: '🇪🇸', fr: '🇫🇷', de: '🇩🇪', it: '🇮🇹', pt: '🇵🇹', nl: '🇳🇱', sv: '🇸🇪', da: '🇩🇰' };
var LANG_NAMES = { no: 'Norwegian', en: 'English', es: 'Spanish', fr: 'French', de: 'German', it: 'Italian', pt: 'Portuguese', nl: 'Dutch', sv: 'Swedish', da: 'Danish' };

function DemoCard({ demo, lang }) {
  var type = demo.type[lang] || demo.type.en;
  var agentLang = demo.languages.indexOf(lang) !== -1 ? lang : demo.defaultLang;
  var quote = typeof demo.quote === 'object' ? (demo.quote[lang] || demo.quote.en || demo.quote[demo.defaultLang]) : demo.quote;

  return React.createElement('div', { className: 'demo-card' },

    React.createElement('div', { className: 'demo-body' },
      React.createElement('div', { className: 'demo-name-row' },
        React.createElement('h3', { className: 'demo-client-name' }, demo.name),
        React.createElement(StarRating, { count: demo.rating })
      ),
      React.createElement('div', { className: 'demo-meta' },
        React.createElement('span', { className: 'demo-type-badge' }, type),
        React.createElement('span', { className: 'demo-location' }, demo.location)
      ),
      React.createElement('blockquote', { className: 'demo-quote' },
        React.createElement('p', null, '”', quote, '”')
      )
    ),

    React.createElement('div', { className: 'demo-footer' },
      React.createElement('div', { className: 'demo-lang-badges' },
        demo.languages.map(function(l) {
          var isActive = l === demo.defaultLang;
          return React.createElement('span', {
            key: l,
            className: 'demo-lang-badge' + (isActive ? ' active' : ''),
            title: LANG_NAMES[l] || l.toUpperCase()
          },
            React.createElement('span', { className: 'demo-lang-flag' }, LANG_FLAGS[l] || ''),
            React.createElement('span', { className: 'demo-lang-name' }, LANG_NAMES[l] || l.toUpperCase())
          );
        })
      )
    ),

    React.createElement('div', { className: 'demo-embed' },
      React.createElement('elevenlabs-convai', { 'agent-id': demo.agentId, 'language': agentLang })
    )
  );
}

function ClientDemos({ t, lang }) {
  var demos = window.DEMOS || [];
  if (!demos.length) return null;
  return React.createElement('section', { id: 'demos', className: 'demos-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'section-header' },
        React.createElement('span', { className: 'section-label' }, t.demos.label),
        React.createElement('h2', { className: 'section-title' }, t.demos.title),
        React.createElement('p', { className: 'section-sub' }, t.demos.sub)
      )
    ),
    React.createElement('div', { className: 'demos-grid' },
      demos.map(function(demo) {
        return React.createElement(FadeIn, { key: demo.slug },
          React.createElement(DemoCard, { demo: demo, lang: lang })
        );
      })
    )
  );
}

/* ═══ CTA SECTION ═════════════════════════════════════ */
function CTASection(props) {
  var t = props.t;
  return React.createElement('section', { id: 'cta', className: 'cta-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'cta-inner' },
        React.createElement('h2', { className: 'cta-title' }, t.cta.title),
        React.createElement('p', { className: 'cta-sub' }, t.cta.sub),
        React.createElement('a', { href: 'https://calendar.app.google/rGYs2vWTLEjAHHeE9', target: '_blank', rel: 'noopener', className: 'btn cta-btn' }, t.cta.btn)
      )
    )
  );
}

/* ═══ FAQ ══════════════════════════════════════════════ */
function FAQItem(props) {
  var _s = React.useState(false); var open = _s[0]; var setOpen = _s[1];
  return React.createElement('div', { className: 'faq-item' + (open ? ' open' : '') },
    React.createElement('button', { className: 'faq-q', onClick: function () { setOpen(!open); } },
      props.q,
      React.createElement('span', { className: 'faq-icon' }, '+')
    ),
    React.createElement('div', { className: 'faq-a' },
      React.createElement('p', null, props.a)
    )
  );
}

function FAQ(props) {
  var t = props.t;
  return React.createElement('section', { id: 'faq', className: 'faq-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'section-header' },
        React.createElement('span', { className: 'section-label' }, t.faq.label),
        React.createElement('h2', { className: 'section-title' }, t.faq.title)
      )
    ),
    React.createElement(FadeIn, { delay: 100 },
      React.createElement('div', { className: 'faq-list' },
        t.faq.items.map(function (item, i) {
          return React.createElement(FAQItem, { key: i, q: item.q, a: item.a });
        })
      )
    )
  );
}

/* ═══ FOOTER / CONTACT ════════════════════════════════ */
function Footer(props) {
  var t = props.t;
  return React.createElement('footer', { id: 'contact', className: 'site-footer' },
    React.createElement('div', { className: 'footer-inner' },
      /* Left: brand */
      React.createElement('div', { className: 'footer-col footer-brand' },
        React.createElement('a', { className: 'footer-logo', href: '#' }, 'Flyt', React.createElement('span', null, 'AI')),
        React.createElement('p', { className: 'footer-tagline' }, t.footer.contactSub)
      ),
      /* Right: contact + location side by side */
      React.createElement('div', { className: 'footer-right' },
        /* Contact means */
        React.createElement('div', { className: 'footer-group' },
          React.createElement('h3', { className: 'footer-heading' }, t.footer.contactTitle),
          React.createElement('div', { className: 'footer-links' },
            React.createElement('a', { href: 'mailto:ap@flytaity.com', className: 'footer-link' },
              React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
                React.createElement('rect', { x: '2', y: '4', width: '20', height: '16', rx: '2' }),
                React.createElement('path', { d: 'M22 4l-10 8L2 4' })
              ),
              t.footer.email
            ),
            React.createElement('a', { href: 'https://wa.me/4746259607', target: '_blank', rel: 'noopener', className: 'footer-link' },
              React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'currentColor' },
                React.createElement('path', { d: 'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z' })
              ),
              t.footer.whatsapp
            ),
            React.createElement('a', { href: 'tel:+4746259607', className: 'footer-link' },
              React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
                React.createElement('path', { d: 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.01 2.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z' })
              ),
              t.footer.phone
            )
          )
        ),
        /* Divider */
        React.createElement('div', { className: 'footer-divider' }),
        /* Location */
        React.createElement('div', { className: 'footer-group' },
          React.createElement('h3', { className: 'footer-heading' }, t.footer.locationLabel || 'Location'),
          React.createElement('div', { className: 'footer-links' },
            React.createElement('span', { className: 'footer-link footer-location' },
              React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' },
                React.createElement('path', { d: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z' }),
                React.createElement('circle', { cx: '12', cy: '10', r: '3' })
              ),
              t.footer.location
            )
          )
        )
      )
    ),
    React.createElement('div', { className: 'footer-bottom' },
      React.createElement('p', { className: 'footer-copy' }, t.footer.copy)
    )
  );
}

/* ═══ WHO WE WORK WITH ════════════════════════════════ */
var NICHE_ICONS = {
  wellness: React.createElement('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.75', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' })
  ),
  car: React.createElement('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.75', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' })
  ),
  retail: React.createElement('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.75', strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z' }),
    React.createElement('line', { x1: '3', y1: '6', x2: '21', y2: '6' }),
    React.createElement('path', { d: 'M16 10a4 4 0 0 1-8 0' })
  ),
};

function NicheCard({ item }) {
  return React.createElement('div', { className: 'niche-card' },
    React.createElement('div', { className: 'niche-icon' }, NICHE_ICONS[item.icon]),
    React.createElement('h3', { className: 'niche-name' }, item.name),
    React.createElement('p', { className: 'niche-desc' }, item.desc),
    React.createElement('ul', { className: 'niche-bullets' },
      item.bullets.map(function(b, i) {
        return React.createElement('li', { key: i }, b);
      })
    )
  );
}

function WhoWeWorkWith({ t }) {
  var n = t.niches;
  return React.createElement('section', { id: 'niches', className: 'niches-section' },
    React.createElement(FadeIn, null,
      React.createElement('div', { className: 'section-header' },
        React.createElement('span', { className: 'section-label' }, n.label),
        React.createElement('h2', { className: 'section-title' }, n.title)
      )
    ),
    React.createElement('div', { className: 'niches-grid' },
      n.items.map(function(item) {
        return React.createElement(FadeIn, { key: item.icon },
          React.createElement(NicheCard, { item: item })
        );
      })
    )
  );
}

/* ═══ EXPORTS ═════════════════════════════════════════ */
Object.assign(window, {
  IconCheck, IconStrategy, IconAutomation, IconVoice, IconTarget, IconChart, IconShield,
  FadeIn, Nav, Hero, StatsBar, WhoWeWorkWith, Services, ClientDemos, HowItWorks, FAQ, CTASection, Footer
});