// hero.jsx — Hero section for Maxime's portfolio v2
// Architecte de systèmes commerciaux

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "auroraIntensity": 55,
  "auroraSpeed": 40,
  "showGrain": true,
  "titleTreatment": "mixed",
  "revealStyle": "lines",
  "cursorStyle": "ring",
  "accent": "#a855f7",
  "showSpec": true
} /*EDITMODE-END*/;

// ── Aurora background — slow, low-saturation violet glow ───────────────────
function Aurora({ intensity, speed, accent }) {
  const a = Math.max(0, Math.min(100, intensity)) / 100;
  const dur = Math.max(20, 100 - speed); // higher speed slider = faster
  return (
    <div className="aurora" aria-hidden="true">
      <div className="aurora-grad" style={{
        opacity: 0.18 + a * 0.42,
        animationDuration: `${dur}s`,
        ['--accent']: accent
      }} />
      <div className="aurora-grad aurora-grad-2" style={{
        opacity: 0.10 + a * 0.30,
        animationDuration: `${dur * 1.6}s`,
        ['--accent']: accent
      }} />
      <div className="aurora-vignette" />
    </div>);

}

// ── Grain overlay (CSS-only via repeating noise SVG) ────────────────────────
function Grain() {
  return <div className="grain" aria-hidden="true" />;
}

// ── Custom cursor — outline ring with lag ───────────────────────────────────
function CustomCursor({ enabled }) {
  const ringRef = React.useRef(null);
  const dotRef = React.useRef(null);
  const stateRef = React.useRef({ x: 0, y: 0, rx: 0, ry: 0, hover: false });

  React.useEffect(() => {
    if (!enabled) return;
    const onMove = (e) => {
      stateRef.current.x = e.clientX;
      stateRef.current.y = e.clientY;
    };
    const onOver = (e) => {
      const t = e.target;
      const interactive = t.closest && t.closest('a,button,[data-magnet]');
      stateRef.current.hover = !!interactive;
      if (ringRef.current) ringRef.current.dataset.hover = interactive ? '1' : '0';
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);
    let raf;
    const tick = () => {
      const s = stateRef.current;
      s.rx += (s.x - s.rx) * 0.18;
      s.ry += (s.y - s.ry) * 0.18;
      if (ringRef.current) ringRef.current.style.transform =
      `translate3d(${s.rx - 16}px, ${s.ry - 16}px, 0)`;
      if (dotRef.current) dotRef.current.style.transform =
      `translate3d(${s.x - 2}px, ${s.y - 2}px, 0)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    document.body.classList.add('cursor-hidden');
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
      cancelAnimationFrame(raf);
      document.body.classList.remove('cursor-hidden');
    };
  }, [enabled]);

  if (!enabled) return null;
  return (
    <>
      <div ref={ringRef} className="cur-ring" aria-hidden="true" />
      <div ref={dotRef} className="cur-dot" aria-hidden="true" />
    </>);

}

// ── Reveal helpers ──────────────────────────────────────────────────────────
function RevealTitle({ text, treatment, style: revealStyle }) {
  // text is array of lines. Each line will be revealed.
  const lines = Array.isArray(text) ? text : [text];

  if (revealStyle === 'words') {
    return (
      <h1 className={`hero-title t-${treatment}`}>
        {lines.map((line, li) =>
        <span key={li} className="line">
            {line.split(' ').map((w, wi, arr) => {
            const idx = lines.slice(0, li).reduce((s, l) => s + l.split(' ').length, 0) + wi;
            const isLast = li === lines.length - 1 && wi === arr.length - 1;
            return (
              <span key={wi} className="w-wrap">
                  <span className="w" style={{ animationDelay: `${0.18 + idx * 0.06}s` }}>
                    {renderWord(w, treatment, isLast)}
                  </span>
                  {wi < arr.length - 1 && ' '}
                </span>);

          })}
          </span>
        )}
      </h1>);

  }

  if (revealStyle === 'letters') {
    return (
      <h1 className={`hero-title t-${treatment}`}>
        {lines.map((line, li) =>
        <span key={li} className="line">
            {[...line].map((ch, ci) => {
            const idx = lines.slice(0, li).reduce((s, l) => s + l.length, 0) + ci;
            return (
              <span key={ci} className="ltr-wrap">
                  <span className="ltr" style={{ animationDelay: `${0.15 + idx * 0.018}s` }}>
                    {ch === ' ' ? '\u00a0' : ch}
                  </span>
                </span>);

          })}
          </span>
        )}
      </h1>);

  }

  if (revealStyle === 'none') {
    return (
      <h1 className={`hero-title t-${treatment} no-reveal`}>
        {lines.map((line, li) => {
          const isLast = li === lines.length - 1;
          return (
            <span key={li} className="line">{renderLine(line, treatment, isLast)}</span>);

        })}
      </h1>);

  }

  // default: lines (line-by-line mask)
  return (
    <h1 className={`hero-title t-${treatment}`}>
      {lines.map((line, li) => {
        const isLast = li === lines.length - 1;
        return (
          <span key={li} className="line-wrap">
            <span className="line line-mask"
            style={{ animationDelay: `${0.18 + li * 0.14}s` }}>
              {renderLine(line, treatment, isLast)}
            </span>
          </span>);

      })}
    </h1>);

}

function renderWord(w, treatment, isLast) {
  if (treatment === 'mixed' && isLast) return <em className="serif">{w}</em>;
  return w;
}
function renderLine(line, treatment, isLast) {
  if (treatment !== 'mixed' || !isLast) return line;
  // Pull the last word into Instrument Serif italic
  const parts = line.split(' ');
  const last = parts.pop();
  return (
    <>
      {parts.join(' ')}{parts.length ? ' ' : ''}
      <em className="serif">{last}</em>
    </>);

}

// ── Live system module (right column) ─────────────────────────────────────
// A signature visual: pulsing live system showing edge worker traffic.
function SystemModule() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1500);
    return () => clearInterval(id);
  }, []);

  // Generate a stable-but-evolving traffic spike
  const bars = React.useMemo(() => {
    const seed = tick;
    return Array.from({ length: 28 }, (_, i) => {
      const base = 0.25 + 0.65 * Math.abs(Math.sin((i + seed * 0.7) * 0.65));
      return Math.max(0.18, Math.min(1, base));
    });
  }, [tick]);

  const events = [
  { t: 'POST', p: '/sync/contact', s: '200' },
  { t: 'CRON', p: 'nurture · daily', s: '✓' },
  { t: 'WHK', p: 'hubspot.deal.won', s: '200' },
  { t: 'POST', p: '/score/lead', s: '200' }];

  const evt = events[tick % events.length];

  return (
    <aside className="sysmod" aria-label="Système en activité">
      {/* Header: live indicator */}
      <header className="sm-h">
        <span className="sm-id mono">SYS · M—01</span>
        <span className="sm-live mono">
          <span className="sm-pulse"></span>
          LIVE
        </span>
      </header>

      {/* Hero traffic chart — bars ticking */}
      <div className="sm-chart">
        <div className="sm-chart-grid"></div>
        {bars.map((h, i) =>
        <span key={i}
        className="sm-bar"
        style={{
          height: `${h * 100}%`,
          opacity: 0.3 + h * 0.7
        }} />
        )}
        <div className="sm-chart-cap mono">
          <span>req/min</span>
          <span className="accent">{Math.round(180 + bars[0] * 80)}</span>
        </div>
      </div>

      {/* Last event ticker */}
      <div className="sm-evt">
        <span className="sm-evt-t mono">{evt.t}</span>
        <span className="sm-evt-p mono">{evt.p}</span>
        <span className="sm-evt-s mono accent">{evt.s}</span>
      </div>

      {/* Stats — three vertical metrics */}
      <div className="sm-stats">
        <div className="sm-stat">
          <span className="sm-stat-v">99.98<span className="sm-stat-u">%</span></span>
          <span className="sm-stat-k mono">uptime · 90j</span>
        </div>
        <div className="sm-stat">
          <span className="sm-stat-v">42<span className="sm-stat-u">ms</span></span>
          <span className="sm-stat-k mono">latence p50</span>
        </div>
        <div className="sm-stat">
          <span className="sm-stat-v">7</span>
          <span className="sm-stat-k mono">systèmes en prod</span>
        </div>
      </div>

      {/* Footer line */}
      <footer className="sm-f mono">
        <span className="dim">Dernier déploiement</span>
        <span>il y a 3 j</span>
      </footer>
    </aside>);

}

// ── Section nav (right rail) ────────────────────────────────────────────────
function SectionRail() {
  const items = ['Hero', 'Manifesto', 'Travaux', 'Stack', 'Contact'];
  return (
    <nav className="rail" aria-label="Sections">
      {items.map((it, i) =>
      <div key={i} className={`rail-item ${i === 0 ? 'active' : ''}`}>
          <span className="rail-num">0{i + 1}</span>
          <span className="rail-line"></span>
          <span className="rail-lbl">{it}</span>
        </div>
      )}
    </nav>);

}

// ── Hero ────────────────────────────────────────────────────────────────────
function Hero() {
  const { t: T, lang, setLang } = useT();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [mounted, setMounted] = React.useState(false);
  const specRef = React.useRef(null);
  const auroraRef = React.useRef(null);
  React.useEffect(() => {setMounted(true);}, []);

  // Parallax — spec sheet drifts up + aurora drifts down on scroll
  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const y = window.scrollY;
        if (y > window.innerHeight * 1.2) return; // off-screen
        if (specRef.current) {
          specRef.current.style.transform = `translate3d(0, ${y * -0.18}px, 0)`;
        }
        if (auroraRef.current) {
          auroraRef.current.style.transform = `translate3d(0, ${y * 0.25}px, 0)`;
        }
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="page hero-section" style={{ ['--accent']: t.accent }} data-screen-label="01 Hero" id="top">
      <div ref={auroraRef} className="aurora-wrap">
        <Aurora intensity={t.auroraIntensity} speed={t.auroraSpeed} accent={t.accent} />
      </div>
      {t.showGrain && <Grain />}
      <CustomCursor enabled={t.cursorStyle !== 'native'} />

      {/* Top chrome */}
      <header className="topbar">
        <div className="brand">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22">
              <path d="M3 19 L12 5 L21 19" fill="none" stroke="currentColor"
              strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" />
              <path d="M7.5 19 L12 11.5 L16.5 19" fill="none" stroke="currentColor"
              strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter"
              opacity="0.55" />
            </svg>
          </span>
          <span className="brand-name">Agence MB <span className="dim">— {lang === 'fr' ? 'studio indépendant' : 'independent studio'}</span></span>
        </div>
        <nav className="topnav">
          <a href="#manifesto" data-magnet>{T('nav.manifesto')}</a>
          <a href="#travaux" data-magnet>{T('nav.travaux')}</a>
          <a href="#stack" data-magnet>{T('nav.stack')}</a>
          <a href="#contact" data-magnet>{T('nav.contact')}</a>
        </nav>
        <div className="top-right">
          <div className="lang-switch" role="group" aria-label="Langue / Language">
            <button type="button"
                    className={lang === 'fr' ? 'lang-btn is-on' : 'lang-btn'}
                    onClick={() => setLang('fr')}
                    aria-pressed={lang === 'fr'}>FR</button>
            <span className="lang-sep">·</span>
            <button type="button"
                    className={lang === 'en' ? 'lang-btn is-on' : 'lang-btn'}
                    onClick={() => setLang('en')}
                    aria-pressed={lang === 'en'}>EN</button>
          </div>
          <a href="#contact" className="btn-mini" data-magnet>
            <span>{T('topbar.write')}</span>
            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
              <path d="M2 9 L9 2 M9 2 H4 M9 2 V7" fill="none" stroke="currentColor" strokeWidth="1.2" />
            </svg>
          </a>
        </div>
      </header>

      {/* Crosshair frame */}
      <div className="frame" aria-hidden="true">
        <span className="cx tl"></span>
        <span className="cx tr"></span>
        <span className="cx bl"></span>
        <span className="cx br"></span>
      </div>

      {/* Hero content */}
      <main className={`hero ${mounted ? 'mounted' : ''}`}>
        <div className="hero-grid">
          <div className="hero-left">
            <div className="badge" data-magnet>
              <span className="pulse">
                <span className="pulse-dot"></span>
                <span className="pulse-ring"></span>
              </span>
              <span className="badge-text">{T('hero.badge.avail')}</span>
              <span className="badge-sep">·</span>
              <span className="badge-text dim">{T('hero.badge.slots')}</span>
            </div>

            <RevealTitle
              key={lang}
              text={T('hero.title')}
              treatment={t.titleTreatment}
              style={t.revealStyle} />
            
            

            <p className="hero-sub" style={{ animationDelay: '0.85s' }}>
              {T('hero.sub')}
            </p>

            <div className="cta-row" style={{ animationDelay: '1.05s' }}>
              <a href="#travaux" className="btn-primary" data-magnet>
                <span className="btn-shimmer"></span>
                <span className="btn-label">{T('hero.cta.primary')}</span>
                <span className="btn-arrow" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14">
                    <path d="M2 7 H12 M8 3 L12 7 L8 11" fill="none" stroke="currentColor"
                    strokeWidth="1.4" strokeLinecap="square" />
                  </svg>
                </span>
              </a>
              <a href="#contact" className="btn-text" data-magnet>
                <span>{T('hero.cta.secondary')}</span>
                <span className="ul" aria-hidden="true"></span>
              </a>
            </div>

            <div className="kicker" style={{ animationDelay: '1.25s' }}>
              <span className="mono small dim">{T('hero.kicker')}</span>
            </div>
          </div>

          {t.showSpec &&
          <div ref={specRef} className="hero-right" style={{ animationDelay: '0.7s' }}>
              <SystemModule />
            </div>
          }
        </div>

        {/* Bottom strip */}
        <footer className="hero-foot">
          <div className="foot-l">
            <span className="mono small dim">N° 01 / 05</span>
            <span className="mono small dim">{T('hero.foot.section')}</span>
          </div>
          <div className="foot-c">
            <span className="scroll-cue">
              <span className="scroll-line"></span>
              <span className="mono small">{T('hero.foot.scroll')}</span>
            </span>
          </div>
          <div className="foot-r">
            <span className="mono small dim">{getTime()}</span>
            <span className="mono small dim">· Paris</span>
          </div>
        </footer>
      </main>

      <TweaksPanel title="Hero · Tweaks">
        <TweakSection label="Aurora" />
        <TweakSlider label="Intensité" value={t.auroraIntensity} min={0} max={100} unit="%"
        onChange={(v) => setTweak('auroraIntensity', v)} />
        <TweakSlider label="Vitesse" value={t.auroraSpeed} min={0} max={90} unit=""
        onChange={(v) => setTweak('auroraSpeed', v)} />
        <TweakToggle label="Grain" value={t.showGrain}
        onChange={(v) => setTweak('showGrain', v)} />

        <TweakSection label="Typographie" />
        <TweakRadio label="Titre"
        value={t.titleTreatment}
        options={[
        { value: 'sans', label: 'Sans' },
        { value: 'mixed', label: 'Mix' },
        { value: 'serif', label: 'Serif' }]
        }
        onChange={(v) => setTweak('titleTreatment', v)} />
        <TweakSelect label="Reveal"
        value={t.revealStyle}
        options={[
        { value: 'lines', label: 'Ligne par ligne' },
        { value: 'words', label: 'Mot par mot' },
        { value: 'letters', label: 'Lettre par lettre' },
        { value: 'none', label: 'Aucun' }]
        }
        onChange={(v) => setTweak('revealStyle', v)} />

        <TweakSection label="Interaction" />
        <TweakRadio label="Curseur"
        value={t.cursorStyle}
        options={[
        { value: 'ring', label: 'Anneau' },
        { value: 'native', label: 'Natif' }]
        }
        onChange={(v) => setTweak('cursorStyle', v)} />
        <TweakColor label="Accent" value={t.accent}
        onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Spec sheet" value={t.showSpec}
        onChange={(v) => setTweak('showSpec', v)} />

        <TweakButton label="Replayer le reveal"
        onClick={() => {
          setMounted(false);
          requestAnimationFrame(() => setMounted(true));
        }} />
      </TweaksPanel>
    </div>);

}

function getTime() {
  const d = new Date();
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  return `${h}:${m}`;
}

window.Hero = Hero;