// Workshop landing — sections 1-4: Hero, For-you, See-live, Walk-away.

const HERO_BULLETS = [
  { icon: 'file-text', t: 'Turn rough notes into a usable first draft for proposals, emails or client updates.' },
  { icon: 'mail',      t: 'Get on top of the inbox by sorting, prioritising and replying to emails in a fraction of the time.' },
  { icon: 'sparkles',  t: 'Spin one idea into a social post, an email and a short article without starting from scratch.' },
  { icon: 'message',   t: 'Use the simple prompts that make AI sound like you, not a robot.' },
];

const HeroBullets = () => (
  <div className="hero-bullets" aria-label="What you'll see in the workshop">
    <div className="hero-bullets-label">In 45 minutes you&rsquo;ll see how to&hellip;</div>
    <ul className="hero-bullets-list">
      {HERO_BULLETS.map((b, i) => (
        <li key={i} className="hero-bullet">
          <span className="hero-bullet-icn"><Icon name={b.icon} size={18} stroke={1.85}/></span>
          <span className="hero-bullet-t">{b.t}</span>
        </li>
      ))}
    </ul>
  </div>
);

const Hero = () => (
  <section id="hero" className="hero" data-screen-label="01 Hero">
    <div className="container">
      <div className="hero-top">
        <img className="logo" src="assets/logo-on-dark.png" alt="The Smart Business System"/>
      </div>

      <div className="hero-lede">
        <h1 className="hero-title hero-anim hero-anim-2">
          How to use AI to get through <span className="accent">the work that slows you down</span>
        </h1>
      </div>

      <div className="hero-grid">
        <div className="hero-left">
          <p className="hero-sub hero-anim hero-anim-3">
            A practical live workshop for business owners doing too much themselves, showing simple ways to use AI for emails, admin, proposals, content and planning without needing technical skills.
          </p>
          <div className="hero-anim hero-anim-5 hero-bullets-wrap desktop-only-bullets">
            <HeroBullets/>
          </div>
        </div>

        <div className="hero-right hero-anim hero-anim-4">
          <RegForm/>
        </div>
      </div>

      <div className="hero-anim hero-anim-5 hero-bullets-wrap mobile-only-bullets">
        <HeroBullets/>
      </div>
    </div>
  </section>
);

const ForYou = () => {
  const items = [
    'You\u2019re running the business mostly on your own, and everything seems to land on your shoulders.',
    'You know AI could help, but you\u2019re not sure where to start.',
    'You spend too much time on emails, proposals, follow-ups, admin or content.',
    'You want to be shown how it works, not sit through another high-level talk about the future of AI.',
  ];
  return (
    <section className="section for-you" data-screen-label="02 For you if">
      <div className="container">
        <div className="walk-split">
          <Reveal className="walk-copy">
          <div className="section-label">Who it&rsquo;s for</div>
            <h2 className="section-title">This workshop is for you if&hellip;</h2>
          </Reveal>
          <Reveal delay={120} className="walk-checklist">
            <ul className="walk-rows">
              {items.map((t, i) => (
                <li key={i} className="walk-row">
                  <span className="walk-check"><Icon name="check" size={14} stroke={2.75}/></span>
                  <div className="walk-row-t">{t}</div>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const SeeLive = () => {
  const cards = [
    { icon: 'file-text', t: 'Rough notes into a useful first draft', b: 'See how a few messy notes can become a clear first draft for a proposal, email or client update.' },
    { icon: 'mail',      t: 'Emails and follow-ups sorted faster',   b: 'Watch how AI can help you prioritise messages, draft replies and create clear next steps.' },
    { icon: 'sparkles',  t: 'One idea turned into useful content',   b: 'See how one rough idea can become a social post, email, short article or client message.' },
    { icon: 'message',   t: 'How to get better answers from AI',     b: 'Learn what to say to AI so the output feels more useful, more specific and more like you.' },
  ];
  return (
    <section className="section see-live" data-screen-label="03 See live">
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 760 }}>
            <div className="section-label">Live demos</div>
            <h2 className="section-title">What you&rsquo;ll see live</h2>
            <p className="section-intro">
              This is not a theory session. You&rsquo;ll see how AI can be used on real business tasks that already sit on your to-do list.
            </p>
          </div>
        </Reveal>
        <div className="see-grid">
          {cards.map((c, i) => (
            <Reveal key={c.t} delay={i * 80} className="see-card">
              <div className="see-card-icon"><Icon name={c.icon} size={26} stroke={1.75}/></div>
              <div className="see-card-num">Demo {i + 1}</div>
              <h3>{c.t}</h3>
              <p>{c.b}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const WalkAway = () => {
  const items = [
    'A clearer view of where your time is disappearing',
    'Examples you can reuse for emails, proposals, content and planning',
    'A simple way to give AI better context',
    'A practical next step for using AI without rebuilding your business',
  ];
  return (
    <section className="section walk" data-screen-label="04 Walk away">
      <div className="container">
        <Reveal>
          <div className="walk-head walk-head-centered">
            <div className="section-label">What you take home</div>
            <h2 className="section-title">What you&rsquo;ll walk away with</h2>
            <p className="section-intro">
              You&rsquo;ll 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.
            </p>
          </div>
        </Reveal>
        <Reveal delay={120} className="walk-checklist-card">
          <ul className="walk-checklist-rows">
            {items.map((t, i) => (
              <li key={i} className="walk-checklist-row">
                <span className="walk-checklist-check"><Icon name="check" size={14} stroke={2.75}/></span>
                <div className="walk-checklist-row-t">{t}</div>
              </li>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const items = [
    { initials: 'SM', name: 'Sarah M.', biz: 'Wellness Coach', photo: 'assets/testimonial-sarah.png',
      quote: 'I\u2019d tried using AI before, but I was mostly getting really generic answers. SBS helped me understand how to give it better context, so the output actually felt useful for my business.' },
    { initials: 'DH', name: 'David H.', biz: 'Business Owner', photo: 'assets/testimonial-david.png',
      quote: 'The advice was practical, not overwhelming. I came away with a few simple things I could actually use in my business straight away.' },
    { initials: 'MS', name: 'Mark S.', biz: 'HR Consultant', photo: 'assets/testimonial-mark.png',
      quote: 'I spend a lot of time writing follow-ups to candidates, internal updates and client emails. The Smart Business System showed me how to get these done much faster, and it\u2019s already saved me a lot of time.' },
  ];
  return (
    <section className="section testimonials" data-screen-label="05 Testimonials">
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 720 }}>
            <div className="section-label">Social proof</div>
            <h2 className="section-title">What business owners say</h2>
            <p className="section-intro">
              Practical feedback from business owners who have worked with The Smart Business System, joined our community or used our tools to make AI easier to apply in their business.
            </p>
          </div>
        </Reveal>
        <div className="testimonials-grid">
          {items.map((w, i) => (
            <Reveal key={i} delay={i * 100} className="testimonial-card">
              <div className="testimonial-stars" aria-label="Five stars">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={16} stroke={0} style={{ fill: '#FF8B7E' }}/>)}
              </div>
              <p className="testimonial-quote">&ldquo;{w.quote}&rdquo;</p>
              <div className="testimonial-attrib">
                {w.photo ? (
                  <img className="testimonial-photo" src={w.photo} alt={w.name} loading="lazy" decoding="async"/>
                ) : (
                  <div className="testimonial-avatar">{w.initials}</div>
                )}
                <div>
                  <div className="testimonial-name">{w.name}</div>
                  <div className="testimonial-biz">{w.biz}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, HeroBullets, ForYou, SeeLive, WalkAway, Testimonials });