/* Hero, StickyNav, and LensToggle components — supports locked & toggle modes */

const LensContext = React.createContext({ lens: 'eng', setLens: () => {}, locked: false });

function LensProvider({ children }) {
  const isLocked = !!(typeof window !== 'undefined' && window.PAGE_LENS);
  const [lens, setLensState] = React.useState(() => {
    if (isLocked) return window.PAGE_LENS;
    try { return localStorage.getItem('av-lens') || 'eng'; } catch(e) { return 'eng'; }
  });
  const setLens = React.useCallback((v) => {
    if (isLocked) return;
    setLensState(v);
    try { localStorage.setItem('av-lens', v); } catch(e) {}
    document.documentElement.setAttribute('data-lens', v);
  }, [isLocked]);
  React.useEffect(() => { document.documentElement.setAttribute('data-lens', lens); }, []);
  return React.createElement(LensContext.Provider, { value: { lens, setLens, locked: isLocked } }, children);
}

function LensToggle({ mini }) {
  const { lens, setLens, locked } = React.useContext(LensContext);
  const engRef = React.useRef(null);
  const pmRef = React.useRef(null);
  const [bar, setBar] = React.useState({ left: 0, width: 0 });

  if (locked) return null;

  React.useEffect(() => {
    const el = lens === 'eng' ? engRef.current : pmRef.current;
    if (el) setBar({ left: el.offsetLeft, width: el.offsetWidth });
  }, [lens]);

  const cls = 'lens-toggle' + (mini ? ' lens-toggle--mini' : '');
  return (
    <div className={cls}>
      <button ref={engRef}
        className={'lens-toggle__btn' + (lens === 'eng' ? ' lens-toggle__btn--active' : '')}
        onClick={() => setLens('eng')}
        aria-pressed={lens === 'eng'}>
        Engineering Leader
      </button>
      <button ref={pmRef}
        className={'lens-toggle__btn' + (lens === 'pm' ? ' lens-toggle__btn--active' : '')}
        onClick={() => setLens('pm')}
        aria-pressed={lens === 'pm'}>
        Technical Product Manager
      </button>
      <div className="lens-toggle__bar" style={{ left: bar.left, width: bar.width }}></div>
    </div>
  );
}

function MetricChips({ lens }) {
  const metricsEng = [
    { value: '10M+', label: 'annual transactions' },
    { value: '150M+', label: 'USD in loans' },
    { value: '1M', label: 'USD in revenue' },
    { value: '50+', label: 'engineers led' },
  ];
  const metricsPm = [
    { value: '1M', label: 'USD revenue scaled' },
    { value: '150M+', label: 'USD in loans' },
    { value: '10M+', label: 'annual transactions' },
  ];
  const metrics = lens === 'pm' ? metricsPm : metricsEng;
  return (
    <div className="hero__metrics anim-in" data-anim>
      {metrics.map((m, i) => (
        <div className="metric-chip" key={i}>
          <span className="metric-chip__value">{m.value}</span>
          <span>{m.label}</span>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  const { lens, locked } = React.useContext(LensContext);

  const content = {
    eng: {
      headline: 'I build and lead teams that ship resilient financial systems.',
      pitch: 'Head of Engineering with 6 years scaling cloud-native payments & lending platforms \u2014 10M+ annual transactions, 150M+ USD in loans, 50+ engineers led.',
    },
    pm: {
      headline: 'I turn fintech complexity into products people adopt.',
      pitch: 'Senior Technical Product Manager for financial systems \u2014 owned roadmap & delivery from discovery to 1M USD in revenue across payments, lending, and digital public infrastructure.',
    },
  };

  const active = content[lens];
  const resumeLink = lens === 'eng' ? 'assets/resume-eng.html' : 'assets/resume-pm.html';
  const otherLink = lens === 'eng' ? 'Technical Product Manager.html' : 'Engineering Leader.html';
  const otherLabel = lens === 'eng' ? 'Technical Product Manager' : 'Engineering Leader';

  return (
    <section className="hero" id="hero">
      <div className="container">
        <div className="hero__grid">
          <div className="hero__content">
            <h1 className="hero__name t-display anim-in" data-anim>Avik Ganguly</h1>

            {locked ? (
              <div className="hero__role-badge anim-in" data-anim>
                <span className="hero__role-badge-dot"></span>
                {lens === 'eng' ? 'Engineering Leader' : 'Technical Product Manager'}
              </div>
            ) : (
              <LensToggle />
            )}

            {locked ? (
              <React.Fragment>
                <h2 className="hero__headline t-heading anim-in" data-anim>{active.headline}</h2>
                <p className="hero__pitch anim-in" data-anim>{active.pitch}</p>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div style={{ position: 'relative' }}>
                  <h2 className={'hero__headline t-heading lens-fade ' + (lens === 'eng' ? 'lens-fade--in' : 'lens-fade--out')}>
                    {content.eng.headline}
                  </h2>
                  <h2 className={'hero__headline t-heading lens-fade ' + (lens === 'pm' ? 'lens-fade--in' : 'lens-fade--out')}>
                    {content.pm.headline}
                  </h2>
                </div>
                <div style={{ position: 'relative' }}>
                  <p className={'hero__pitch lens-fade ' + (lens === 'eng' ? 'lens-fade--in' : 'lens-fade--out')}>
                    {content.eng.pitch}
                  </p>
                  <p className={'hero__pitch lens-fade ' + (lens === 'pm' ? 'lens-fade--in' : 'lens-fade--out')}>
                    {content.pm.pitch}
                  </p>
                </div>
              </React.Fragment>
            )}

            <MetricChips lens={lens} />

            <div className="hero__ctas anim-in" data-anim>
              <a href="#case-studies" className="btn btn--primary">View Case Studies</a>
              <a href={resumeLink} target="_blank" className="btn btn--secondary">
                {"Download R\u00e9sum\u00e9"}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
              </a>
            </div>

          </div>
          <div className="hero__photo-wrap anim-in" data-anim>
            <img src={lens === 'pm' ? 'assets/hero-pm.png' : 'assets/hero-eng.png'} alt="Avik Ganguly" className="hero__photo" />
            <div className="hero__photo-accent"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StickyNav() {
  const { locked, lens } = React.useContext(LensContext);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > window.innerHeight * 0.6);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const roleLabel = lens === 'eng' ? 'Engineering Leader' : 'Technical Product Manager';

  return (
    <nav className={'sticky-nav' + (visible ? ' sticky-nav--visible' : '')} aria-label="Main navigation">
      <div className="container sticky-nav__inner">
        <div className="sticky-nav__left">
          <a href="#hero" className="sticky-nav__name">AG</a>
          {locked ? (
            <span className="sticky-nav__role">{roleLabel}</span>
          ) : (
            <LensToggle mini />
          )}
        </div>
        <div className="sticky-nav__links">
          <a href="#skills">Skills</a>
          <a href="#case-studies">Case Studies</a>
          <a href="#experience">Experience</a>
          <a href="#designs">Designs</a>
          <a href="#work">Work</a>
          {lens === 'eng' && <a href="#contributions">Contributions</a>}
          <a href="#contact">Contact</a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { LensContext, LensProvider, LensToggle, Hero, StickyNav });