// footer.jsx — closing colophon + disclaimer
function Footer({ motion = true }) {
  return (
    <footer style={{
      position: 'relative',
      padding: 'clamp(64px, 10vh, 120px) 0 40px',
      borderTop: '1px solid var(--rule)',
      background: 'linear-gradient(180deg, transparent, rgba(229,240,232,0.4))',
    }}>
      <div className="container">
        {/* Big wordmark */}
        <div style={{
          display: 'flex', alignItems: 'flex-end', gap: 28,
          marginBottom: 56,
        }}>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 400,
            fontSize: 'clamp(96px, 18vw, 280px)',
            lineHeight: 0.8,
            letterSpacing: '-0.035em',
            color: 'var(--moss-deep)',
            opacity: 0.95,
          }}>
            Nurtli
            <span className="serif-italic" style={{ color: 'var(--sage)' }}>.</span>
          </div>
          <div style={{
            flexShrink: 0,
            paddingBottom: 24,
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <NurtliMark size={56} />
          </div>
        </div>

        {/* Disclaimer prominently */}
        <div className="glass" style={{
          padding: 28,
          borderRadius: 22,
          marginBottom: 48,
          maxWidth: 760,
          background: 'rgba(232,200,150,0.12)',
          border: '0.5px dashed rgba(200,160,90,0.4)',
        }}>
          <div className="lab" style={{ color: 'var(--moss-deep)' }}>Disclaimer · please read</div>
          <p className="body-m text-pretty" style={{ margin: '8px 0 0' }}>
            Nurtli is an <em style={{ fontFamily: 'var(--font-display)', color: 'var(--moss-deep)' }}>educational tool</em>, not a medical device.
            Nothing here diagnoses, treats, cures or prevents any condition. If your
            skin is genuinely struggling, please see a dermatologist.
            We deliberately do not name specific dermatological conditions as
            something Nurtli addresses.
          </p>
        </div>

        {/* link rows */}
        <div className="footer-cols" style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 40,
          paddingBottom: 40,
          borderBottom: '1px solid var(--rule)',
        }}>
          <div>
            <p className="body-m text-pretty" style={{
              margin: 0, maxWidth: 360, color: 'var(--ink-soft)',
            }}>
              A microbiologist in your pocket. Science-led, independent, iOS 18.4+.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
              <span className="chip"><span className="dot" /> On the App Store</span>
              <span className="chip">v1.0 · build 1</span>
            </div>
          </div>

          <FooterCol title="Product" links={[
            ['The microbiome', '#microbiome'],
            ['What it does', '#features'],
            ['Grading model', '#grading'],
            ['Check-in flow', '#checkin'],
          ]} />
          <FooterCol title="Principles" links={[
            ['Privacy policy', 'Privacy Policy.html'],
            ['Terms of use', 'Terms of Use.html'],
            ['Pricing', '#pricing'],
            ['No medical claims', 'Terms of Use.html'],
            ['No dark patterns', 'Privacy Policy.html'],
          ]} />
          <FooterCol title="Reach" links={[
            ['Download on the App Store', 'https://apps.apple.com/app/nurtli/id0000000000'],
            ['Blog', 'Blog.html'],
            ['Support', 'support.html'],
            ['Press kit', 'Press Kit.html'],
            ['contact@nurtli.net', 'mailto:contact@nurtli.net'],
          ]} />
        </div>

        {/* colophon */}
        <div className="colophon" style={{
          marginTop: 28,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--ink-muted)',
        }}>
          <span>© 2026 · Arilabs</span>
          <span>Set in Instrument Serif, Geist & JetBrains Mono</span>
          <span>Single-author content · no AI in published material</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .footer-cols { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .footer-cols { grid-template-columns: 1fr !important; }
          .colophon { font-size: 10px !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="lab" style={{ color: 'var(--moss-deep)', marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{
              fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink)',
              textDecoration: 'none', letterSpacing: '-0.005em',
              transition: 'color .25s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--moss-deep)'; e.currentTarget.style.fontStyle = 'italic'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.fontStyle = 'normal'; }}>
              {label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Footer });