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

const { useState, useEffect, useRef } = React;

const MAILTO = "mailto:michael@techuntangled.co?subject=Hosting%20a%20Tech%20Untangled%20session";
const EMAIL = "michael@techuntangled.co";

const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 16;
  window.scrollTo({ top, behavior: 'smooth' });
};

const Logo = ({ dark = false }) => (
  <a href="#home" onClick={e => { e.preventDefault(); scrollToId('home'); }}
     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 Untangled</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 = () => {
  const items = [
    { id: 'home',    label: 'Home' },
    { id: 'classes', label: 'Classes' },
    { id: 'about',   label: 'About' },
    { id: 'hosts',   label: 'For hosts' },
    { id: 'pricing', label: 'Pricing' },
  ];
  const [current, setCurrent] = useState('home');

  // Scroll-spy: highlight the active section as the user scrolls.
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY + 120;
      let active = 'home';
      for (const it of items) {
        const el = document.getElementById(it.id);
        if (el && el.offsetTop <= y) active = it.id;
      }
      setCurrent(active);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      maxWidth: 1120, margin: '0 auto', padding: '32px 32px 24px',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      borderBottom: '1px solid #E8E2D4', flexWrap: 'wrap', gap: 16,
    }}>
      <Logo />
      <nav style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
        {items.map(it => (
          <a key={it.id} href={`#${it.id}`}
             onClick={e => { e.preventDefault(); scrollToId(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', href }) => {
  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',
    textDecoration: 'none', display: 'inline-block',
  };
  const variants = {
    primary:   { background: '#A0452D', color: '#FFFDF5' },
    secondary: { background: '#2A7A6E', color: '#FFFDF5' },
    tertiary:  { background: 'transparent', color: '#333333', borderColor: '#333333' },
    onDark:    { background: 'rgba(255,253,245,0.10)', color: '#FFFDF5', borderColor: 'rgba(255,253,245,0.55)', backdropFilter: 'blur(6px)' },
  };
  const style = { ...base, ...variants[variant] };
  if (href) return <a href={href} style={style}>{children}</a>;
  return <button type={type} onClick={onClick} style={style}>{children}</button>;
};

// The primary CTA on the page. Big, Clay, with the email address as a subtitle.
// Repeated at every major decision point so a mid-scroll reader never has to hunt.
const EmailMichaelButton = ({ size = 'lg', dark = false }) => {
  const big = size === 'lg';
  return (
    <a href={MAILTO} style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
      gap: 6,
      background: '#A0452D',
      color: '#FFFDF5',
      padding: big ? '20px 40px 18px' : '14px 28px 12px',
      borderRadius: 10,
      textDecoration: 'none',
      boxShadow: dark ? '0 1px 0 rgba(255,253,245,0.08)' : '0 1px 0 rgba(51,51,51,0.06)',
      lineHeight: 1.05,
      transition: 'transform 120ms ease-out, background-color 160ms ease-out',
      minWidth: big ? 260 : 200,
      textAlign: 'center',
    }}>
      <span style={{
        fontFamily: "'DM Sans', sans-serif",
        fontSize: big ? 20 : 16,
        fontWeight: 600,
        letterSpacing: '-0.005em',
      }}>Email Michael</span>
      <span style={{
        fontFamily: "'DM Sans', sans-serif",
        fontSize: big ? 14 : 12,
        fontWeight: 400,
        letterSpacing: '0.01em',
        opacity: 0.92,
      }}>{EMAIL}</span>
    </a>
  );
};

const SectionHeader = ({ kicker, title, children, color = '#A0452D', titleColor = '#333333' }) => (
  <div style={{ marginBottom: 32 }}>
    {kicker && <div style={{
      fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      color, marginBottom: 12,
    }}>{kicker}</div>}
    <h2 style={{
      fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500,
      fontSize: 'clamp(28px, 3.4vw, 40px)', lineHeight: 1.15, letterSpacing: '-0.005em',
      color: titleColor, margin: 0, maxWidth: 720,
    }}>{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, EmailMichaelButton, SectionHeader, scrollToId, MAILTO, EMAIL });