// Shared components for CBAMy landing variants
const { useState, useEffect, useRef, useMemo } = React;

// ─── Wordmark ────────────────────────────────────────────────────────────────
function CBGlyph({ size = 22, color = 'var(--accent)', bg = 'transparent' }) {
  // Stacked bars descending — like CBAM cost amortizing over time / certificates
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>
      <rect x="0" y="0" width="24" height="24" rx="5" fill={bg} />
      <g fill={color}>
        <rect x="4" y="6" width="3" height="12" rx="1" />
        <rect x="9" y="9" width="3" height="9" rx="1" opacity="0.78" />
        <rect x="14" y="12" width="3" height="6" rx="1" opacity="0.55" />
        <rect x="19" y="15" width="1.5" height="3" rx="0.75" opacity="0.4" />
      </g>
    </svg>);

}

function Wordmark({ size = 20, color, mono = false }) {
  const ink = color || (mono ? '#0f172a' : 'var(--ink)');
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: 'var(--font-sans)', fontWeight: 600,
      fontSize: size, letterSpacing: '-0.025em', color: ink
    }}>
      <CBGlyph size={size * 1.1} color={mono ? '#0f172a' : 'var(--accent)'} />
      <span>CBAM<span style={{ color: 'var(--accent)' }}>y</span></span>
    </div>);

}

// ─── Nav ─────────────────────────────────────────────────────────────────────
const LOGIN_URL = 'https://cbamy.cmconsulting.app';
function Nav({ variant = 'light', dense = false }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: dense ? '18px 56px' : '24px 64px',
      borderBottom: '1px solid var(--line-soft)',
      background: variant === 'soft' ? 'var(--bg-soft)' : 'var(--bg)',
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'saturate(140%) blur(8px)'
    }}>
      <a href="#hero" style={{ textDecoration: 'none' }}><Wordmark size={20} /></a>
      <nav style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--ink-soft)' }}>
        <a href="#come-funziona" style={navLink}>Come funziona</a>
        <a href="#cosa-vedi" style={navLink}>Cosa vedi</a>
        <a href="#per-chi" style={navLink}>Per chi</a>
        <a href="#faq" style={navLink}>FAQ</a>
      </nav>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <a href={LOGIN_URL} style={{ ...btnPrimary(), textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Log In →</a>
      </div>
    </header>);

}
Object.assign(window, { LOGIN_URL });
const navLink = {
  color: 'var(--ink-soft)', fontSize: 14, textDecoration: 'none',
  cursor: 'pointer', fontWeight: 500
};

// ─── Buttons ────────────────────────────────────────────────────────────────
function btnPrimary(size = 'md') {
  const pads = size === 'lg' ? '14px 22px' : size === 'sm' ? '8px 14px' : '10px 18px';
  const fs = size === 'lg' ? 15 : size === 'sm' ? 13 : 14;
  return {
    background: 'var(--ink)',
    color: '#fff',
    border: 'none',
    padding: pads,
    borderRadius: 8,
    fontSize: fs,
    fontWeight: 500,
    fontFamily: 'var(--font-sans)',
    cursor: 'pointer',
    letterSpacing: '-0.01em',
    boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.15)'
  };
}
function btnGhost(size = 'md') {
  const pads = size === 'lg' ? '14px 22px' : '10px 18px';
  const fs = size === 'lg' ? 15 : 14;
  return {
    background: 'transparent', color: 'var(--ink)', border: '1px solid var(--line)',
    padding: pads, borderRadius: 8, fontSize: fs, fontWeight: 500,
    fontFamily: 'var(--font-sans)', cursor: 'pointer', letterSpacing: '-0.01em'
  };
}

// ─── Number formatting (it-IT) ──────────────────────────────────────────────
const fmtEUR = (n, frac = 0) => new Intl.NumberFormat('it-IT', {
  style: 'currency', currency: 'EUR', minimumFractionDigits: frac, maximumFractionDigits: frac
}).format(n);
const fmtN = (n, frac = 0) => new Intl.NumberFormat('it-IT', {
  minimumFractionDigits: frac, maximumFractionDigits: frac
}).format(n);

// ─── Footer ─────────────────────────────────────────────────────────────────
function Footer({ tone = 'light' }) {
  const isDark = tone === 'dark';
  return (
    <footer style={{
      padding: '40px 64px 32px',
      borderTop: `1px solid ${isDark ? '#1e293b' : 'var(--line)'}`,
      background: isDark ? 'var(--slate-950)' : 'var(--bg)',
      color: isDark ? 'var(--slate-400)' : 'var(--ink-mute)',
      fontSize: 13
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 40, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 340 }}>
          <a href="#hero" style={{ textDecoration: 'none' }}><Wordmark size={18} color={isDark ? '#fff' : undefined} /></a>
          <p style={{ marginTop: 12, lineHeight: 1.6 }}>
            Calcolo e monitoraggio dei costi CBAM per importatori italiani.
            Motore deterministico, non AI generativa.
          </p>
          <p style={{ marginTop: 12, fontSize: 12, color: isDark ? 'var(--slate-500)' : 'var(--ink-dim)' }}>CBAMy è un prodotto di CMC consulting · cbamy@cmconsulting.app

          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: '8px 48px', fontSize: 13 }}>
          <strong style={{ color: isDark ? '#fff' : 'var(--ink)' }}>Prodotto</strong>
          <strong style={{ color: isDark ? '#fff' : 'var(--ink)' }}>Esplora</strong>
          <strong style={{ color: isDark ? '#fff' : 'var(--ink)' }}>Contatti</strong>
          <a href="#come-funziona" style={footLink(isDark)}>Come funziona</a>
          <a href="#faq" style={footLink(isDark)}>FAQ</a>
          <a href="mailto:cbamy@cmconsulting.app" style={footLink(isDark)}>Contatti</a>
          <a href="#cosa-vedi" style={footLink(isDark)}>Cosa vedi</a>
          <a href="#simulazioni" style={footLink(isDark)}>Simulatore</a>
          <a href={LOGIN_URL} style={footLink(isDark)}>Accedi</a>
          <a href="#per-chi" style={footLink(isDark)}>Per chi</a>
          <a href="#cta" style={footLink(isDark)}>Richiedi demo</a>
          <span style={{ opacity: 0 }} />
        </div>
      </div>
      <div style={{
        marginTop: 32, paddingTop: 20,
        borderTop: `1px solid ${isDark ? '#1e293b' : 'var(--line-soft)'}`,
        display: 'flex', justifyContent: 'space-between',
        fontSize: 12, color: isDark ? 'var(--slate-500)' : 'var(--ink-dim)'
      }}>
        <span>© 2026 CMC consulting srl · P.IVA IT00000000000</span>
      </div>
    </footer>);

}
const footLink = (isDark) => ({
  color: isDark ? 'var(--slate-400)' : 'var(--ink-soft)',
  textDecoration: 'none', cursor: 'pointer', fontSize: 13
});

// ─── Disclosure / FAQ ────────────────────────────────────────────────────────
function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', background: 'none', border: 'none', padding: '20px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit'
      }}>
        <span style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{q}</span>
        <span style={{
          width: 24, height: 24, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--ink-mute)', fontSize: 18, lineHeight: 1,
          transition: 'transform .2s', transform: open ? 'rotate(45deg)' : 'rotate(0)'
        }}>+</span>
      </button>
      {open && <div style={{ paddingBottom: 22, fontSize: 14, lineHeight: 1.7, color: 'var(--ink-soft)', maxWidth: 760 }}>{a}</div>}
    </div>);

}

// ─── Logo strip (placeholder client logos) ──────────────────────────────────
function ClientStrip() {
  const logos = ['ACCIAI NORDEST', 'GRUPPO FERRO', 'METALSUD', 'ALU·MILANO', 'CEMENTERIA POVALLI', 'IDROGENO·EU'];
  return (
    <div style={{
      display: 'flex', gap: 48, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center',
      padding: '24px 0', opacity: 0.55
    }}>
      {logos.map((l) =>
      <span key={l} style={{
        fontSize: 12, fontWeight: 600, letterSpacing: '0.16em',
        color: 'var(--ink-mute)', fontFamily: 'var(--font-sans)'
      }}>{l}</span>
      )}
    </div>);

}

// ─── PDF Upload demo (animated, fake) ───────────────────────────────────────
// Goes through: idle → uploading → parsing → done. Cycles automatically.
function useFakeUploadCycle(speed = 1) {
  const [phase, setPhase] = useState('idle'); // idle|upload|parse|done
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    let raf,t0 = performance.now(),localPhase = 'idle';
    function tick(t) {
      const elapsed = (t - t0) / 1000 * speed;
      if (elapsed < 0.6) {localPhase = 'idle';setProgress(0);} else
      if (elapsed < 3.1) {
        localPhase = 'upload';
        setProgress(Math.min(1, (elapsed - 0.6) / 2.5));
      } else
      if (elapsed < 5.6) {
        localPhase = 'parse';
        setProgress(Math.min(1, (elapsed - 3.1) / 2.5));
      } else
      if (elapsed < 9.5) {
        localPhase = 'done';
        setProgress(1);
      } else
      {t0 = t;localPhase = 'idle';}
      setPhase(localPhase);
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [speed]);
  return { phase, progress };
}

// ─── Animated counter ───────────────────────────────────────────────────────
function useTween(target, deps = [], duration = 900) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    let raf,t0 = performance.now(),from = 0,to = target;
    function tick(t) {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setValue(from + (to - from) * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, deps); // eslint-disable-line
  return value;
}

// Make available globally for other babel scripts
Object.assign(window, {
  CBGlyph, Wordmark, Nav, btnPrimary, btnGhost,
  fmtEUR, fmtN, Footer, FAQItem, ClientStrip,
  useFakeUploadCycle, useTween
});