// EMA — Home page. Explains what Energy Makers Academy is.
// Sections: hero · why we exist · what is EMA · how it works ·
// the app · write real software · voices · CTA · footer.

const homeNavLinks = [
  ['THE KIT', 'EMA Kit.html'],
  ['THE APP', '#app'],
  ['CURRICULUM', '#curriculum'],
  ['IMPACT', '#voices'],
];

// ---------- hero ----------
function HomeHero() {
  return (
    <div style={{ background: ema.purple, padding: '56px 56px 64px', color: ema.white }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <EMAH1 display size={84} style={{ lineHeight: 1.02 }}>
            Learn<br />
            solar.<br />
            Build a<br />
            system.<br />
            <span style={{ color: ema.green }}>Power</span><br />
            <span style={{ color: ema.green }}>your life.</span>
          </EMAH1>
          <div style={{ display: 'flex', gap: 12, marginTop: 40, alignItems: 'center' }}>
            <EMAButton big href="EMA Kit.html">EXPLORE THE KIT</EMAButton>
            <EMAButton primary={false} onPurple big href="#app">SEE THE APP</EMAButton>
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 56 }}>
            {[['93%', 'Gained new energy skills'], ['60%', 'Got jobs or started a business'], ['KES 55,000', 'For the complete kit']].map(([n, l]) =>
            <div key={l}>
                <div className="ema-subhead" style={{ font: `700 44px/1 ${ema.body}`, color: ema.green, letterSpacing: '0.01em' }}>{n}</div>
                <div style={{ marginTop: 8, font: `400 12px/1.4 ${ema.body}`, color: ema.whiteSoft, maxWidth: 140 }}>{l}</div>
              </div>
            )}
          </div>
        </div>
        <div style={{ borderRadius: 14, overflow: 'hidden', aspectRatio: '4/5' }}>
          <img
            src={window.__resources?.homeCohort || "assets/home-cohort.jpg"}
            alt="Two students outdoors wiring a solar panel to the EMA Power Box, one taking notes"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </div>
    </div>
  );
}

// ---------- hero (stacked wordmark variant — Home Stacked.html) ----------
// The stacked lockup (assets/logo-stacked*.svg) is generated verbatim from
// logo-wordmark.svg — the three words sliced by geometry and restacked, so
// the triple-bar E keeps its exact drawn proportions and the whole mark
// scales as one image.
function StackedWordmark({ width = 520 }) {
  return (
    <img
      src={window.__resources?.logoStackedWhite || "assets/logo-stacked-white.svg"}
      alt="Energy Makers Academy"
      style={{ width, maxWidth: '100%', height: 'auto', display: 'block' }}
    />
  );
}

function HomeHeroStacked() {
  return (
    <div style={{ background: ema.purple, padding: '56px 56px 64px', color: ema.white }}>
      <div className="hero-sk-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
        <div className="hero-sk-left">
          <div className="hero-sk-copy">
            <h1 className="ema-subhead" style={{ margin: 0, font: `700 56px/1.08 ${ema.body}`, letterSpacing: '0.01em', color: ema.white, maxWidth: 640 }}>
              A solar engineering school, in a box.
            </h1>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, alignItems: 'center' }}>
              <EMAButton big href="EMA Kit.html">EXPLORE THE KIT</EMAButton>
              <EMAButton primary={false} onPurple big href="#app">SEE THE APP</EMAButton>
            </div>
            <div style={{ display: 'flex', gap: 28, marginTop: 56 }}>
              {[['93%', 'Gained new energy skills'], ['60%', 'Got jobs or started a business'], ['KES 55,000', 'For the complete kit']].map(([n, l]) =>
              <div key={l}>
                  <div className="ema-subhead" style={{ font: `700 44px/1 ${ema.body}`, color: ema.green, letterSpacing: '0.01em' }}>{n}</div>
                  <div style={{ marginTop: 8, font: `400 12px/1.4 ${ema.body}`, color: ema.whiteSoft, maxWidth: 140 }}>{l}</div>
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="hero-sk-media" style={{ borderRadius: 14, overflow: 'hidden', aspectRatio: '4/5' }}>
          <img
            src={window.__resources?.homeCohort || "assets/home-cohort.jpg"}
            alt="Two students outdoors wiring a solar panel to the EMA Power Box, one taking notes"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </div>
    </div>
  );
}

// ---------- why we exist ----------
// Moved to Archive.html (archive.jsx) — earmarked for the Impact page.


// ---------- what is EMA ----------
function HomeWhat() {
  return (
    <div style={{ background: ema.white, padding: '96px 56px' }}>
      <div style={{ marginBottom: 48 }}>
        <div>
          <EMAH2 size={56}>One programme, three parts.</EMAH2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {/* the kit */}
        <div style={{ background: ema.lavender, borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ borderRadius: 10, overflow: 'hidden', aspectRatio: '4/3', background: ema.white }}>
            <img src={window.__resources?.heroKit || "assets/hero-kit.jpg"} alt="The EMA Kit laid out"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div>
            <div className="ema-subhead" style={{ font: `700 22px/1.1 ${ema.body}`, color: ema.ink }}>The Kit</div>
            <p style={{ margin: '10px 0 0', font: `400 14px/1.5 ${ema.body}`, color: ema.inkSoft }}>
              A portable, off-grid electronics lab — solar panel, battery, Power Box, tools and
              150+ components. Lights and phone charging from day one.
            </p>
            <a href="EMA Kit.html" style={{ display: 'inline-block', marginTop: 12, font: `700 12px/1 ${ema.body}`, letterSpacing: '0.08em', color: ema.purpleDark, textDecoration: 'none' }}>→ SEE WHAT'S INSIDE</a>
          </div>
        </div>
        {/* the app */}
        <div style={{ background: ema.purple, borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 18, color: ema.white }}>
          <div style={{ borderRadius: 10, overflow: 'hidden', aspectRatio: '4/3', background: ema.purpleDeep, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 18 }}>
            <PhoneShell width={150}><AppLearnScreen /></PhoneShell>
          </div>
          <div>
            <div className="ema-subhead" style={{ font: `700 22px/1.1 ${ema.body}` }}>The App</div>
            <p style={{ margin: '10px 0 0', font: `400 14px/1.5 ${ema.body}`, color: ema.whiteSoft }}>
              Nine modules of lessons, videos and experiments delivered remotely — plus live
              control of your Power Box and a code editor, right on your phone.
            </p>
            <a href="#app" style={{ display: 'inline-block', marginTop: 12, font: `700 12px/1 ${ema.body}`, letterSpacing: '0.08em', color: ema.green, textDecoration: 'none' }}>→ TOUR THE APP</a>
          </div>
        </div>
        {/* the certificate */}
        <div style={{ background: ema.lavender, borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ borderRadius: 10, aspectRatio: '4/3', background: ema.white, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {/* certificate mock */}
            <div style={{ width: '72%', background: '#FFF', border: `1.5px solid ${ema.lavenderDeep}`, borderRadius: 6, padding: '16px 18px', boxShadow: '0 10px 24px rgba(70,61,115,0.18)', position: 'relative' }}>
              <EMALogo height={10} />
              <div className="ema-subhead" style={{ marginTop: 12, font: `700 13px/1.2 ${ema.body}`, color: ema.ink }}>Certificate of Completion</div>
              <div style={{ marginTop: 8, height: 5, width: '70%', borderRadius: 3, background: ema.lavender }} />
              <div style={{ marginTop: 5, height: 5, width: '46%', borderRadius: 3, background: ema.lavender }} />
              <div style={{ marginTop: 12, font: `500 8px/1.4 ${ema.body}`, color: ema.inkSoft, letterSpacing: '0.06em' }}>AWARDED WITH PARTNER UNIVERSITIES</div>
              <div style={{ position: 'absolute', right: 14, bottom: 14, width: 26, height: 26, borderRadius: '50%', background: ema.green, border: `2px solid ${ema.purpleDark}` }} />
            </div>
          </div>
          <div>
            <div className="ema-subhead" style={{ font: `700 22px/1.1 ${ema.body}`, color: ema.ink }}>The Certificate</div>
            <p style={{ margin: '10px 0 0', font: `400 14px/1.5 ${ema.body}`, color: ema.inkSoft }}>
              Finish the programme and earn a certificate issued with partner universities —
              proof of real, hands-on solar engineering skills employers can trust.
            </p>
            <a href="#curriculum" style={{ display: 'inline-block', marginTop: 12, font: `700 12px/1 ${ema.body}`, letterSpacing: '0.08em', color: ema.purpleDark, textDecoration: 'none' }}>→ WHAT YOU'LL COMPLETE</a>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- how it works ----------
function HomeHow() {
  const steps = [
    ['1', 'Get your kit', 'Reserve a kit and it ships with everything inside — panel, Power Box, tools, components and manual.'],
    ['2', 'Learn on your phone', 'Work through nine modules of theory and practice in the app, with coordinator support on WhatsApp.'],
    ['3', 'Build and code', 'Wire real circuits, probe real signals, then write code and run it on your own hardware.'],
    ['4', 'Get certified', 'Submit your final project — your own charge controller — and earn a university-backed certificate.'],
  ];
  return (
    <div style={{ background: ema.lavender, padding: '96px 56px' }}>
      <div style={{ marginBottom: 56 }}>
        <EMAEyebrow>HOW IT WORKS</EMAEyebrow>
        <div style={{ marginTop: 14 }}>
          <EMAH2 size={56}>Theory + practice, at your own pace.</EMAH2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {steps.map(([n, t, d]) => (
          <div key={n} style={{ background: ema.white, borderRadius: 16, padding: 24 }}>
            <div style={{
              width: 44, height: 44, borderRadius: '50%', background: ema.purple, color: ema.white,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: `700 20px/1 ${ema.display}`,
            }}>{n}</div>
            <div className="ema-subhead" style={{ marginTop: 20, font: `700 19px/1.15 ${ema.body}`, color: ema.ink }}>{t}</div>
            <p style={{ margin: '10px 0 0', font: `400 13.5px/1.5 ${ema.body}`, color: ema.inkSoft }}>{d}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- the app ----------
function HomeApp() {
  const screens = [
    { t: 'Learn', d: 'Nine modules of lessons, videos and hands-on experiments — synced to your kit.', s: <AppLearnScreen />, dark: false },
    { t: 'Explore', d: 'Every schematic, PCB layout and component list from the kit — zoomable, searchable, in your pocket.', img: window.__resources?.appPcbViewer || 'assets/app-pcb-viewer.png', alt: 'EMA app — PCB explorer with component reference table' },
    { t: 'Code', d: 'A real development environment on your phone. Snap blocks together, tap run, watch your hardware obey.', img: window.__resources?.appCodeBlocks || 'assets/app-code-blocks.png', alt: 'EMA app — block code editor programming the Power Box' },
  ];
  return (
    <div id="app" style={{ background: ema.purple, padding: '96px 56px', color: ema.white }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 48, marginBottom: 64 }}>
        <div>
          <EMAEyebrow color={ema.green}>THE EMA APP</EMAEyebrow>
          <div style={{ marginTop: 14 }}>
            <EMAH2 size={56} onPurple>A classroom in your pocket.</EMAH2>
          </div>
        </div>
        <p style={{ margin: 0, maxWidth: 360, font: `400 15px/1.55 ${ema.body}`, color: ema.whiteSoft }}>
          The kit is the lab; the app is the textbook. It delivers the whole syllabus remotely
          and talks to your Power Box over Bluetooth — so lessons happen on real hardware, not
          just on screen.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 32, alignItems: 'start' }}>
        {screens.map((sc, i) => (
          <div key={sc.t} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, marginTop: i === 1 ? 36 : 0 }}>
            <PhoneShell width={270} dark={sc.dark} img={sc.img} alt={sc.alt}>{sc.s}</PhoneShell>
            <div style={{ textAlign: 'center', maxWidth: 300 }}>
              <div className="ema-subhead" style={{ font: `700 20px/1.1 ${ema.body}` }}>{sc.t}</div>
              <p style={{ margin: '8px 0 0', font: `400 13.5px/1.5 ${ema.body}`, color: ema.whiteSoft }}>{sc.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- CTA ----------
function HomeCTA() {
  const included = [
    'Power Box — charge controller, bench supply & battery',
    '15 W solar panel + 12 V LED lamp',
    'Full toolkit — iron, multimeter, hand tools',
    '150+ electronic components',
    '9-module curriculum in the EMA app',
    'University-backed certificate',
  ];
  return (
    <div style={{ background: ema.purpleDark, padding: '88px 56px', color: ema.white }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <EMAEyebrow color={ema.green}>BATCH 01 · SHIPPING Q3 2026</EMAEyebrow>
          <div style={{ marginTop: 18 }}>
            <EMAH1 size={64} onPurple>Become an energy maker.</EMAH1>
          </div>
          <p style={{ margin: '22px 0 0', maxWidth: 520, font: `400 16px/1.55 ${ema.body}`, color: ema.whiteSoft }}>
            One price, the whole programme — the lab, the lessons and the certificate.
            Reserve for yourself, your school or your programme, or get in touch about
            bringing EMA to your country.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <EMAButton big href="EMA Kit.html#reserve">RESERVE YOUR KIT</EMAButton>
            <EMAButton primary={false} onPurple big href="mailto:info@energymakers.academy">PARTNER WITH US</EMAButton>
          </div>
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.16)',
          borderRadius: 16, padding: 28,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
            <span className="ema-subhead" style={{ font: `700 44px/1 ${ema.body}`, letterSpacing: '0.01em', color: ema.green }}>KES 55,000</span>
            <span style={{ font: `400 14px/1.4 ${ema.body}`, color: ema.whiteSoft }}>· the complete kit</span>
          </div>
          <ul style={{ margin: '20px 0 0', padding: 0, listStyle: 'none' }}>
            {included.map((t) => (
              <li key={t} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '9px 0', borderTop: '1px solid rgba(255,255,255,0.14)',
                font: `400 14px/1.4 ${ema.body}`, color: ema.whiteSoft,
              }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: ema.green, color: ema.purpleDark, display: 'flex', alignItems: 'center', justifyContent: 'center', font: `600 11px/1 ${ema.body}`, flex: '0 0 auto', marginTop: 1 }}>✓</span>
                {t}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.14)', font: `500 13px/1.4 ${ema.body}`, color: ema.green }}>
            KES 0 to reserve — pay when your batch is confirmed.
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- page ----------
function HomePage() {
  const Hero = window.__HERO === 'stacked' ? HomeHeroStacked : HomeHero;
  return (
    <div data-screen-label="EMA · Home" style={{ background: '#FFF', color: ema.ink, fontFamily: ema.body }}>
      <EMANav tone="purple" links={homeNavLinks} />
      <Hero />
      <V1Marquee />
      <HomeWhat />
      <HomeHow />
      <V3TheAnswer />
      <HomeApp />
      <div id="curriculum"><V1Curriculum /></div>
      <div id="voices"><V2Voices /></div>
      <HomeCTA />
      <EMAFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);