// Workshop landing — sections 5-7: Hosts, FAQ, Final CTA, Footer.

const HostCard = ({ initials, name, role, bio, photoSrc, special }) => (
  <Reveal className={`host-card ${special ? 'special' : ''}`}>
    <div className="host-photo" data-placeholder={special ? 'special-guest' : (photoSrc ? undefined : 'host-photo')}>
      {special ? (
        <div className="center">
          <div className="special-silhouette"><Icon name="user-circle" size={48} stroke={1.5}/></div>
          <div className="special-badge"><Icon name="sparkles" size={12} stroke={2}/> Special Guest</div>
        </div>
      ) : photoSrc ? (
        <img className="host-img" src={photoSrc} alt={name} loading="lazy" decoding="async"/>
      ) : (
        <>
          <div className="placeholder-ring">{initials}</div>
          <div className="photo-meta">Photo placeholder</div>
        </>
      )}
    </div>
    <div className="host-body">
      <div className="host-name">{name}</div>
      <div className="host-role">{role}</div>
      <div className="host-bio">
        {bio.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </div>
  </Reveal>
);

const Hosts = () => (
  <section className="section hosts" data-screen-label="05 Hosts">
    <div className="container">
      <Reveal>
        <div className="section-label">Meet your hosts</div>
        <h2 className="section-title">Meet your hosts</h2>
        <div className="hosts-intro">
          <p>You&rsquo;ll be guided by Gemma and Cliff from The Smart Business System, who bring a mix of business growth, coaching, community support and practical AI implementation.</p>
          <p>They&rsquo;ll keep the session plain-English, practical and focused on the real tasks that slow business owners down: emails, proposals, content, admin, follow-ups and planning.</p>
        </div>
      </Reveal>

      <div className="hosts-grid">
        <HostCard
          photoSrc="assets/cliff-walker.png"
          initials="CW"
          name="Cliff Walker"
          role="Founder & Head of Coaching"
          bio={[
            'Cliff brings more than 30 years of business experience, having coached entrepreneurs, built sales networks across four continents and helped business owners turn ideas into action.',
            'In this workshop, he\u2019ll show how AI can be used on real business tasks in a practical, plain-English way.',
          ]}
        />
        <HostCard
          photoSrc="assets/gemma-outram.png"
          initials="GO"
          name="Gem Outram"
          role="Founder & Head of Community"
          bio={[
            'Gem is a business growth coach and award-winning entrepreneur who has built a multi-million-pound, relationship-led business.',
            'She helps business owners work smarter, reduce overwhelm and use AI in ways that feel practical, useful and human.',
          ]}
        />
        <HostCard
          special
          name="Special Guest"
          role="Successful business owner and growth leader"
          bio={[
            'You\u2019ll also hear from a highly successful business owner who has built and scaled businesses at a serious level.',
            'They\u2019ll share what small business owners should be paying attention to as AI changes the way we work.',
          ]}
        />
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    { q: 'Is this actually worth 45 minutes of my time?',
      a: ['That is exactly what we are designing it for.',
          'This workshop is for busy business owners, so we will keep it practical, focused and easy to follow. You will see examples using everyday tasks like emails, proposals, content, admin and follow-ups, so you can quickly decide what would be useful in your own business.'] },
    { q: 'I\u2019ve tried ChatGPT before and the results were generic. Will this help?',
      a: ['Yes. That is one of the main reasons this workshop exists.',
          'Most people get generic results because they ask AI generic questions. We will show you how to give AI better context, clearer instructions and more useful starting points, so the output feels more specific to your business.'] },
    { q: 'Will AI make my emails and content sound robotic?',
      a: ['Not if you use it properly.',
          'The goal is not to replace your voice. It is to help you get your ideas out faster, then shape the result so it still sounds like you. This is especially important for coaches, consultants, freelancers and service providers, where trust and personality matter.'] },
    { q: 'Will I leave with something I can actually use?',
      a: ['Yes. The aim is for you to leave with a clearer idea of where AI can save you time first, plus practical examples you can adapt for emails, proposals, content, follow-ups and planning.',
          'You will not need to rebuild your whole business. Start with the work that already slows you down.'] },
    { q: 'Is this going to be a sales pitch?',
      a: ['The workshop is designed to be useful on its own.',
          'At the end, we will show you how The Smart Business System can help you put this into practice with tools, guidance and support. But the main session is focused on practical examples you can understand and use.'] },
    { q: 'What if I can\u2019t make the live workshop?',
      a: ['Register anyway and we\u2019ll send you the recording afterwards, so you can watch it when it suits you.',
          'That said, we recommend joining live if you can. You\u2019ll get the most value from seeing the examples in real time, and there will be time to ask questions during the session.'] },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq-section" data-screen-label="06 FAQ">
      <div className="container-narrow">
        <Reveal>
          <div className="section-label">FAQ</div>
          <h2 className="section-title">A few things you might be wondering</h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="faq-wrap">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" type="button" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="icn"><Icon name="chevron-down" size={20} stroke={2.25}/></span>
                </button>
                <div className="faq-a">
                  {it.a.map((p, idx) => <p key={idx}>{p}</p>)}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section id="final-cta" className="final" data-screen-label="07 Final CTA">
    <div className="container final-inner">
      <Reveal>
        <div className="eyebrow eyebrow-on-dark">
          <span className="dot"></span>
          <span>Free live workshop · 45 minutes</span>
        </div>
        <h2>Ready to see how AI can take some of the work off your plate?</h2>
        <p className="body">
          Join the free live workshop and see practical ways to use AI for emails, admin, proposals, content, follow-ups and planning.
        </p>
        <button className="btn btn-primary btn-lg" onClick={scrollToForm}>
          Save my free place <Icon name="arrow-right" size={18} stroke={2.25}/>
        </button>
        <div className="support">
          <span>Choose your session, get the joining link, and we&rsquo;ll see you there.</span>
        </div>
      </Reveal>
    </div>
    <div className="final-footer">
      <div className="final-footer-divider"></div>
      <div className="container final-footer-inner">
        <img className="logo" src="assets/logo-on-dark.png" alt="The Smart Business System"/>
        <div className="trust">A practical workshop from The Smart Business System team.</div>
        <div className="copy">&copy; 2026 The Smart Business System. All rights reserved.</div>
      </div>
    </div>
  </section>
);

const Footer = () => null;

Object.assign(window, { Hosts, FAQ, FinalCTA, Footer, HostCard });