const Footer = ({ base = '' }) => (
  <footer style={{ padding: 'clamp(56px, 8vw, 80px) 0 40px', borderTop: '1px solid var(--line)' }}>
    <div className="container">
      <div style={{
        display:'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 'clamp(28px, 4vw, 40px)',
        marginBottom: 'clamp(40px, 6vw, 60px)',
      }}>
        <div>
          <a href={base + 'index.html'}><Logo size={32}/></a>
          <p style={{ fontSize: 14, color:'var(--fg-2)', maxWidth: 380, marginTop: 18, lineHeight: 1.55 }}>
            A small studio in Sydney doing websites, ads, SEO and a few other things for small businesses who'd rather work with humans. Avi, Ace, Aayush, Simran — four of us, no middlemen.
          </p>
          <p style={{ fontSize: 14, color:'var(--fg-3)', maxWidth: 380, marginTop: 14, lineHeight: 1.55, fontStyle:'italic', fontFamily:'var(--serif)' }}>
            Reply within a day, usually sooner.
          </p>
        </div>
        <FCol title="Things we do" items={[
          ['Website Design', base + 'services/web-design.html'],
          ['SEO', base + 'services/seo.html'],
          ['Google Ads', base + 'services/google-ads.html'],
          ['Meta Ads', base + 'services/meta-ads.html'],
          ['Social Media', base + 'services/social.html'],
          ['IT Support', base + 'services/it.html'],
          ['Software', base + 'services/software.html'],
          ['Web Apps', base + 'services/web-apps.html'],
          ['AI Automation', base + 'services/ai.html'],
        ]}/>
        <FCol title="Sydney areas" items={[
          ['Sydney CBD', base + 'locations/sydney-cbd.html'],
          ['North Sydney', base + 'locations/north-sydney.html'],
          ['Chatswood', base + 'locations/chatswood.html'],
          ['Eastern Suburbs', base + 'locations/bondi-eastern-suburbs.html'],
          ['Western Sydney', base + 'locations/penrith-western-sydney.html'],
          ['Sutherland Shire', base + 'locations/sutherland-shire.html'],
          ['All areas →', base + 'locations.html'],
        ]}/>
        <FCol title="The rest" items={[
          ['About', base + 'about.html'],
          ['Pricing', base + 'pricing.html'],
          ['Blog', base + 'blog.html'],
          ['Contact', base + 'contact.html'],
          ['hello@theprofitplatform.com.au', 'mailto:hello@theprofitplatform.com.au'],
        ]}/>
      </div>

      <div className="divider"/>

      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 32, flexWrap:'wrap', gap: 16 }}>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-3)' }}>
          © 2023–2026 · ABN 00 000 000 000 · Made on Gadigal land, with gratitude
        </div>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-3)' }}>
          Last updated: a tuesday in November
        </div>
      </div>

      <div style={{
        marginTop: 80,
        fontFamily:'var(--serif)',
        fontSize: 'clamp(80px, 18vw, 260px)',
        lineHeight: 0.85,
        letterSpacing:'-0.04em',
        textAlign:'center',
        background: 'linear-gradient(180deg, var(--wordmark-grad-from), var(--wordmark-grad-to))',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent',
        userSelect:'none'
      }}>
        theprofit<span style={{ fontStyle:'italic', color:'var(--wordmark-slash)' }}>platform</span>
      </div>
    </div>
  </footer>
);

const FCol = ({ title, items }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', textTransform:'uppercase', marginBottom: 18 }}>{title}</div>
    <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
      {items.map(it => {
        const [label, href] = Array.isArray(it) ? it : [it, '#'];
        return (
          <a key={label} href={href} style={{ fontSize: 13, color:'var(--fg-2)', transition:'color .2s' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fg)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-2)'}
          >{label}</a>
        );
      })}
    </div>
  </div>
);

// Marquee tagline strip — shorter, calmer
const Marquee = () => {
  const items = ['Small studio, Sydney','Est. 2023','Two humans','Fixed prices','Reply within a day','Cancel anytime'];
  return (
    <section style={{ padding: 'clamp(32px, 5vw, 48px) 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', overflow:'hidden', background:'var(--section-alt)' }}>
      <div className="marquee">
        {[...items, ...items, ...items].map((t, i) => (
          <div key={i} style={{ display:'inline-flex', alignItems:'center', gap: 'clamp(28px, 4vw, 48px)', fontFamily:'var(--serif)', fontSize: 'clamp(24px, 5vw, 40px)', letterSpacing:'-0.02em', whiteSpace:'nowrap', color:'var(--fg-2)' }}>
            <span>{t}</span>
            <span style={{ color:'var(--fg-3)', fontFamily:'var(--sans)', fontSize: 'clamp(18px, 3.5vw, 28px)' }}>—</span>
          </div>
        ))}
      </div>
    </section>
  );
};

window.Footer = Footer;
window.Marquee = Marquee;