// Hash router: dispatch to the right page based on location.hash

const {
  Nav, PageRail,
  Hero, ProofStrip, Problem, Mechanism, Products, Clients, EntryPoints, Founder, FAQ, FinalCTA,
  ServicesHub, ServiceCrmEnrichment, ServiceOutboundStrategy, ServiceDeliverabilitySetup, ServiceCrmAudit,
  ForHub, ForB2BSaaS, ForSeriesA, ForProServices, ForSalesforce, ForHubSpot, ForDynamics,
  CaseStudies, Compare, Integrations, PersonalizationParadox
} = window;

const HomePage = () => (
  <React.Fragment>
    <Hero />
    <ProofStrip />
    <Problem />
    <Mechanism />
    <Products />
    <Clients />
    <EntryPoints />
    <Founder />
    <FAQ />
    <FinalCTA />
  </React.Fragment>
);

const ROUTES = {
  '': HomePage, '/': HomePage,
  '/services': ServicesHub,
  '/services/crm-enrichment': ServiceCrmEnrichment,
  '/services/outbound-strategy': ServiceOutboundStrategy,
  '/services/deliverability-setup': ServiceDeliverabilitySetup,
  '/services/crm-audit': ServiceCrmAudit,
  '/for': ForHub,
  '/for/b2b-saas': ForB2BSaaS,
  '/for/series-a-startups': ForSeriesA,
  '/for/professional-services': ForProServices,
  '/for/salesforce-teams': ForSalesforce,
  '/for/hubspot-teams': ForHubSpot,
  '/for/dynamics-365-teams': ForDynamics,
  '/case-studies': CaseStudies,
  '/compare': Compare,
  '/integrations': Integrations,
  '/personalization-paradox': PersonalizationParadox
};

const Footer = () => (
  <footer style={{background:'var(--ink)', color:'rgba(245,241,232,0.65)', padding:'60px 40px 48px', borderTop:'1px solid var(--rule-light)'}}>
    <div style={{maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:40}} className="footer-grid">
      <div>
        <div style={{display:'flex', alignItems:'center', gap:10, fontFamily:'var(--serif)', fontSize:18, color:'var(--paper)', marginBottom:16}}>
          <LogoMark size={20}/> Concept Outbound
        </div>
        <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', lineHeight:1.8}}>
          travis@conceptoutbound.com<br/>
          cal.com/travisross/15min
        </div>
      </div>
      <div>
        <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(245,241,232,0.45)', marginBottom:16}}>Services</div>
        <div style={{display:'flex', flexDirection:'column', gap:10, fontFamily:'var(--mono)', fontSize:12}}>
          <a href="#/services">All services</a>
          <a href="#/services/crm-enrichment">CRM enrichment</a>
          <a href="#/services/outbound-strategy">Outbound strategy</a>
          <a href="#/services/deliverability-setup">Deliverability</a>
          <a href="#/services/crm-audit">CRM audit</a>
        </div>
      </div>
      <div>
        <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(245,241,232,0.45)', marginBottom:16}}>Who for</div>
        <div style={{display:'flex', flexDirection:'column', gap:10, fontFamily:'var(--mono)', fontSize:12}}>
          <a href="#/for/b2b-saas">B2B SaaS</a>
          <a href="#/for/series-a-startups">Series A</a>
          <a href="#/for/professional-services">Professional services</a>
          <a href="#/for/salesforce-teams">Salesforce teams</a>
          <a href="#/for/hubspot-teams">HubSpot teams</a>
          <a href="#/for/dynamics-365-teams">Dynamics 365 teams</a>
        </div>
      </div>
      <div>
        <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(245,241,232,0.45)', marginBottom:16}}>More</div>
        <div style={{display:'flex', flexDirection:'column', gap:10, fontFamily:'var(--mono)', fontSize:12}}>
          <a href="#/case-studies">Case studies</a>
          <a href="#/compare">Compare</a>
          <a href="#/integrations">Integrations</a>
          <a href="#/personalization-paradox">Essay: personalization paradox</a>
        </div>
      </div>
    </div>
    <div style={{maxWidth:1200, margin:'60px auto 0', paddingTop:24, borderTop:'1px solid var(--rule-light)', display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(245,241,232,0.45)'}}>
      <span>© 2026 Concept Outbound</span>
      <span>The list is the message.</span>
    </div>
  </footer>
);

const App = () => {
  const [path, setPath] = React.useState(() => (window.location.hash || '').replace(/^#/, ''));
  React.useEffect(() => {
    const on = () => {
      const p = (window.location.hash || '').replace(/^#/, '');
      setPath(p);
      // Scroll to top on route change, but respect in-page anchors (mechanism, products, etc.)
      if (p.startsWith('/') || p === '') window.scrollTo({top:0, behavior:'instant'});
    };
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);

  // Treat in-page anchors (no slash) as home
  const routeKey = path.startsWith('/') ? path : '/';
  const Page = ROUTES[routeKey] || HomePage;

  return (
    <React.Fragment>
      <Nav />
      <PageRail />
      <Page />
      <Footer />
    </React.Fragment>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);