// Page below the hero — a thinner version of the original site.
// Goal: the montage carries the weight; this is just enough to support it.

const ReframeStrip = () => (
  <section style={{
    background: '#2A7A6E',
    padding: '72px 32px',
  }}>
    <div style={{ maxWidth: 920, margin: '0 auto' }}>
      <div style={{
        fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: '#F4B58E', marginBottom: 18,
      }}>What we teach</div>
      <div style={{
        fontFamily: "'Fraunces', Georgia, serif", fontWeight: 400,
        fontSize: 38, lineHeight: 1.2, letterSpacing: '-0.01em',
        color: '#FFFDF5', textWrap: 'balance', maxWidth: 760,
      }}>
        Your phone is not slow. It's full. The settings app is just a list. Wi-Fi is just a signal in the air. We explain the things you were never shown.
      </div>
    </div>
  </section>
);

const SimpleClassList = () => {
  const topics = [
    { title: "Your phone is not slow. It's full.", minutes: 60 },
    { title: "What the settings app is actually for", minutes: 90 },
    { title: "Email, without the panic", minutes: 75 },
    { title: "Wi-Fi at home: what it is, what it costs", minutes: 90 },
  ];
  return (
    <section style={{ maxWidth: 1120, margin: '0 auto', padding: '88px 32px 56px' }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: '#A0452D', marginBottom: 12,
        }}>Classes</div>
        <h2 style={{
          fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500,
          fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.005em',
          color: '#333333', margin: 0, maxWidth: 680,
        }}>Single sessions. One topic each. 60 to 90 minutes.</h2>
      </div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        borderTop: '1px solid #E8E2D4',
      }}>
        {topics.map((t, i) => (
          <li key={i} style={{
            display: 'grid', gridTemplateColumns: '80px 1fr auto', alignItems: 'center',
            padding: '22px 4px', borderBottom: '1px solid #E8E2D4', gap: 24,
          }}>
            <div style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600,
              letterSpacing: '0.08em', color: '#A0452D',
            }}>{t.minutes} min</div>
            <div style={{
              fontFamily: "'Fraunces', Georgia, serif", fontSize: 22, fontWeight: 500,
              color: '#333333',
            }}>{t.title}</div>
            <a href="#" style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 500,
              color: '#4A90E2', textDecoration: 'underline', textUnderlineOffset: 3,
            }}>What's covered →</a>
          </li>
        ))}
      </ul>
    </section>
  );
};

const HostBandSlim = () => (
  <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: 38, lineHeight: 1.15, margin: 0, color: '#333333',
          letterSpacing: '-0.01em', maxWidth: 460,
        }}>Bring a session to your library, church, or community center.</h2>
      </div>
      <div style={{ color: '#333333' }}>
        <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 0, fontFamily: "'DM Sans', sans-serif" }}>
          We bring the curriculum, the handouts, and a patient instructor.
          You provide the room and the audience.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button>Request a session</Button>
          <Button variant="tertiary">See pricing</Button>
        </div>
      </div>
    </div>
  </section>
);

const SiteFooter = () => (
  <footer style={{ background: '#FFFDF5', borderTop: '1px solid #E8E2D4', padding: '48px 32px 64px' }}>
    <div style={{
      maxWidth: 1120, margin: '0 auto',
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      gap: 32, flexWrap: 'wrap',
    }}>
      <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 style={{
        fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#333333',
        textAlign: 'right',
      }}>
        michael@techuntangled.co<br/>
        <span style={{ color: '#8A8A8A' }}>Replies within a day or two.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { ReframeStrip, SimpleClassList, HostBandSlim, SiteFooter });