/* global React, PhoneFrame, ScreenDashboard, ScreenExam, ScreenResult, ScreenProgress, ScreenHistory,
   RED, PAPER, PAPER_DEEP, CARD, BORDER, TAN, BROWN, INK, SAGE, SAGE_PALE, HIGHLIGHT,
   fSys, fJp,
   Wordmark, AppStoreBadge, NotifyForm, StampIllustration, SectionEyebrow, SectionHeading, HairlineRule,
   useIsMobile */

// ---------- Hero ----------
function Hero() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      position: 'relative',
      borderBottom: `1px solid ${BORDER}`,
      overflow: 'hidden',
      padding: isMobile ? '40px 20px 0' : '72px 32px 0',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
        gap: isMobile ? 32 : 48,
        alignItems: 'center',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 20 : 28 }}>
          <h1 style={{
            fontWeight: 600,
            fontSize: 'clamp(40px, 9vw, 76px)',
            fontFamily: fSys,
            letterSpacing: '-0.025em', lineHeight: 1.0,
            margin: 0, color: INK, textWrap: 'balance',
          }}>
            Study calmly.<br/><span style={{ color: RED }}>Walk in ready.</span>
          </h1>
          <p style={{
            font: `400 ${isMobile ? 16 : 19}px ${fSys}`, lineHeight: 1.55, color: '#3a3733',
            margin: 0, maxWidth: 520,
          }}>
            Junbi is a calm, focused study app for the Japanese-Language Proficiency Test. Drill vocabulary, grammar, reading and listening at N5 — and earn a hanko stamp every time you pass.
          </p>
          <div style={{ marginTop: 4, maxWidth: 520 }}>
            <NotifyForm
              size="lg"
              caption="N5 launching soon · iPhone first · no spam, one email when it ships"
            />
          </div>
        </div>

        <div style={{
          position: 'relative',
          minHeight: isMobile ? 520 : 720,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          marginTop: isMobile ? 24 : 0,
        }}>
          {/* back phone — Progress */}
          <div style={{
            position: 'absolute',
            right: isMobile ? '8%' : -20, bottom: 0,
            transform: `rotate(4deg) translateY(${isMobile ? -16 : -30}px)`,
            opacity: 0.96,
          }}>
            <PhoneFrame width={isMobile ? 220 : 300}>
              <ScreenProgress />
            </PhoneFrame>
          </div>
          {/* front phone — Dashboard */}
          <div style={{
            position: 'relative', zIndex: 2,
            marginLeft: isMobile ? -80 : -120,
            marginBottom: isMobile ? -20 : -40,
            transform: 'rotate(-3deg)',
          }}>
            <PhoneFrame width={isMobile ? 250 : 340}>
              <ScreenDashboard />
            </PhoneFrame>
          </div>

        </div>
      </div>

    </section>
  );
}

// ---------- Pitch ----------
function Pitch() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      background: '#FFFFFF',
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '64px 20px 40px' : '120px 32px 64px',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 2.4fr',
        gap: isMobile ? 24 : 64,
        alignItems: 'flex-start',
      }}>
        <div style={{ display: 'flex', justifyContent: 'flex-start', paddingTop: 8 }}>
          <img src="assets/brand-mark.svg" alt="" style={{ width: isMobile ? 76 : 110, height: 'auto' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 24 : 32, maxWidth: 820 }}>
          <p style={{
            font: `400 ${isMobile ? 17 : 20}px ${fSys}`, lineHeight: 1.6, color: '#3a3733',
            margin: 0, maxWidth: 720,
          }}>
            Junbi works like a study notebook — calm, paced, and entirely yours. Pick a section, answer the questions, and finish with a single stamp: <span style={{ fontFamily: fJp, color: RED, fontWeight: 700 }}>合格</span> or <span style={{ fontFamily: fJp, color: BROWN, fontWeight: 700 }}>不合格</span>. Each session adds an honest record of your practice, a clearer sense of where to focus next, and a few quiet pleasures earned along the way.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0, width: '100%', maxWidth: 720 }}>
            {[
              ['Honest scoring', 'Pass means 75%. Fail means try again. No half-stars.'],
              ['Calm copy', 'Insights describe the situation, not your character.'],
              ['Real exam pacing', 'Section timers and question counts mirror the JLPT.'],
            ].map(([t, d], i) => (
              <li key={i} style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : '200px 1fr',
                gap: isMobile ? 6 : 24,
                padding: isMobile ? '16px 0' : '14px 0',
                borderTop: `1px solid ${BORDER}`,
              }}>
                <span style={{ font: `700 15px ${fSys}`, color: INK }}>{t}</span>
                <span style={{ font: `400 15px ${fSys}`, color: '#3a3733', lineHeight: 1.5 }}>{d}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div style={{
        marginTop: isMobile ? 56 : 120, textAlign: 'center',
        font: `400 12px ${fSys}`, color: BROWN, letterSpacing: '0.22em',
        textTransform: 'uppercase',
      }}>
        ( Why junbi )
      </div>
    </section>
  );
}

// ---------- Sections (the four exam areas) ----------
function ExamSections() {
  const sections = [
    { jp: '漢字・読み', en: 'Vocabulary', stamp: 'vocabulary',
      desc: 'Kanji readings, orthography, context clues. Spaced drills tuned to the words on actual past papers.' },
    { jp: '文法', en: 'Grammar', stamp: 'grammar',
      desc: 'Particles, conjugations, and the core sentence patterns at N5. Four-option multi-choice, paced to match the real exam.' },
    { jp: '読解', en: 'Reading', stamp: 'reading',
      desc: 'Short, mid, long passages — timed like the exam. Highlight as you go; the app remembers your marks.' },
    { jp: '聴解', en: 'Listening', stamp: 'listening',
      desc: 'Native-recorded prompts at three speeds. Replay once, like the real test, then commit to your answer.' },
  ];
  const isMobile = useIsMobile();
  return (
    <section id="sections" style={{
      background: PAPER_DEEP,
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '64px 20px' : '120px 32px',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: isMobile ? 32 : 56 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 640 }}>
            <SectionEyebrow>Four sections</SectionEyebrow>
            <SectionHeading size={56}>The shape of the exam, the shape of the app.</SectionHeading>
          </div>
          <p style={{ font: `400 ${isMobile ? 15 : 17}px ${fSys}`, color: '#3a3733', lineHeight: 1.55, margin: 0, maxWidth: 380 }}>
            Junbi mirrors the four sections of the JLPT one-to-one. Each gets its own hanko stamp, its own pacing, and its own honest pass mark.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 1, background: BORDER, border: `1px solid ${BORDER}`, borderRadius: 16, overflow: 'hidden' }}>
          {sections.map((s, i) => (
            <div key={i} style={{
              background: PAPER,
              padding: isMobile ? '28px 22px' : '40px 36px',
              display: 'flex', flexDirection: 'column', gap: 18,
              minHeight: isMobile ? 0 : 280,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24 }}>
                <div>
                  <div style={{ fontFamily: fJp, fontSize: isMobile ? 24 : 30, fontWeight: 700, color: INK, lineHeight: 1 }}>{s.jp}</div>
                  <div style={{ font: `400 ${isMobile ? 14 : 16}px ${fSys}`, color: BROWN, marginTop: 8 }}>{s.en}</div>
                </div>
                <StampIllustration section={s.stamp} size={isMobile ? 64 : 88} />
              </div>
              <p style={{ font: `400 ${isMobile ? 15 : 16}px ${fSys}`, color: '#3a3733', lineHeight: 1.55, margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Pitch, ExamSections });