/* components.jsx — Shared chrome (dark, with language toggle) */

const { useState, useEffect, useRef } = React;

/* ─────────────────────── Icons ───────────────────── */

function DcIcon({ name, size = 18, strokeWidth = 1.5, style }) {
  const paths = {
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    user: <><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></>,
    menu: <><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></>,
    x: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrowLeft: <path d="M19 12H5M11 18l-6-6 6-6"/>,
    arrowRight: <path d="M5 12h14M13 6l6 6-6 6"/>,
    chevronRight: <path d="m9 6 6 6-6 6"/>,
    chevronDown: <path d="m6 9 6 6 6-6"/>,
    chevronLeft: <path d="m15 6-6 6 6 6"/>,
    play: <path d="M6 4l16 8-16 8V4z"/>,
    server: <><rect x="2" y="2" width="20" height="8" rx="0"/><rect x="2" y="14" width="20" height="8" rx="0"/><path d="M6 6h.01"/><path d="M6 18h.01"/></>,
    cpu: <><rect x="4" y="4" width="16" height="16" rx="0"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></>,
    layers: <><path d="m12 2 9 5-9 5-9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>,
    film: <><rect x="2" y="2" width="20" height="20" rx="0"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 7h5M17 17h5"/></>,
    sparkles: <><path d="M9 3 11 9l6 2-6 2-2 6-2-6-6-2 6-2z"/><path d="M19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1z"/></>,
    box: <><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></>,
    map: <><path d="M9 3 3 6v15l6-3 6 3 6-3V3l-6 3z"/><path d="M9 3v15M15 6v15"/></>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="0"/><path d="m22 6-10 7L2 6"/></>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="0"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    check: <path d="m5 12 5 5L20 7"/>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></>,
    eye: <><path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    zap: <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>,
    pause: <><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,
  };
  return (
    <svg className="lucide" width={size} height={size} viewBox="0 0 24 24"
         fill="none" stroke="currentColor" strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || null}
    </svg>
  );
}

/* ─────────────────────── Buttons ───────────────────── */

function DcBtn({ children, variant = 'primary', onClick, type = 'button', disabled, style }) {
  const cls = {
    primary: 'dc-btn dc-btn-primary',
    secondary: 'dc-btn dc-btn-secondary',
    onDark: 'dc-btn dc-btn-on-dark',
  }[variant];
  return (
    <button type={type} className={cls} onClick={onClick} disabled={disabled} style={style}>
      {children}
    </button>
  );
}

function DcTextLink({ children, onClick, style }) {
  return (
    <button className="dc-text-link" onClick={onClick} style={style}>
      {children}
      <DcIcon name="arrowRight" size={14} />
    </button>
  );
}

/* ─────────────────────── Photo (real image) ───────────────────── */

function DcPhoto({ src, caption, tag, tagAccent, aspectRatio = '16/10', style, children }) {
  const isVideo = typeof src === 'string' && /\.(mp4|webm|mov)$/i.test(src);
  return (
    <div className="dc-photo" style={{ aspectRatio, ...style }}>
      {isVideo ? (
        <video
          className="dc-photo-img"
          src={window.RES(src)}
          autoPlay muted loop playsInline
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      ) : (
        <div className="dc-photo-img"
             style={{ backgroundImage: src ? `url("${window.RES(src)}")` : 'none' }} />
      )}
      {tag && <span className={'dc-photo-tag' + (tagAccent ? ' accent' : '')}>{tag}</span>}
      {caption && <span className="dc-photo-caption">{caption}</span>}
      {children}
    </div>
  );
}

/* ─────────────────────── NAV ───────────────────── */

const NAV_ITEMS = [
  { id: 'home',      key: 'home' },
  { id: 'portfolio', key: 'portfolio' },
  { id: 'services',  key: 'services' },
  { id: 'about',     key: 'about' },
  { id: 'contact',   key: 'contact' },
];

function DcNav({ currentPage, onNavigate }) {
  const [scrolled, setScrolled] = useState(false);
  const { t, lang, setLang } = useLang();

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

  // when on home and not scrolled, nav is transparent over hero
  const heroMode = currentPage === 'home' && !scrolled;

  return (
    <nav className={'dc-nav' + (scrolled ? ' scrolled' : '')}>
      <div className="dc-nav-logo" onClick={() => onNavigate('home')}>
        <div className="dc-nav-logo-mark">
          <img src={window.RES('assets/logo-jmc.png')} alt="JMC Realities" />
        </div>
      </div>

      <div className="dc-nav-menu">
        {NAV_ITEMS.map(item => (
          <button
            key={item.id}
            className={'dc-nav-link' + (currentPage === item.id ? ' active' : '')}
            onClick={() => onNavigate(item.id)}
          >
            {t.nav[item.key]}
          </button>
        ))}
      </div>

      <div className="dc-nav-right">
        <div className="dc-lang">
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
        </div>
        <button className="dc-nav-cta" onClick={() => onNavigate('contact')}>
          {t.nav.cta}
        </button>
      </div>
    </nav>
  );
}

/* ─────────────────────── FOOTER ───────────────────── */

function DcFooter({ onNavigate }) {
  const { t } = useLang();
  const cols = [
    { h: t.footer.columns.capabilities, links: [['Cinematic Visualization', 'services'], ['Real-Time Walkthroughs', 'services'], ['AI Workflows', 'services'], ['Pre-Visualization', 'services']] },
    { h: t.footer.columns.portfolio, links: [['QTS Hyperscale', 'portfolio'], ['Pampa Energía', 'portfolio'], ['All projects', 'portfolio']] },
    { h: t.footer.columns.studio, links: [[t.nav.about, 'about'], ['Process', 'about'], ['Team', 'about']] },
    { h: t.footer.columns.contact, links: [[t.nav.cta, 'contact'], ['contact@jmcrealities.com', 'contact'], ['+54 (911) 2646 4578', 'contact']] },
  ];

  return (
    <footer className="dc-footer">
      <div className="dc-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 32 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="dc-nav-logo">
              <div className="dc-nav-logo-mark" style={{ height: 64 }}>
                <img src={window.RES('assets/logo-jmc.png')} alt="JMC Realities" />
              </div>
              <div className="dc-nav-logo-text" style={{ fontSize: 11 }}>{t.nav.tagline}</div>
            </div>
            <p style={{ fontSize: 13, fontWeight: 300, lineHeight: 1.65,
                        color: 'var(--muted)', margin: 0, maxWidth: 320 }}>
              {t.footer.tagline}
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 8 }}>
              {['LinkedIn', 'Vimeo', 'Behance', 'Instagram'].map(s => (
                <a key={s} style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px',
                                    textTransform: 'uppercase', color: 'var(--muted)',
                                    cursor: 'pointer' }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <h6 style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px',
                           textTransform: 'uppercase', color: 'var(--ink)', margin: 0 }}>{c.h}</h6>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0,
                           display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map(([label, page]) => (
                  <li key={label}>
                    <a onClick={() => onNavigate(page)}
                       style={{ fontSize: 13, fontWeight: 300, color: 'var(--body)',
                                cursor: 'pointer' }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="dc-stripe" style={{ marginTop: 56 }} />
        <div style={{ marginTop: 24,
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      fontSize: 11, fontWeight: 400, color: 'var(--muted)', letterSpacing: '0.3px',
                      flexWrap: 'wrap', gap: 16 }}>
          <span>{t.footer.bottom}</span>
          <span style={{ display: 'flex', gap: 28 }}>
            <a style={{ cursor: 'pointer' }}>{t.footer.privacy}</a>
            <a style={{ cursor: 'pointer' }}>{t.footer.terms}</a>
            <a style={{ cursor: 'pointer' }}>{t.footer.cookies}</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────────────────── Spec Row ───────────────────── */

function DcSpecRow({ specs }) {
  return (
    <section style={{ padding: '64px 0', background: 'var(--surface-soft)',
                       borderTop: '1px solid var(--hairline)',
                       borderBottom: '1px solid var(--hairline)' }}>
      <div className="dc-container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${specs.length}, 1fr)`,
        }}>
          {specs.map((s, i) => (
            <div key={s.label} style={{
              padding: '8px 24px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ fontSize: 44, fontWeight: 700, lineHeight: 1, color: 'var(--ink)',
                            fontVariantNumeric: 'tabular-nums', letterSpacing: '-1px' }}>{s.value}</div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                            textTransform: 'uppercase', color: 'var(--muted)' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── CTA Band ───────────────────── */

function DcCTABand({ eyebrow, title, body, primaryLabel, secondaryLabel, onPrimary, onSecondary, image }) {
  return (
    <section style={{ position: 'relative', padding: 'var(--density-section) 32px',
                       color: 'var(--ink)', overflow: 'hidden',
                       background: 'var(--surface-dark)' }}>
      {image && (
        <>
          <div style={{ position: 'absolute', inset: 0,
                        backgroundImage: `url("${window.RES(image)}")`,
                        backgroundSize: 'cover', backgroundPosition: 'center',
                        opacity: 0.4 }} />
          <div style={{ position: 'absolute', inset: 0,
                        background: 'linear-gradient(to right, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.75) 50%, rgba(5,5,5,0.85) 100%)' }} />
        </>
      )}
      <div className="dc-container" style={{ position: 'relative', textAlign: 'center',
                                              display: 'flex',
                                              flexDirection: 'column', gap: 24,
                                              alignItems: 'center', maxWidth: 820, margin: '0 auto' }}>
        {eyebrow && <div className="dc-eyebrow">{eyebrow}</div>}
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 700, lineHeight: 1.05,
                     color: 'var(--ink)', margin: 0, letterSpacing: '-0.5px' }}>{title}</h2>
        {body && <p style={{ fontSize: 18, fontWeight: 300, lineHeight: 1.6,
                              color: 'var(--on-dark-soft)', margin: 0,
                              maxWidth: 600 }}>{body}</p>}
        <div style={{ marginTop: 16, display: 'flex', gap: 14, flexWrap: 'wrap',
                      justifyContent: 'center' }}>
          {primaryLabel && (
            <button className="dc-btn dc-btn-primary" onClick={onPrimary}>{primaryLabel}</button>
          )}
          {secondaryLabel && (
            <button className="dc-btn dc-btn-on-dark" onClick={onSecondary}>{secondaryLabel}</button>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── Section Header ───────────────────── */

function DcSectionHeader({ eyebrow, title, rightSlot, maxWidth }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between',
      alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: maxWidth || 760 }}>
        {eyebrow && <div className="dc-eyebrow">{eyebrow}</div>}
        <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 700, lineHeight: 1.05,
                     color: 'var(--ink)', margin: 0, letterSpacing: '-0.5px' }}>
          {title}
        </h2>
      </div>
      {rightSlot}
    </div>
  );
}

/* ─────────────────────── Marquee ───────────────────── */

function DcMarquee({ items }) {
  // Duplicate items so we can loop without seams
  const doubled = [...items, ...items];
  return (
    <div className="dc-marquee">
      <div className="dc-marquee-track">
        {doubled.map((item, i) => (
          <span key={i} className="dc-marquee-item">
            <span className="dot" />
            {item}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ─────────────────────── Reveal on scroll ───────────────────── */

function DcReveal({ children, delay = 0 }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setTimeout(() => setVisible(true), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [delay]);
  return (
    <div ref={ref} className={'dc-reveal' + (visible ? ' visible' : '')}>
      {children}
    </div>
  );
}

/* expose */
Object.assign(window, {
  DcIcon, DcBtn, DcTextLink, DcPhoto, DcNav, DcFooter,
  DcSpecRow, DcCTABand, DcSectionHeader, DcMarquee, DcReveal, NAV_ITEMS,
});