// TMSC marketing content components

const Hero = ({ onCta, onContact }) => (
  <section style={{ maxWidth: 1120, margin: '0 auto', padding: '80px 32px 64px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <div style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: '#A0452D', marginBottom: 20,
        }}>Cherokee County · Georgia</div>
        <h1 style={{
          fontFamily: "'Fraunces', Georgia, serif", fontWeight: 400,
          fontSize: 60, lineHeight: 1.06, letterSpacing: '-0.02em',
          color: '#333333', margin: 0, maxWidth: 520, textWrap: 'balance',
        }}>You are not behind. You were never shown.</h1>
        <p style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.6,
          color: '#5C5C5C', marginTop: 24, marginBottom: 32, maxWidth: 500,
        }}>
          Patient, in-person classes on the devices you already own.
          Hosted at libraries, churches, and community centers around the county.
        </p>
        <div style={{ display: 'flex', gap: 12 }}>
          <Button onClick={onCta}>See upcoming classes</Button>
          <Button variant="tertiary" onClick={onContact}>For host venues</Button>
        </div>
      </div>
      <PhotoPanel src="img/hero.jpeg" alt="A woman confidently using her smartphone." />
    </div>
  </section>
);

// Photo panel — same dimensions as original placeholder.
// Renders a real image when `src` is given; otherwise falls back to the
// editorial SVG placeholder used during prototyping.
const PhotoPanel = ({ src, alt = '', label, height = 420, tone = 'apricot', objectPosition = 'center' }) => {
  const tones = {
    apricot: { bg: '#F4B58E', accent: '#A0452D' },
    teal:    { bg: '#2A7A6E', accent: '#FFFDF5' },
    charcoal:{ bg: '#333333', accent: '#F4B58E' },
  }[tone];
  if (src) {
    return (
      <div style={{
        background: tones.bg, borderRadius: 12, height,
        position: 'relative', overflow: 'hidden',
      }}>
        <img
          src={src}
          alt={alt}
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition,
            display: 'block',
          }}
        />
      </div>
    );
  }
  return (
    <div style={{
      background: tones.bg, borderRadius: 12, height,
      position: 'relative', overflow: 'hidden',
    }}>
      <svg viewBox="0 0 400 420" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
        <rect x="40" y="240" width="320" height="16" fill={tones.accent} opacity="0.25"/>
        <rect x="100" y="140" width="200" height="120" rx="6" fill="#FFFDF5" opacity="0.92"/>
        <rect x="118" y="158" width="164" height="4" fill={tones.accent} opacity="0.35"/>
        <rect x="118" y="170" width="120" height="4" fill={tones.accent} opacity="0.25"/>
        <rect x="118" y="182" width="140" height="4" fill={tones.accent} opacity="0.25"/>
        <circle cx="170" cy="280" r="22" fill={tones.accent} opacity="0.4"/>
        <circle cx="230" cy="280" r="22" fill={tones.accent} opacity="0.4"/>
      </svg>
    </div>
  );
};

// ClassCard — used when a real venue is scheduled. Link points to the venue's own event listing.
const ClassCard = ({ date, title, meta, venueName, venueUrl }) => (
  <article style={{
    background: '#FFFFFF', border: '1px solid #E8E2D4', borderRadius: 12,
    padding: '24px 26px', display: 'flex', flexDirection: 'column', gap: 12,
  }}>
    <div style={{
      fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
      letterSpacing: '0.1em', textTransform: 'uppercase', color: '#A0452D',
    }}>{date}</div>
    <h3 style={{
      fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500,
      fontSize: 24, lineHeight: 1.2, color: '#333333', margin: 0,
      letterSpacing: '-0.005em',
    }}>{title}</h3>
    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#5C5C5C' }}>{meta}</div>
    {venueUrl && (
      <div style={{ marginTop: 4 }}>
        <a href={venueUrl} style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 500,
          color: '#4A90E2', textDecoration: 'underline', textUnderlineOffset: 3,
        }}>Hosted at {venueName}. Details →</a>
      </div>
    )}
  </article>
);

const ClassGrid = ({ onHosts }) => (
  <section style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 32px' }}>
    <SectionHeader kicker="Upcoming sessions" title="Sessions announced as they're scheduled.">
      TMSC runs sessions as local libraries, churches, and community organizations schedule them. If you'd like to attend, keep an eye on your local venue's calendar. If you'd like to host, we'd love to hear from you.
    </SectionHeader>
    <div style={{ marginTop: 8 }}>
      <Button onClick={onHosts}>For host venues</Button>
    </div>
  </section>
);

const HostBand = ({ onPricing, onContact }) => (
  <section style={{ background: '#F4B58E', padding: '80px 32px' }}>
    <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <div style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: '#A0452D', marginBottom: 16,
        }}>For host venues</div>
        <h2 style={{
          fontFamily: "'Fraunces', Georgia, serif", fontWeight: 400,
          fontSize: 40, lineHeight: 1.15, margin: 0, color: '#333333',
          letterSpacing: '-0.01em', maxWidth: 460,
        }}>Bring a session to your library, church, or senior community.</h2>
      </div>
      <div style={{ color: '#333333' }}>
        <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 0 }}>
          We bring the curriculum, the handouts, and a patient instructor. You provide the room and the audience. Sessions run 60–90 minutes.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={onContact}>Request a session</Button>
          <Button variant="tertiary" onClick={onPricing}>See pricing</Button>
        </div>
      </div>
    </div>
  </section>
);

const Footer = ({ onNav }) => (
  <footer style={{ background: '#FFFDF5', borderTop: '1px solid #E8E2D4', padding: '48px 32px 64px' }}>
    <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 48 }}>
      <div>
        <Logo />
        <p style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.6,
          color: '#5C5C5C', marginTop: 18, maxWidth: 340,
        }}>In-person tech education for Cherokee County. Hosted at libraries, churches, and community centers.</p>
      </div>
      <div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#333333', marginBottom: 14 }}>Explore</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[['classes','Classes'],['about','About'],['hosts','For hosts'],['pricing','Pricing'],['contact','Contact']].map(([k, label]) => (
            <li key={k}><a href="#" onClick={e => { e.preventDefault(); onNav && onNav(k); }} style={{ color: '#4A90E2', fontSize: 15 }}>{label}</a></li>
          ))}
        </ul>
      </div>
      <div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#333333', marginBottom: 14 }}>Contact</div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#333333', lineHeight: 1.6 }}>
          learn@techmadesimplecherokee.com<br/>
          <span style={{ color: '#8A8A8A' }}>Replies within a day or two.</span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Hero, PhotoPanel, ClassCard, ClassGrid, HostBand, Footer });