const Footer = ({ onContact, onJump }) => {
  const anchor = (key, label) => (
    <a key={label} className="orx-footer-link" data-text={label} onClick={() => onJump(key, true)}>{label}</a>
  );
  const href = (to, label) => (
    <a key={label} className="orx-footer-link" data-text={label} href={to}>{label}</a>
  );
  const action = (label, onClick) => (
    <a key={label} className="orx-footer-link" data-text={label} onClick={onClick}>{label}</a>
  );

  const Heading = ({ children }) => (
    <div style={{
      fontFamily: "'Inter Tight', sans-serif",
      fontSize: 13, color: '#FFFAF5', marginBottom: 14,
      fontWeight: 600, letterSpacing: '-0.005em',
    }}>{children}</div>
  );

  const Section = ({ title, children, gap = 10 }) => (
    <div>
      <Heading>{title}</Heading>
      <div style={{display: 'flex', flexDirection: 'column', gap}}>{children}</div>
    </div>
  );

  const Stack = ({ children }) => (
    <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>{children}</div>
  );

  return (
    <footer style={{
      padding: '72px 48px 44px',
      background: '#000000',
      borderTop: '1px solid rgba(245,238,228,0.06)',
    }}>
      <div style={{maxWidth: 1280, margin: '0 auto'}}>
        <div className="orx-footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1.1fr 1fr',
          gap: 48, marginBottom: 56,
        }}>
          {/* Brand */}
          <div>
            <div style={{marginBottom: 20}}>
              <img src="./assets/logo-wordmark-white.png" style={{height: 20, width: 'auto', display: 'block'}}/>
            </div>
            <p className="orx-tagline" style={{
              fontFamily: "'Inter Tight', sans-serif",
              fontSize: 17, color: '#BFB3A2', margin: 0, maxWidth: 320, lineHeight: 1.45,
            }}>
              We sell you what matters.{' '}
              <span className="orx-results-word" data-text="Results." style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', color: '#FFFAF5'}}>Results.</span>
            </p>
          </div>

          {/* Col: Explore + Engagement stacked */}
          <Stack>
            <Section title="Explore">
              {anchor('philosophy', 'Philosophy')}
              {anchor('services',   'Services')}
              {anchor('engagement', 'Engagement')}
              {anchor('work',       'Work')}
            </Section>
            <Section title="Engagement">
              {anchor('engagement-alacarte', 'À la carte')}
              {anchor('engagement-jv',       'Joint venture')}
            </Section>
          </Stack>

          {/* Col: Company + Selected work stacked */}
          <Stack>
            <Section title="Company">
              {anchor('service-01', 'Operating systems')}
              {anchor('service-02', 'Autonomous operators')}
              {anchor('service-03', 'Demand infrastructure')}
              {anchor('service-04', 'Brand identity')}
              {anchor('service-05', 'Custom software')}
              {anchor('service-06', 'Business consulting')}
            </Section>
            <Section title="Selected work">
              {anchor('case-03', 'Software build')}
              {anchor('case-06', 'Real-time translation')}
            </Section>
          </Stack>

          {/* Col: Contact + Legal stacked */}
          <Stack>
            <Section title="Contact">
              {action('Inquiry', onContact)}
            </Section>
            <Section title="Legal">
              {href('/privacy/', 'Privacy')}
              {href('/terms/',   'Terms')}
            </Section>
          </Stack>
        </div>

        <div style={{
          borderTop: '1px solid rgba(245,238,228,0.06)',
          paddingTop: 24,
          display: 'flex', justifyContent: 'flex-start', alignItems: 'center',
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 13, color: '#5C5246',
        }}>
          <span>© 2026 ORXNGE.</span>
        </div>
      </div>

      <style>{`
        /* Footer link: hit area is exactly the word. The base color stays
           solid at all times — the gradient fill lives on a ::before that
           fades in on hover, so we never pass through the "transparent"
           intermediate that made the text flash through black mid-transition. */
        .orx-footer-link {
          position: relative;
          display: inline-block;
          font-family: 'Inter Tight', sans-serif;
          font-size: 14px;
          line-height: 1.3;
          color: #BFB3A2;
          text-decoration: none;
          cursor: pointer;
          align-self: flex-start;
          width: fit-content;
          padding: 2px 0;
        }
        .orx-footer-link::before {
          content: attr(data-text);
          position: absolute;
          left: 0; top: 2px;
          background: linear-gradient(180deg, #FFE3CC 0%, #FF8533 100%);
          -webkit-background-clip: text;
                  background-clip: text;
          color: transparent;
          opacity: 0;
          transition: opacity 240ms ease;
          pointer-events: none;
          font: inherit;
          letter-spacing: inherit;
        }
        .orx-footer-link:hover::before { opacity: 1; }

        @media (max-width: 960px) {
          .orx-footer-grid {
            grid-template-columns: 1fr 1fr !important;
            row-gap: 40px !important;
          }
        }
        @media (max-width: 560px) {
          .orx-footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;