// Pricing + Hosts pages — structured for venue decision-makers.

const PriceRow = ({ label, price, note }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
    gap: 24, padding: '16px 0', borderBottom: '1px solid #E8E2D4',
  }}>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, fontWeight: 500, color: '#333' }}>{label}</div>
      {note && <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#5C5C5C', marginTop: 4, lineHeight: 1.5 }}>{note}</div>}
    </div>
    <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 22, fontWeight: 500, color: '#A0452D', letterSpacing: '-0.005em', whiteSpace: 'nowrap' }}>{price}</div>
  </div>
);

const PriceTier = ({ kicker, title, lede, children, tone = 'cream' }) => {
  const bg = tone === 'apricot' ? '#F4B58E' : '#FFFFFF';
  const border = tone === 'apricot' ? 'transparent' : '#E8E2D4';
  return (
    <div style={{
      background: bg, border: `1px solid ${border}`, borderRadius: 12,
      padding: '32px 36px',
    }}>
      <div style={{
        fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: '#A0452D', marginBottom: 10,
      }}>{kicker}</div>
      <h3 style={{
        fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500,
        fontSize: 28, lineHeight: 1.2, color: '#333', margin: 0,
        letterSpacing: '-0.005em', marginBottom: 8,
      }}>{title}</h3>
      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.6, color: '#5C5C5C', marginTop: 0, marginBottom: 20, maxWidth: 480 }}>{lede}</p>
      <div>{children}</div>
    </div>
  );
};

const PricingView = ({ onContact }) => (
  <section style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 32px 96px' }}>
    <SectionHeader kicker="Pricing" title="What a session costs.">
      Every session is taught in person by a patient, experienced instructor. We bring the curriculum and printed handouts. You bring the room and the audience.
    </SectionHeader>

    <div style={{ display: 'grid', gap: 24, marginTop: 40 }}>
      <PriceTier
        kicker="Community Sessions"
        title="A single session at a library, church, or community center."
        lede="One class, one topic, one venue. Most hosts start here.">
        <PriceRow label="Standard rate" price="$200–$350" note="Per session. Range reflects travel and group size." />
        <PriceRow label="Pilot rate for first-time venues" price="$150" note="One session, to see if the format fits your audience." />
      </PriceTier>

      <PriceTier
        tone="apricot"
        kicker="Facility Series"
        title="Recurring sessions for senior living and 55+ communities."
        lede="Two sessions a month over a three-month commitment. Groups of about 20.">
        <PriceRow label="Standard rate" price="$750 / month" note="2 sessions per month · 3-month commitment · approx. 20 residents per session." />
        <PriceRow label="Pilot rate" price="$200" note="A single visit, so residents and staff can see the format before committing." />
      </PriceTier>

      <PriceTier
        kicker="Corporate"
        title="Onsite workshops for employers."
        lede="Team training for employees who want plain-language clarity on the devices they already use.">
        <PriceRow label="Half-day workshop" price="$1,750" note="Up to 4 hours onsite. One topic or a short arc." />
        <PriceRow label="Full-day workshop" price="$3,000" note="Up to 8 hours onsite. Multiple topics, or one topic in depth." />
        <PriceRow label="Custom curriculum" price="$500–$1,000" note="Add-on. Curriculum tailored to your team's tools and questions." />
        <PriceRow label="Series rate" price="$1,200 / session" note="3-session minimum. Returning cadence for ongoing training." />
      </PriceTier>
    </div>

    <div style={{
      marginTop: 48, padding: '28px 32px', border: '1px solid #E8E2D4',
      borderRadius: 12, background: '#FFFDF5', maxWidth: 720,
    }}>
      <h3 style={{ fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500, fontSize: 24, margin: 0, marginBottom: 8, color: '#333' }}>Not sure which fits?</h3>
      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.65, color: '#333', marginTop: 0, marginBottom: 18 }}>
        Tell us about your venue and the audience you have in mind. We'll recommend a format and a rate in a short reply.
      </p>
      <Button onClick={onContact}>Email us about a session</Button>
    </div>
  </section>
);

const HostsView = ({ onPricing, onContact }) => (
  <section style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 32px 96px' }}>
    <SectionHeader kicker="For hosts" title="Bring a session to your venue.">
      Most hosts book a 90-minute community session, or commit to a monthly series at a senior community. We handle curriculum, flyers, and the instructor.
    </SectionHeader>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 40 }}>
      <div>
        <h3 style={{ fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500, fontSize: 26, lineHeight: 1.2, margin: 0, marginBottom: 12, color: '#333' }}>What you provide</h3>
        <ul style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.7, color: '#333', paddingLeft: 20, margin: 0 }}>
          <li>A room with chairs and working Wi-Fi</li>
          <li>A screen or projector, if you have one</li>
          <li>The audience. We help with promotion.</li>
        </ul>
      </div>
      <div>
        <h3 style={{ fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500, fontSize: 26, lineHeight: 1.2, margin: 0, marginBottom: 12, color: '#333' }}>What we provide</h3>
        <ul style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.7, color: '#333', paddingLeft: 20, margin: 0 }}>
          <li>A patient, experienced instructor</li>
          <li>Printed one-page guides for every attendee</li>
          <li>A promotional flyer tailored to your venue</li>
        </ul>
      </div>
    </div>

    <div style={{
      marginTop: 56, padding: '36px 40px', background: '#F4B58E',
      borderRadius: 12, display: 'grid', gridTemplateColumns: '1.3fr 1fr',
      gap: 32, alignItems: 'center',
    }}>
      <div>
        <h3 style={{ fontFamily: "'Fraunces', Georgia, serif", fontWeight: 500, fontSize: 28, lineHeight: 1.2, margin: 0, marginBottom: 10, color: '#333' }}>A pilot rate for first-time venues.</h3>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.6, color: '#333', margin: 0 }}>
          $150 for a single community session, so you can see the format before committing to more.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
        <Button onClick={onContact}>Request a session</Button>
        <Button variant="tertiary" onClick={onPricing}>See full pricing</Button>
      </div>
    </div>
  </section>
);

Object.assign(window, { PricingView, HostsView, PriceRow, PriceTier });