/* Build — three rows alternating left/right (text + phone preview).
   Edit the `groups` array to change the list of features. */

const Build = () => {
  const { StarSpark, useViewport } = window.AAS;
  const { isSm, isMd } = useViewport();

  const groups = [
    {
      title:'Deliver your program',
      icon:'01',
      items:[
        'Structured programs with daily tasks e.g. 1-month resets, 3-month transformations, whatever shape your work takes',
        'Video & audio content library with ALL OF YOUR OWN CONTENT (videos, meditations, podcasts etc) - allowing you to charge your audience for access to your best work',
        'In-app journal, mood tracker and other features to enhance the user experience',
      ],
      preview:<window.PhoneScreens.ScreenLibrary accent="#EBA8F2" />,
    },
    {
      title:'Show up live, on your terms',
      icon:'02',
      items:[
        'Host group seminars or 1-on-1 video calls live inside the app',
        'No more handing out your personal WhatsApp or dealing with annoying Zoom links',
      ],
      preview:<window.PhoneScreens.ScreenCall accent="#EBA8F2" />,
    },
    {
      title:'Book calls & take payments',
      icon:'03',
      items:[
        'Instant bookings for clients based on your chosen availability. No more back-and-forth DMs',
        'Take payments in-app quijcly & easily. Bye bye messy payment links & bank transfers that hurt conversions',
        'Built-in scheduling & calendar integration, with automatic reminders so that clients actually show up',
      ],
      preview:<window.PhoneScreens.ScreenBooking accent="#EBA8F2" />,
    },
    {
      title:'Build your community',
      icon:'04',
      items:[
        'A private space for your members to connect, share wins, and keep each other accountable',
        'Reactions, comments, DMs',
        'Threads organised by program, week, topic - you name it',
      ],
      preview:<window.PhoneScreens.ScreenCommunity accent="#EBA8F2" />,
    },
  ];

  return (
    <section id="build">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">WHAT YOU CAN BUILD</div>
          <h2>Pick & mix the features <span className="it">that fit your offer</span> <span style={{color:'#E2B93B'}}>✨</span></h2>
        </div>

        <div className="build-rows">
          {groups.map((g, i) => (
            <div key={i} className={`build-row${i % 2 === 1 ? ' is-reversed' : ''}`}>
              <div className="build-text">
                <div className="build-text-head">
                  <span className="build-num">{g.icon}</span>
                  <h3 className="build-title">{g.title}</h3>
                </div>
                <div className="build-list">
                  {g.items.map((t, j) => (
                    <div key={j} className="build-item">
                      <span className="build-bullet"/>
                      <span className="build-item-text">{t}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="build-preview">
                <window.PhoneFrame w={isSm ? 180 : isMd ? 200 : 230} tilt={i % 2 === 0 ? -3 : 3}>{g.preview}</window.PhoneFrame>
                <span className="build-preview-spark"><StarSpark size={14}/></span>
              </div>
            </div>
          ))}
        </div>

        <div className="build-callout">
          <span className="build-callout-em">…and whatever else your dream app needs.</span>
          <div className="build-callout-sub">This is YOUR app. You choose the vibe.</div>
          <ul className="build-callout-list">
            <li><span className="build-callout-key">🎨 Your branding:</span> logo, name, colors</li>
            <li><span className="build-callout-key">💅 Your design:</span> soft & spiritual, bold & punchy, minimal & clean… you decide</li>
            <li><span className="build-callout-key">💬 Your tone of voice:</span> every button, notification & email written in your own words</li>
          </ul>
          <div className="build-callout-foot">Tell us your vision on the call. If you can dream it, we can build it.</div>
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Build = Build;