/* global React,
   RED, PAPER, PAPER_DEEP, CARD, BORDER, TAN, BROWN, INK, SAGE, SAGE_PALE, HIGHLIGHT,
   fSys, fJp, daysUntilJLPT,
   Wordmark, AppStoreBadge, NotifyForm, ProtectedEmail, StampIllustration, SectionEyebrow, SectionHeading, HairlineRule,
   useIsMobile */

const { useState } = React;

// ---------- FAQ ----------
function FAQ() {
  const items = [
    { q: 'Is Junbi really free?', a: 'N5-level drills and one full mock exam per month are free. Pro (¥600/month or ¥4,800/year) unlocks unlimited mock exams and the Sakura and Cyber themes. More JLPT levels are on the way — see below.' },
    { q: 'What about N4–N1?', a: 'Junbi currently covers N5 only. N4–N1 are in the works. The plan is to roll them out one level at a time so each question bank gets the same care as N5 — no rushed content, no half-finished sections.' },
    { q: 'Where does the question content come from?', a: 'Every question is written in-house and reviewed by a certified Japanese language teacher before it ships. Items are calibrated against the publicly released JLPT past papers — we don\'t reproduce the past papers themselves; we build banks that match their shape, difficulty, and pacing.' },
    { q: 'Does it work offline?', a: 'Yes. Drills, exams, and your history are local-first. The app syncs in the background when you have signal — so you can practise on a commute, on a long flight, or anywhere without reliable Wi-Fi.' },
    { q: 'Android / Web?', a: 'iPhone first. Android and Web are on the roadmap, but I\'m not committing to a date until the build is real.' },
  ];
  const [open, setOpen] = useState(0);
  const isMobile = useIsMobile();
  return (
    <section id="faq" 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 ? 32 : 56, maxWidth: 720 }}>
          <SectionEyebrow>FAQ</SectionEyebrow>
          <SectionHeading size={56}>Everything you'd want to know first.</SectionHeading>
        </div>
        <div style={{ borderTop: `1px solid ${BORDER}` }}>
          {items.map((it, i) => {
            const on = open === i;
            return (
              <div key={i} style={{
                borderBottom: `1px solid ${BORDER}`,
              }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: isMobile ? '20px 0' : '24px 0',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  font: `600 ${isMobile ? 17 : 22}px ${fSys}`, color: INK, letterSpacing: '-0.01em',
                }}>
                  <span>{it.q}</span>
                  <span style={{ font: `400 ${isMobile ? 24 : 28}px ${fSys}`, color: BROWN, lineHeight: 1, flexShrink: 0 }}>
                    {on ? '−' : '+'}
                  </span>
                </button>
                {on && (
                  <div style={{
                    paddingBottom: isMobile ? 22 : 28,
                    paddingRight: isMobile ? 0 : 64,
                    font: `400 ${isMobile ? 15 : 17}px ${fSys}`, lineHeight: 1.6, color: '#3a3733',
                  }}>{it.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA() {
  const isMobile = useIsMobile();
  return (
    <section id="download" style={{
      background: PAPER_DEEP,
      borderBottom: `1px solid ${BORDER}`,
      padding: isMobile ? '72px 20px' : '140px 32px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* big watermark kanji */}
      <div style={{
        position: 'absolute',
        right: isMobile ? -60 : -40,
        top: isMobile ? -20 : -40,
        fontFamily: fJp,
        fontSize: isMobile ? 280 : 520,
        fontWeight: 700, color: RED,
        opacity: 0.06, lineHeight: 0.85, pointerEvents: 'none',
        userSelect: 'none',
      }}>準備</div>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: isMobile ? 22 : 32,
        position: 'relative', zIndex: 1,
      }}>
        <h2 style={{
          fontWeight: 600,
          fontSize: 'clamp(36px, 9vw, 88px)',
          fontFamily: fSys,
          letterSpacing: '-0.025em', lineHeight: 1.0,
          margin: 0, color: INK, textWrap: 'balance', maxWidth: 920,
        }}>
          {daysUntilJLPT()} days until the JLPT.<br/>
          <span style={{ color: RED }}>Be ready when N5 ships.</span>
        </h2>
        <p style={{ font: `400 ${isMobile ? 16 : 20}px ${fSys}`, color: '#3a3733', lineHeight: 1.55, margin: 0, maxWidth: 620 }}>
          Junbi launches on iPhone with N5 first. Drop your email and you'll be the first to know the moment it's ready.
        </p>
        <div style={{ marginTop: 8, width: '100%', maxWidth: 520 }}>
          <NotifyForm
            size="lg"
            caption="One email when N5 ships. No newsletter, no marketing."
          />
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      padding: isMobile ? '48px 20px 32px' : '64px 32px 48px',
      background: PAPER,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr',
        gap: isMobile ? 32 : 48,
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Wordmark size={36} />
            <span style={{ fontFamily: fJp, fontSize: 20, color: BROWN }}>準備</span>
          </div>
          <p style={{ font: `400 13px ${fSys}`, color: BROWN, lineHeight: 1.55, margin: 0, maxWidth: 320 }}>
            A calm study app for the Japanese-Language Proficiency Test.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ font: `600 13px ${fSys}`, color: INK, letterSpacing: '0.04em' }}>Links</div>
          {[
            ['How it works', '#how'],
            ['Sections', '#sections'],
            ['FAQ', '#faq'],
            ['Privacy', 'Privacy.html'],
          ].map(([label, href], j) => (
            <a key={j} href={href} style={{ font: `400 14px ${fSys}`, color: '#3a3733', textDecoration: 'none' }}>{label}</a>
          ))}
          <ProtectedEmail
            user="contact"
            domain="junbi.app"
            label="Contact"
            style={{ font: `400 14px ${fSys}`, color: '#3a3733', textDecoration: 'none' }}
          />
        </div>
      </div>
      <div style={{
        maxWidth: 1240, margin: isMobile ? '32px auto 0' : '48px auto 0',
        paddingTop: 24, borderTop: `1px solid ${BORDER}`,
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'center',
        gap: isMobile ? 8 : 0,
        font: `400 12px ${fSys}`, color: BROWN,
      }}>
        <span>© 2026 Junbi</span>
        <span>JLPT® is a registered mark of the Japan Foundation. Junbi is independent.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer });
