// hero.jsx - redesigned Prometio hero, canonical brand styling.
// Keeps the exact copy + staggered entrance animations from the live site,
// rebuilt monochrome-first with Violet Blue as the single accent.

const NAV = [
{ label: 'Challenges', id: 'challenges' },
{ label: 'Impact', id: 'services' },
{ label: 'Cases', id: 'cases' },
{ label: 'Process', id: 'process' },
{ label: 'Tech', id: 'tech' },
{ label: 'Team', id: 'team' },
{ label: 'Reviews', id: 'testimonials' },
{ label: 'ROI', id: 'roi' },
{ label: 'Engage', id: 'plans' }];


function Header({ theme, activeId }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const goAndBook = (e) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setTimeout(() => document.dispatchEvent(new CustomEvent('prometio:open-booking')), 500);
  };
  const logo = theme === 'dark' ? 'assets/logo-negativo.png' : 'assets/logo-positivo.png';

  const NavLink = ({ item, big }) => {
    const on = activeId === item.id;
    return (
      <a href={`#${item.id}`} onClick={go(item.id)} aria-current={on ? 'true' : undefined} style={{
        color: on ? 'var(--accent)' : 'var(--fg-muted)', textDecoration: 'none',
        fontSize: big ? 18 : 14, fontWeight: on ? 600 : 500, letterSpacing: '0.01em',
        transition: 'color 200ms ease'
      }}
      onMouseEnter={(e) => {if (!on) e.currentTarget.style.color = 'var(--fg)';}}
      onMouseLeave={(e) => {if (!on) e.currentTarget.style.color = 'var(--fg-muted)';}}>
        {item.label}</a>);
  };

  return (
    <React.Fragment>
    <header style={{
      position: 'fixed', top: 0, insetInline: 0, zIndex: 60,
      height: 'var(--navbar-h, 72px)',
      background: (scrolled || open) ? 'var(--header-bg)' : 'transparent',
      backdropFilter: (scrolled || open) ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: (scrolled || open) ? 'blur(14px)' : 'none',
      borderBottom: `1px solid ${(scrolled || open) ? 'var(--hairline)' : 'transparent'}`,
      transition: 'background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease'
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', height: '100%',
        padding: '0 clamp(18px, 4vw, 32px)', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 16
      }}>
        <a href="#hero" onClick={go('hero')} style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img src={logo} alt="Prometio Group" style={{ height: 'clamp(30px, 4vw, 38px)', width: 'auto', display: 'block' }} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 'clamp(14px, 2.1vw, 30px)' }} className="hero-nav">
          {NAV.map((item) => <NavLink key={item.id} item={item} />)}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          <a href="#contact" onClick={go('contact')} className="gcta header-cta" style={{
            display: 'inline-flex', alignItems: 'center',
            background: 'var(--violet)', color: 'var(--platinum)',
            fontSize: 14, fontWeight: 600, textDecoration: 'none',
            padding: '10px 22px', borderRadius: 12, whiteSpace: 'nowrap',
            transition: 'transform 200ms ease'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-1px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';}}>
            Let's Talk</a>
          <button className="nav-toggle" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
            onClick={() => setOpen((o) => !o)} style={{
              all: 'unset', cursor: 'pointer', width: 42, height: 42, borderRadius: 10,
              display: 'none', alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--hairline)', color: 'var(--fg)'
            }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square">
              {open ? <path d="M6 6l12 12M18 6L6 18" /> : <React.Fragment><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></React.Fragment>}
            </svg>
          </button>
        </div>
      </div>
    </header>

    {/* Mobile / narrow drawer */}
    <div className={`nav-drawer ${open ? 'open' : ''}`} onClick={() => setOpen(false)} aria-hidden={!open}>
      <nav className="nav-drawer-panel" onClick={(e) => e.stopPropagation()}>
        {NAV.map((item) => <NavLink key={item.id} item={item} big />)}
        <a href="#contact" onClick={go('contact')} className="gcta" style={{
          marginTop: 8, display: 'inline-flex', justifyContent: 'center', alignItems: 'center',
          background: 'var(--violet)', color: 'var(--platinum)', fontSize: 16, fontWeight: 600,
          textDecoration: 'none', padding: '14px 22px', borderRadius: 12
        }}>Let's Talk</a>
      </nav>
    </div>
    </React.Fragment>);

}

function Hero({ t }) {
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const id = requestAnimationFrame(() => setActive(true));
    return () => cancelAnimationFrame(id);
  }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const goAndBook = (e) => {
    e.preventDefault();
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setTimeout(() => document.dispatchEvent(new CustomEvent('prometio:open-booking')), 500);
  };

  // headline emphasis: 'mono' = both lines fg; 'accent' = 2nd line Violet Blue
  const line2Color = t.headline === 'accent' ? 'var(--accent)' : 'var(--fg)';

  const eyebrowAccent = t.accent !== 'mono';

  return (
    <section id="hero" className={active ? 'is-active' : ''} aria-labelledby="hero-h" data-screen-label="Hero"
    style={{ position: 'relative', height: '100vh', width: '100%', overflow: 'hidden' }}>

      <BrandBackground mode={t.background} intensity={t.density} theme={t.theme} />

      <div style={{
        position: 'relative', zIndex: 10, height: '100%',
        display: 'grid', gridTemplateRows: 'var(--navbar-h, 72px) 1fr auto',
        maxWidth: 1040, margin: '0 auto', width: '100%'
      }}>
        <div aria-hidden="true" />

        <div style={{
          minHeight: 0, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          textAlign: 'center', padding: '0 24px'
        }}>
          {/* Eyebrow */}
          <div className="reveal" style={{ '--d': '0ms', marginBottom: 28 }}>
            <span style={{
              display: 'inline-block', textTransform: 'uppercase',
              fontSize: 12, fontWeight: 500,
              letterSpacing: '0.26em',
              color: eyebrowAccent ? 'var(--accent)' : 'var(--fg-muted)',
              border: `1px solid ${eyebrowAccent ? 'var(--eyebrow-bd)' : 'var(--hairline)'}`,
              background: eyebrowAccent ? 'var(--eyebrow-bg)' : 'transparent',
              borderRadius: 999, padding: '8px 18px'
            }}>Cutting-Edge Engineering, Within Your Reach</span>
          </div>

          {/* Headline */}
          <h1 id="hero-h" className="reveal" style={{
            '--d': '120ms',
            fontFamily: 'var(--font-display)', fontWeight: 650,
            fontSize: 'clamp(2.4rem, 6.4vw, 5rem)', lineHeight: 1.04,
            letterSpacing: '-0.03em', margin: 0, color: 'var(--fg)'
          }}>
            <span style={{ display: 'block', color: 'var(--fg)' }}>You Have the Vision.</span>
            <span style={{ display: 'block', color: line2Color }}>We Make It Real.</span>
          </h1>

          {/* Subtitle */}
          <p className="reveal" style={{
            '--d': '260ms',
            marginTop: 28, maxWidth: 640,
            fontSize: 'clamp(1.05rem, 1.7vw, 1.35rem)', lineHeight: 1.6,
            color: 'var(--fg-muted)', fontWeight: 400
          }}>
            While you focus on strategy, we build the systems that make{' '}
            <span style={{ color: 'var(--fg)', fontWeight: 600 }}>winning inevitable.</span>
          </p>

          {/* CTAs */}
          <div className="reveal" style={{
            '--d': '400ms', display: 'flex', gap: 16, marginTop: 40,
            flexWrap: 'wrap', justifyContent: 'center'
          }}>
            <a href="#contact" onClick={goAndBook} className="gcta" style={{
              padding: '15px 28px', borderRadius: 14, fontWeight: 600, fontSize: 15,
              background: 'var(--violet)', color: 'var(--platinum)', textDecoration: 'none',
              transition: 'transform 200ms ease, background 200ms ease, box-shadow 200ms ease'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 14px 40px rgba(66,83,175,0.35)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
              Schedule a Discovery Call</a>
            <a href="#cases" onClick={scrollTo('cases')} className="gcta" style={{
              padding: '15px 28px', borderRadius: 14, fontWeight: 600, fontSize: 15,
              background: 'transparent', color: 'var(--fg)', textDecoration: 'none',
              border: '1px solid var(--hairline)',
              transition: 'border-color 200ms ease, background 200ms ease'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(90,107,201,0.55)';e.currentTarget.style.background = 'rgba(66,83,175,0.08)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--hairline)';e.currentTarget.style.background = 'transparent';}}>
              See Our Work</a>
          </div>
        </div>

        {/* Stats */}
        {t.showStats &&
        <div className="reveal" style={{ '--d': '560ms', padding: '0 24px 40px' }}>
            <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 'clamp(20px, 4vw, 44px)', flexWrap: 'wrap'
          }}>
              {[['300+', 'Projects Delivered'], ['1-Week', 'Sprint Cycles'], ['87%', 'Repeat Clients']].map(([n, l], i) =>
            <React.Fragment key={l}>
                  {i > 0 && <span aria-hidden="true" style={{ width: 1, height: 22, background: 'var(--hairline)' }} />}
                  <span style={{ fontSize: 13.5 }}>
                    <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{n}</span>{' '}
                    <span style={{ color: 'var(--fg-faint)' }}>{l}</span>
                  </span>
                </React.Fragment>
            )}
            </div>
          </div>
        }
      </div>
    </section>);

}

window.Hero = Hero;
window.Header = Header;