/* global React */

const Col = ({ title, children }) => (
  <div>
    <h4 style={{
      fontSize: 12, fontWeight: 600,
      color: 'var(--mlc-cream)',
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      margin: '0 0 14px',
    }}>
      {title}
    </h4>
    <ul style={{
      listStyle: 'none', padding: 0, margin: 0,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {children}
    </ul>
  </div>
);

const Li = ({ href = '#', children }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <li>
      <a
        href={href}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          fontSize: 12,
          color: hover ? 'rgba(254,255,238,0.70)' : 'rgba(254,255,238,0.35)',
          textDecoration: 'none',
          transition: 'color .2s',
        }}
      >
        {children}
      </a>
    </li>
  );
};

const Footer = () => (
  <footer
    data-screen-label="08 Footer"
    style={{ position: 'relative', padding: '48px 32px 32px', zIndex: 1 }}
  >
    {/* gold hairline */}
    <div style={{
      maxWidth: 1200, margin: '0 auto 40px',
      height: 1,
      background: 'linear-gradient(to right, transparent, rgba(244,205,99,0.30), transparent)',
    }} />

    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
      gap: 40,
    }}>
      <div>
        <div style={{
          fontSize: 18, fontWeight: 600,
          color: 'var(--mlc-cream)', letterSpacing: '-0.01em',
          marginBottom: 10,
        }}>
          mylittlechart
        </div>
        <p style={{
          fontSize: 13, color: 'rgba(254,255,238,0.40)',
          margin: 0, lineHeight: 1.6, maxWidth: 260,
        }}>
          Your friendly, powerful trading companion.
        </p>
      </div>
      <Col title="Product">
        <Li>Features</Li>
        <Li>Changelog</Li>
        <Li>Roadmap</Li>
        <Li>Download</Li>
      </Col>
      <Col title="Community">
        <Li>Telegram</Li>
        <Li>Discord</Li>
        <Li>GitHub</Li>
      </Col>
      <Col title="Legal">
        <Li>Terms</Li>
        <Li>Privacy</Li>
        <Li>Roadmap</Li>
      </Col>
    </div>
    <div style={{
      maxWidth: 1200, margin: '40px auto 0',
      fontSize: 11, color: 'rgba(254,255,238,0.25)',
      textAlign: 'center',
    }}>
      © 2026 mylittlechart. All rights reserved.
    </div>
  </footer>
);

window.Footer = Footer;