/* Shared chrome and tokens for the multi-page HGP marketing site.
 * Aesthetic carried over from Direction C — cream lead, red as accent,
 * editorial type via Playfair + Inter.
 */

const FONTS = {
  display: "'Playfair Display', Georgia, serif",
  sans: "'Inter', -apple-system, sans-serif",
};
const C = {
  red: '#A42721',
  redDeep: '#8E1F1A',
  maroon: '#380808',
  cream: '#F4ECDF',
  cream2: '#FAF6EE',
  ink: '#0E1320',
  bone: '#FFFFFF',
};

const NAV = [
  { label: 'Home', href: '/' },
  { label: 'Team', href: '/team' },
  { label: 'Portfolio', href: '/portfolio' },
  { label: 'Approach', href: '/approach' },
  { label: 'News', href: '/news' },
  { label: 'Contact', href: '/contact' },
];

/* ── Responsive hook ─────────────────────────────────────── */
function useViewport() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return { w, mobile: w < 768, tablet: w >= 768 && w < 1024 };
}

/* ── Scroll-triggered fade-in ────────────────────────────── */
function FadeIn({ children, delay = 0, style }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.unobserve(el); } },
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(28px)',
      transition: `opacity 0.7s cubic-bezier(.22,1,.36,1) ${delay}s, transform 0.7s cubic-bezier(.22,1,.36,1) ${delay}s`,
      ...style,
    }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, on = 'cream', style }) {
  const color = on === 'cream' ? 'rgba(56,8,8,.55)' : 'rgba(255,255,255,.7)';
  return <div style={{ fontFamily: FONTS.sans, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color, ...style }}>{children}</div>;
}

/* ── Mobile hamburger menu ───────────────────────────────── */
function MobileMenu({ active, isDark, navColor, activeColor }) {
  const [open, setOpen] = React.useState(false);
  const barColor = isDark ? C.bone : C.ink;
  return (
    <>
      <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
        background: 'none', border: 'none', cursor: 'pointer', padding: 8,
        width: 38, height: 30, position: 'relative', zIndex: 100,
      }}>
        <span style={{ position: 'absolute', left: 8, width: 22, height: 2, background: barColor, display: 'block', transition: 'transform 0.3s, opacity 0.3s', top: 7, transform: open ? 'translateY(7px) rotate(45deg)' : 'none', transformOrigin: 'center' }} />
        <span style={{ position: 'absolute', left: 8, width: 22, height: 2, background: barColor, display: 'block', transition: 'opacity 0.3s', top: 14, opacity: open ? 0 : 1 }} />
        <span style={{ position: 'absolute', left: 8, width: 22, height: 2, background: barColor, display: 'block', transition: 'transform 0.3s, opacity 0.3s', top: 21, transform: open ? 'translateY(-7px) rotate(-45deg)' : 'none', transformOrigin: 'center' }} />
      </button>
      {open && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: C.cream, zIndex: 90,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 28,
        }}>
          {NAV.map((n, i) => (
            <a key={i} href={n.href} style={{
              fontFamily: FONTS.display, fontSize: 28, color: active === n.label ? C.red : C.ink,
              textDecoration: 'none', fontWeight: 400,
            }}>{n.label}</a>
          ))}
        </div>
      )}
    </>
  );
}

function Header({ active, theme = 'cream' }) {
  const { mobile, tablet } = useViewport();
  const isDark = theme === 'navy';
  const bg = isDark ? C.ink : C.cream2;
  const border = isDark ? '1px solid rgba(255,255,255,.10)' : '1px solid rgba(56,8,8,.12)';
  const navColor = isDark ? 'rgba(255,255,255,.75)' : 'rgba(56,8,8,.75)';
  const activeColor = isDark ? C.bone : C.red;
  const activeUnderline = isDark ? C.bone : C.red;
  const wordmark = isDark ? 'assets/HGP_WordLogo.png' : 'assets/HGP_WordLogo_Red.png';
  return (
    <header style={{ background: bg, borderBottom: border, position: 'sticky', top: 0, zIndex: 20, transition: 'background 200ms ease' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '14px 20px' : '20px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 14, textDecoration: 'none' }}>
          <img src="assets/HGP_Bucket.png" alt="" style={{ height: mobile ? 28 : 36 }} />
          <img src={wordmark} alt="Hingham Growth Partners" style={{ height: mobile ? 24 : 33 }} />
        </a>
        {mobile ? (
          <MobileMenu active={active} isDark={isDark} navColor={navColor} activeColor={activeColor} />
        ) : (
          <nav style={{ display: 'flex', gap: tablet ? 20 : 30, fontFamily: FONTS.sans, fontSize: 13, color: navColor, fontWeight: 500, alignItems: 'center' }}>
            {NAV.slice(0, 6).map((n, i) => (
              <a key={i} href={n.href} style={{
                color: active === n.label ? activeColor : 'inherit',
                textDecoration: 'none',
                borderBottom: active === n.label ? `1px solid ${activeUnderline}` : '1px solid transparent',
                paddingBottom: 4,
              }}>{n.label}</a>
            ))}
          </nav>
        )}
      </div>
    </header>
  );
}

function Footer() {
  const { mobile } = useViewport();
  return (
    <footer style={{ background: C.ink, color: C.bone, padding: mobile ? '48px 0 28px' : '72px 0 36px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.6fr 1fr 1fr', gap: mobile ? 40 : 64, marginBottom: mobile ? 40 : 64 }}>
          <div>
            <img src="assets/HGP_WordLogo.png" style={{ height: 28, marginBottom: 18 }} />
            <div style={{ fontFamily: FONTS.display, fontStyle: 'italic', fontSize: mobile ? 16 : 18, lineHeight: 1.5, color: 'rgba(255,255,255,.7)', maxWidth: 380 }}>
              Founder-backed growth equity for category-defining consumer brands.
            </div>
          </div>
          <div>
            <Eyebrow on="dark" style={{ marginBottom: 18 }}>Navigate</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
              {NAV.map((n, i) => (
                <a key={i} href={n.href} style={{ fontFamily: FONTS.sans, fontSize: 13, color: 'rgba(255,255,255,.78)', textDecoration: 'none' }}>{n.label}</a>
              ))}
            </div>
          </div>
          <div>
            <Eyebrow on="dark" style={{ marginBottom: 18 }}>Contact</Eyebrow>
            <div style={{ fontFamily: FONTS.sans, fontSize: 14, color: 'rgba(255,255,255,.78)', lineHeight: 1.7 }}>
              Hingham, Massachusetts<br />
              <a href="mailto:ben@hingham.vc" style={{ color: C.cream, textDecoration: 'none' }}>info@hingham.vc</a>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', gap: mobile ? 8 : 0, paddingTop: 24, borderTop: `1px solid rgba(255,255,255,.12)`, fontFamily: FONTS.sans, fontSize: 11, color: 'rgba(255,255,255,.4)', letterSpacing: '0.06em' }}>
          <span>© 2026 Hingham Growth Partners LLC. All rights reserved.</span>
          <span>Hingham, Massachusetts · Est. 2025</span>
        </div>
      </div>
    </footer>
  );
}

function PageHero({ eyebrow, title, subtitle, accent }) {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  return (
    <section style={{ background: C.cream, color: C.ink, padding: mobile ? '64px 0 48px' : '96px 0 72px', borderBottom: `1px solid rgba(56,8,8,.12)` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'end' }}>
          <FadeIn>
            <div style={{ marginBottom: compact ? 24 : 0 }}>
              <Eyebrow style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>
              <div style={{ width: 48, height: 1, background: C.red }} />
            </div>
          </FadeIn>
          <FadeIn delay={0.1}>
            <div>
              <h1 style={{
                fontFamily: FONTS.display, fontWeight: 400,
                fontSize: mobile ? 40 : tablet ? 52 : 72, lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0,
              }}>
                {accent ? <>{title.split(accent)[0]}<em style={{ fontStyle: 'italic', color: C.red }}>{accent}</em>{title.split(accent)[1]}</> : title}
              </h1>
              {subtitle && (
                <div style={{ marginTop: mobile ? 20 : 28, fontFamily: FONTS.sans, fontSize: mobile ? 15 : 17, lineHeight: 1.65, color: 'rgba(14,19,32,.65)', maxWidth: 720 }}>
                  {subtitle}
                </div>
              )}
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  );
}

function CTABanner({ eyebrow, headline, subtext, ctaLabel = 'Get in touch', ctaHref = '/contact' }) {
  const { mobile } = useViewport();
  return (
    <section style={{ background: C.ink, color: C.bone, padding: mobile ? '64px 0' : '96px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <FadeIn>
          <div style={{ display: mobile ? 'block' : 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              {eyebrow && <Eyebrow on="dark" style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>}
              <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', color: C.bone }}>{headline}</div>
              {subtext && <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.7, color: 'rgba(255,255,255,.7)', marginTop: 22, maxWidth: 560 }}>{subtext}</div>}
            </div>
            <div style={{ justifySelf: mobile ? 'start' : 'end', marginTop: mobile ? 32 : 0 }}>
              <a href={ctaHref} style={{
                background: C.red, color: C.bone, padding: mobile ? '16px 24px' : '18px 28px',
                fontFamily: FONTS.sans, fontSize: 14, fontWeight: 500, letterSpacing: '0.02em',
                textDecoration: 'none', display: 'inline-block',
              }}>{ctaLabel} →</a>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

const HGP_TWEAK_DEFAULTS = { headerTheme: 'cream' };

function Page({ children, active }) {
  return (
    <div style={{ width: '100%', fontFamily: FONTS.sans, background: C.cream, overflowX: 'hidden' }}>
      <Header active={active} theme={HGP_TWEAK_DEFAULTS.headerTheme} />
      {children}
      <Footer />
    </div>
  );
}

window.FONTS = FONTS;
window.C = C;
window.NAV = NAV;
window.useViewport = useViewport;
window.FadeIn = FadeIn;
window.Eyebrow = Eyebrow;
window.Header = Header;
window.Footer = Footer;
window.PageHero = PageHero;
window.CTABanner = CTABanner;
window.Page = Page;