// Main App

const DEFAULTS = {
  view: 'hub',
  hubStyle: 'editorial',
  heroVariant: 'editorial',
  logoVariant: 'a',
};

const FULL_PATH = '/makingitmatter';

const TITLES = {
  hub: 'Megan Hunter — Fractional CX & Product Leader | Making It Matter',
  full: 'Fractional CX & Product Leadership | Making It Matter by Megan Hunter',
};

const DESCRIPTIONS = {
  hub: "Megan Hunter — Fractional CX & product leader for financial services and women's health. Founder at Nadi. Host of Making It Matter podcast.",
  full: "Fractional CX and product leadership for financial services and women's health teams. In a world where anyone can build anything, trust is the moat.",
};

const OG_TITLES = {
  hub: 'Megan Hunter · Fractional CX & Product Leader',
  full: 'Fractional CX & Product Leadership · Making It Matter',
};

const OG_DESCRIPTIONS = {
  hub: "Fractional CX and product leadership for financial services and women's health. Founder at Nadi. Host of Making It Matter podcast.",
  full: "In a world where anyone can build anything, trust is the moat. Fractional CX and product leadership for financial services and women's health.",
};

const TWITTER_DESCRIPTIONS = {
  hub: "Fractional CX and product leadership for financial services and women's health.",
  full: "In a world where anyone can build anything, trust is the moat.",
};

const SITE_ORIGIN = 'https://megan-hunter.com';
const URLS = { hub: SITE_ORIGIN + '/', full: SITE_ORIGIN + FULL_PATH };
const OG_IMAGE = SITE_ORIGIN + '/og-image.jpg';

const SCHEMAS = {
  hub: {
    '@context': 'https://schema.org',
    '@type': 'Person',
    name: 'Megan Hunter',
    jobTitle: 'Fractional CX & Product Leader',
    worksFor: { '@type': 'Organization', name: 'Making It Matter' },
    url: SITE_ORIGIN,
    image: OG_IMAGE,
    sameAs: [
      'https://www.linkedin.com/in/meganahunter/',
      'https://nadi.health',
    ],
  },
  full: {
    '@context': 'https://schema.org',
    '@type': 'ProfessionalService',
    name: 'Making It Matter',
    description: "Fractional CX and product leadership for financial services and women's health teams.",
    url: SITE_ORIGIN + FULL_PATH,
    image: OG_IMAGE,
    founder: { '@type': 'Person', name: 'Megan Hunter' },
    provider: { '@type': 'Person', name: 'Megan Hunter' },
    areaServed: ['Europe', 'United Arab Emirates'],
    serviceType: [
      'Fractional CX leadership',
      'Fractional product leadership',
      'Proposition and experience design',
      'Inclusive design and vulnerability strategy',
    ],
  },
};

function setMetaByName(name, content) {
  let el = document.querySelector(`meta[name="${name}"]`);
  if (!el) {
    el = document.createElement('meta');
    el.setAttribute('name', name);
    document.head.appendChild(el);
  }
  el.setAttribute('content', content);
}

function setMetaByProperty(property, content) {
  let el = document.querySelector(`meta[property="${property}"]`);
  if (!el) {
    el = document.createElement('meta');
    el.setAttribute('property', property);
    document.head.appendChild(el);
  }
  el.setAttribute('content', content);
}

function viewFromPath() {
  if (typeof window === 'undefined') return 'hub';
  return window.location.pathname.replace(/\/$/, '') === FULL_PATH ? 'full' : 'hub';
}

function App() {
  const [state, setState] = React.useState(() => ({ ...DEFAULTS, view: viewFromPath() }));

  React.useEffect(() => {
    document.title = TITLES[state.view];
    setMetaByName('description', DESCRIPTIONS[state.view]);
    setMetaByProperty('og:title', OG_TITLES[state.view]);
    setMetaByProperty('og:description', OG_DESCRIPTIONS[state.view]);
    setMetaByProperty('og:url', URLS[state.view]);
    setMetaByProperty('og:image', OG_IMAGE);
    setMetaByName('twitter:title', OG_TITLES[state.view]);
    setMetaByName('twitter:description', TWITTER_DESCRIPTIONS[state.view]);
    setMetaByName('twitter:image', OG_IMAGE);
    let canonical = document.querySelector('link[rel="canonical"]');
    if (!canonical) {
      canonical = document.createElement('link');
      canonical.setAttribute('rel', 'canonical');
      document.head.appendChild(canonical);
    }
    canonical.setAttribute('href', URLS[state.view]);
    const ld = document.getElementById('ld-schema');
    if (ld) ld.textContent = JSON.stringify(SCHEMAS[state.view]);
  }, [state.view]);

  React.useEffect(() => {
    const onPop = () => setState(s => ({ ...s, view: viewFromPath() }));
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [state.view]);

  const switchToFull = () => {
    if (window.location.pathname.replace(/\/$/, '') !== FULL_PATH) {
      window.history.pushState({}, '', FULL_PATH);
    }
    setState(s => ({ ...s, view: 'full' }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (state.view === 'hub') {
    return <Hub hubStyle={state.hubStyle} logoVariant={state.logoVariant} onSwitchToFull={switchToFull} />;
  }

  return (
    <>
      <Nav logoVariant={state.logoVariant} />
      <Hero heroVariant={state.heroVariant} logoVariant={state.logoVariant} />
      <TrustedBy />
      <Belief />
      <Services />
      <Proof />
      <Testimonials />
      <Industry />
      <About />
      <Podcast />
      <CTA />
      <Footer logoVariant={state.logoVariant} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);