/* 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, StampIllustration, SectionEyebrow, SectionHeading, HairlineRule,
   useIsMobile */

// ---------- How it works ----------
function HowItWorks() {
  const steps = [
    {
      n: '01',
      jp: '挑戦', en: 'Take the drill',
      body: 'Four-option multiple choice, one question at a time. No hints, no half-credit — same shape as the real test.',
    },
    {
      n: '02',
      jp: '判定', en: 'Get the verdict',
      body: 'A hanko stamp, a percentage, one line of insight on what you got wrong.',
    },
    {
      n: '03',
      jp: '改善', en: 'Improve your weaknesses',
      body: 'Junbi surfaces the patterns you keep missing and points you to the next drill that targets them.',
    },
  ];
  const isMobile = useIsMobile();
  return (
    <section id="how" style={{
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '64px 20px' : '120px 32px',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: isMobile ? 40 : 72, maxWidth: 720 }}>
          <SectionEyebrow>How it works</SectionEyebrow>
          <SectionHeading size={56}>Take the drill, read the verdict, fix the weak spots.</SectionHeading>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr',
          gap: isMobile ? 32 : 96,
          alignItems: 'center',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneFrame width={isMobile ? 260 : 340}>
              <ScreenExam />
            </PhoneFrame>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '52px 1fr' : '64px 1fr',
                gap: isMobile ? 16 : 24,
                padding: isMobile ? '24px 0' : '32px 0',
                borderTop: `1px solid ${BORDER}`,
                ...(i === steps.length - 1 ? { borderBottom: `1px solid ${BORDER}` } : {}),
              }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 4 }}>
                  <span style={{ font: `400 13px ${fSys}`, color: BROWN, letterSpacing: '0.18em' }}>{s.n}</span>
                  <span style={{ fontFamily: fJp, fontSize: isMobile ? 18 : 20, color: RED, fontWeight: 700, lineHeight: 1 }}>{s.jp}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <h3 style={{ font: `600 ${isMobile ? 21 : 26}px ${fSys}`, letterSpacing: '-0.015em', lineHeight: 1.15, margin: 0, color: INK }}>{s.en}</h3>
                  <p style={{ font: `400 ${isMobile ? 15 : 16}px ${fSys}`, lineHeight: 1.55, color: '#3a3733', margin: 0, maxWidth: 460 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- The hanko reveal ----------
function HankoReveal() {
  const isMobile = useIsMobile();
  const stampSize = isMobile ? 96 : 140;
  return (
    <section style={{
      background: PAPER_DEEP,
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '72px 20px' : '140px 32px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: isMobile ? 24 : 36 }}>
        <SectionEyebrow>The reward</SectionEyebrow>
        <h2 style={{
          fontWeight: 600,
          fontSize: 'clamp(40px, 11vw, 96px)',
          fontFamily: fSys,
          letterSpacing: '-0.03em', lineHeight: 0.98,
          margin: 0, color: INK, textWrap: 'balance', maxWidth: 920,
        }}>
          A single, satisfying<br/><span style={{ fontFamily: fJp, color: RED }}>合格</span>.
        </h2>
        <p style={{ font: `400 ${isMobile ? 16 : 20}px ${fSys}`, color: '#3a3733', lineHeight: 1.55, margin: 0, maxWidth: 640 }}>
          Pass a drill — and the red sumi-stamp meets the paper. Quiet, satisfying, earned. Each stamp settles into the notebook. The rarer ones leave a keepsake behind — small, lasting, yours from the moment they arrive.
        </p>
        <div style={{
          display: 'flex',
          gap: isMobile ? 20 : 64,
          marginTop: isMobile ? 12 : 24,
          alignItems: 'flex-start',
          flexWrap: 'wrap', justifyContent: 'center',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ transform: 'rotate(-6deg)' }}>
              <StampIllustration section="vocabulary" size={stampSize} />
            </div>
            <div style={{ fontFamily: fJp, fontSize: isMobile ? 18 : 22, fontWeight: 700, color: RED, marginTop: 8 }}>合格</div>
            <div style={{ font: `400 13px ${fSys}`, color: BROWN }}>Passed · 75% or above</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ transform: 'rotate(5deg)', filter: 'grayscale(1)', opacity: 0.7 }}>
              <StampIllustration section="grammar" size={stampSize} />
            </div>
            <div style={{ fontFamily: fJp, fontSize: isMobile ? 18 : 22, fontWeight: 700, color: BROWN, marginTop: 8 }}>不合格</div>
            <div style={{ font: `400 13px ${fSys}`, color: BROWN }}>Below 75% · drill again</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ transform: 'rotate(-4deg)' }}>
              <StampIllustration section="reading" size={stampSize} />
            </div>
            <div style={{ fontFamily: fJp, fontSize: isMobile ? 18 : 22, fontWeight: 700, color: RED, marginTop: 8 }}>合格</div>
            <div style={{ font: `400 13px ${fSys}`, color: BROWN }}>Reading · 92%</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Quote / Calm pitch ----------
function CalmPitch() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '64px 20px' : '120px 32px',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 32 : 64,
        alignItems: 'center',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <SectionEyebrow>The vibe</SectionEyebrow>
          <SectionHeading size={56}>A study notebook, not a slot machine.</SectionHeading>
          <p style={{ font: `400 18px ${fSys}`, lineHeight: 1.6, color: '#3a3733', margin: 0, maxWidth: 540 }}>
            Junbi is built around the parts of studying that actually move the needle — and the small pleasures that make showing up worth it. Four ideas:
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['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: '180px 1fr', gap: 24, paddingTop: 12, 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 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
          <img src="assets/illustration-image-2.png" alt="" style={{ width: '100%', maxWidth: 460, mixBlendMode: 'multiply' }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, HankoReveal, CalmPitch });