// Marketing site components — TMSC
// Expose all components on window at end of file for cross-script use.

const { useState } = React;

const Logo = ({ dark = false }) => (
  <a href="#" style={{ display: 'inline-block', textDecoration: 'none', lineHeight: 1 }}>
    <div style={{
      fontFamily: "'Fraunces', Georgia, serif",
      fontWeight: 500,
      fontSize: 26,
      letterSpacing: '-0.01em',
      color: dark ? '#F4B58E' : '#A0452D',
    }}>Tech Made Simple</div>
    <div style={{
      fontFamily: "'DM Sans', sans-serif",
      fontWeight: 500,
      fontSize: 11,
      letterSpacing: '0.16em',
      color: dark ? '#FFFDF5' : '#333333',
      marginTop: 4,
      textTransform: 'uppercase',
    }}>Cherokee County · Georgia</div>
  </a>
);

const Header = ({ current, onNav }) => {
  const items = [
    { id: 'home', label: 'Home' },
    { id: 'classes', label: 'Classes' },
    { id: 'about', label: 'About' },
    { id: 'hosts', label: 'For hosts' },
    { id: 'pricing', label: 'Pricing' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <header style={{
      maxWidth: 1120, margin: '0 auto', padding: '32px 32px 24px',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      borderBottom: '1px solid #E8E2D4',
    }}>
      <Logo />
      <nav style={{ display: 'flex', gap: 32 }}>
        {items.map(it => (
          <a key={it.id} href="#"
             onClick={e => { e.preventDefault(); onNav(it.id); }}
             style={{
               fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 500,
               color: current === it.id ? '#A0452D' : '#333333',
               textDecoration: 'none',
               paddingBottom: 6,
               borderBottom: current === it.id ? '2px solid #A0452D' : '2px solid transparent',
             }}>{it.label}</a>
        ))}
      </nav>
    </header>
  );
};

const Button = ({ variant = 'primary', children, onClick, type = 'button' }) => {
  const base = {
    fontFamily: "'DM Sans', sans-serif", fontSize: 17, fontWeight: 500,
    padding: '14px 26px', borderRadius: 8, cursor: 'pointer',
    border: '1px solid transparent', lineHeight: 1,
    transition: 'background-color 160ms ease-out, color 160ms ease-out',
  };
  const variants = {
    primary:   { background: '#A0452D', color: '#FFFDF5' },
    secondary: { background: '#2A7A6E', color: '#FFFDF5' },
    tertiary:  { background: 'transparent', color: '#333333', borderColor: '#333333' },
  };
  return <button type={type} onClick={onClick} style={{ ...base, ...variants[variant] }}>{children}</button>;
};

const SectionHeader = ({ kicker, title, children }) => (
  <div style={{ marginBottom: 32 }}>
    {kicker && <div style={{
      fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      color: '#A0452D', marginBottom: 12,
    }}>{kicker}</div>}
    <h2 style={{
      fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500,
      fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.005em',
      color: '#333333', margin: 0, maxWidth: 680,
    }}>{title}</h2>
    {children && <div style={{
      fontFamily: "'DM Sans', sans-serif", fontSize: 18, lineHeight: 1.6,
      color: '#5C5C5C', marginTop: 14, maxWidth: 640,
    }}>{children}</div>}
  </div>
);

Object.assign(window, { Logo, Header, Button, SectionHeader });