// bottom.jsx — Trust · FAQ · CTA · Footer · 알림 · 모달

// ─── FAQ 아이템 (표현 전용) ───
function FaqRow({ q, a, open, onToggle, measure }) {
  const lines = a.split(/(?<=[다요][.!?])\s+/);
  return (
    <div className="faq-item" style={{ background: open ? "var(--primary-light)" : "var(--bg-page)" }}>
      <button onClick={onToggle} className="faq-q" tabIndex={measure ? -1 : 0} aria-hidden={measure ? true : undefined}>
        <span style={{ fontSize: 15, fontWeight: 700, color: "var(--text-1)" }}>{q}</span>
        <IconChevron size={20} style={{ color: "var(--text-3)", flexShrink: 0, transition: "transform .2s", transform: open ? "rotate(180deg)" : "none" }} />
      </button>
      {open && (
        <div style={{ padding: "0 20px 20px", fontSize: 14, color: "var(--text-2)", lineHeight: 1.6, wordBreak: "keep-all" }}>
          {lines.map((l, i) => <React.Fragment key={i}>{i > 0 && <br />}{l}</React.Fragment>)}
        </div>
      )}
    </div>
  );
}

// ─── FAQ 아이템 (상태 포함) ───
function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(typeof window !== "undefined" && window.__PRINT__ ? true : false);
  return <FaqRow q={q} a={a} open={open} onToggle={() => setOpen(!open)} />;
}

// ─── Trust & Recognition ───
function TrustSection() {
  return (
    <section style={{ padding: "80px 0", background: "#fff" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>TRUST &amp; RECOGNITION</p>
          <h2 className="sec-title">검증된 파트너, 공인된 기술력</h2>
          <p style={{ fontSize: 16, color: "var(--text-2)", margin: 0 }}>국내외 주요 출판사와 공식 파트너십을 맺고, 정부·글로벌 기관의 인정을 받았습니다.</p>
        </div>

        {/* Partners */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ textAlign: "center", marginBottom: 24 }}>
            <p className="eyebrow" style={{ color: "var(--primary-dark)", marginBottom: 4 }}>PARTNERS &amp; CONTENT PROVIDERS</p>
            <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0 }}>공식 파트너사 · 라이센스 콘텐츠 1,000권+</p>
          </div>
          <div className="partner-grid">
            {PARTNERS.map((p) => (
              <div key={p.name} className="partner-card">
                <img src={p.img} alt={p.name} style={{ width: 48, height: 48, objectFit: "contain", borderRadius: "var(--r-md)" }} onError={(e) => { e.target.style.display = "none"; }} />
                <span style={{ fontSize: 12, color: "var(--text-2)", textAlign: "center", fontWeight: 500 }}>{p.name}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Awards */}
        <div>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <p className="eyebrow" style={{ color: "var(--primary-dark)", marginBottom: 4 }}>AWARDS &amp; RECOGNITION</p>
            <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0 }}>국내외 공신력 있는 기관의 인정</p>
          </div>
          <div className="award-grid">
            <div className="award-box">
              <p style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 700, color: "var(--text-2)", margin: "0 0 16px" }}>
                <IconTrophy size={18} style={{ color: "var(--primary)" }} /> 정부 공식 수상
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  { t: "교육부장관상 대상", d: "제19회 에듀테크 우수기업 콘테스트", y: "2023" },
                  { t: "교육부장관 표창", d: "교육부에서 선정한 에듀테크 기업", y: "2023" },
                ].map((a) => (
                  <div key={a.t} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <img src="https://live-public.1hour.ai/assets/landing/moe-logo-full.jpg" alt="교육부" style={{ width: 40, height: 40, borderRadius: "var(--r-md)", objectFit: "contain" }} onError={(e) => { e.target.style.display = "none"; }} />
                    <div>
                      <p style={{ fontSize: 14, fontWeight: 700, color: "var(--text-1)", margin: 0 }}>{a.t}</p>
                      <p style={{ fontSize: 12, color: "var(--text-2)", margin: 0 }}>{a.d}</p>
                      <p className="tnum" style={{ fontSize: 12, color: "var(--text-3)", margin: "2px 0 0" }}>{a.y}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="award-box">
              <p style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 700, color: "var(--text-2)", margin: "0 0 16px" }}>
                <IconGlobe size={18} style={{ color: "var(--primary)" }} /> 글로벌 에듀테크 선정
              </p>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                <div style={{ display: "flex", gap: 4 }}>
                  <img src="https://live-public.1hour.ai/assets/landing/holoniq-2024.jpg" alt="HolonIQ 2024" style={{ width: 40, height: 40, borderRadius: "var(--r-md)", objectFit: "contain" }} onError={(e) => { e.target.style.display = "none"; }} />
                  <img src="https://live-public.1hour.ai/assets/landing/holoniq-2025.jpg" alt="HolonIQ 2025" style={{ width: 40, height: 40, borderRadius: "var(--r-md)", objectFit: "contain" }} onError={(e) => { e.target.style.display = "none"; }} />
                </div>
                <div>
                  <a href="https://www.hankyung.com/article/202511242169O" target="_blank" rel="noopener noreferrer" className="link-dark">2년 연속 동아시아 에듀테크 150 선정 ↗</a>
                  <p style={{ fontSize: 12, color: "var(--text-2)", margin: 0 }}>HolonIQ by QS</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const faqs = [
    { q: "원아워(1hour)는 어떤 서비스인가요?", a: "원아워는 영어 학원·학교를 위한 올인원 교육 플랫폼입니다. 수업 준비부터 과제 관리, AI 학습, 학습 리포트까지 모든 교육 업무를 하나의 플랫폼에서 처리할 수 있습니다." },
    { q: "원아워를 사용하면 얼마나 시간을 절약할 수 있나요?", a: "원아워 사용 학원 기준, 수업 준비 시간이 평균 70% 이상 절감됩니다. 과제 관리, 학습 리포트 생성 등 반복 업무가 자동화되어 원장님의 하루가 크게 달라집니다." },
    { q: "원아워의 해석 AI는 무엇인가요?", a: "해석 AI는 학생이 영어 문장을 한국어로 해석하면, AI가 의미 전달 정확도와 문법 세부 점수를 자동으로 평가해주는 기능입니다. 학생은 반복 학습을 통해 해석 실력을 키울 수 있습니다." },
    { q: "3일 무료체험은 어떻게 시작하나요?", a: "회원가입 후 바로 3일 무료체험이 시작됩니다. 별도의 결제 정보 입력 없이 모든 기능을 체험하실 수 있습니다." },
    { q: "원아워에서 사용할 수 있는 영어 교재·콘텐츠는 어떤 것이 있나요?", a: "NE빌드앤그로우, YBM, Efuture, A*List 등 주요 출판사의 공식 라이센스 콘텐츠 1,000권+을 원마켓에서 바로 사용하실 수 있습니다." },
    { q: "원아워의 AI 수업 생성 기능은 어떻게 작동하나요?", a: "교재나 외부 지문을 입력하면 AI가 자동으로 내신 변형 문제, 단어 테스트, 문법 문제 등을 생성합니다. 원클릭으로 200문제까지 자동 생성이 가능합니다." },
    { q: "어떤 기기에서 사용할 수 있나요?", a: "PC, 태블릿, 스마트폰 등 모든 기기에서 웹 브라우저를 통해 사용하실 수 있습니다. 별도의 앱 설치가 필요하지 않습니다." },
  ];
  // 모든 답변이 펼쳐진 상태의 높이를 미리 측정·예약 → 아코디언 토글에도 다음 섹션이 밀리지 않음
  const measureRef = React.useRef(null);
  const [reserve, setReserve] = React.useState(0);
  React.useLayoutEffect(() => {
    const measure = () => { if (measureRef.current) setReserve(measureRef.current.getBoundingClientRect().height); };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);
  const printAll = typeof window !== "undefined" && window.__PRINT__;
  return (
    <section id="faq" style={{ padding: "clamp(88px,10vw,120px) 0 clamp(72px,8vw,96px)", background: "var(--bg-page)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>FAQ</p>
          <h2 className="sec-title">자주 묻는 질문</h2>
          <p style={{ fontSize: 16, color: "var(--text-2)", margin: 0 }}>원아워(1hour)에 대해 가장 많이 묻는 질문들을 모았습니다.</p>
        </div>
        <div style={{ maxWidth: 768, margin: "0 auto", position: "relative", minHeight: printAll ? undefined : reserve }}>
          {/* 숨겨진 측정 레이어: 모든 답변이 열렸을 때의 높이를 계산 */}
          {!printAll && (
            <div ref={measureRef} aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, visibility: "hidden", pointerEvents: "none", display: "flex", flexDirection: "column", gap: 16 }}>
              {faqs.map((f, i) => <FaqRow key={i} q={f.q} a={f.a} open={true} onToggle={() => {}} measure />)}
            </div>
          )}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {faqs.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  const checks = ["모든 기능 무제한", "설치 없이 바로 시작", "3일 후 자동 종료"];
  return (
    <section style={{ position: "relative", padding: "112px 0 96px", background: "#101417", overflow: "hidden" }}>
      {/* 브랜드 민트 글로우 (은은하게) */}
      <div aria-hidden="true" style={{ position: "absolute", top: "-30%", left: "50%", transform: "translateX(-50%)", width: 720, height: 720, background: "radial-gradient(circle, rgba(16,185,167,0.18) 0%, rgba(16,185,167,0) 62%)", pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <h2 style={{ fontSize: "clamp(2rem,4.2vw,3.2rem)", fontWeight: 800, color: "#fff", lineHeight: 1.2, letterSpacing: "-0.025em", margin: "0 0 24px" }}>
          원장님도<br />성공하실 수 있습니다
        </h2>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,0.72)", margin: "0 0 20px", wordBreak: "keep-all" }}>수업 생성, 과제 부여, 학습 관리, 리포트 발송까지 원아워가 도와드려요.</p>
        <p style={{ fontSize: 15, color: "rgba(255,255,255,0.5)", margin: "0 0 40px", wordBreak: "keep-all" }}>
          이미 <span style={{ fontWeight: 800, color: "var(--brand-06)" }}>2,000+ 영어 학원·학교</span>가 원아워로 성공했습니다. 다음은 원장님 차례입니다.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: 32, marginBottom: 44 }}>
          {checks.map((t) => (
            <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 15, fontWeight: 600, color: "rgba(255,255,255,0.88)" }}>
              <IconCheck size={18} stroke={2.5} style={{ color: "var(--brand-06)", flexShrink: 0 }} />{t}
            </span>
          ))}
        </div>
        <div className="cta-row" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
          <a className="btn-primary btn-xl" href={FREE_TRIAL_URL}>3일 무료체험 시작하기 →</a>
          <a className="btn-xl" href={CHANNEL_IO_URL} target="_blank" rel="noopener noreferrer"
            style={{ fontFamily: "var(--font-kr)", fontWeight: 700, borderRadius: "var(--r-pill)", display: "inline-flex", alignItems: "center", justifyContent: "center", textDecoration: "none", background: "rgba(255,255,255,0.08)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>도입 문의하기</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const FootLink = ({ href, children }) => (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255,255,255,0.55)", textDecoration: "underline", textUnderlineOffset: 2 }}>{children}</a>
  );
  const Row = ({ label, children }) => (
    <p style={{ margin: "0 0 6px", fontSize: 13, color: "rgba(255,255,255,0.55)", lineHeight: 1.6, wordBreak: "keep-all" }}>
      <span style={{ color: "rgba(255,255,255,0.4)", marginRight: 8 }}>{label}</span>{children}
    </p>
  );
  return (
    <footer style={{ background: "#0C0F11", color: "rgba(255,255,255,0.55)" }}>
      <div className="wrap" style={{ padding: "40px 24px 48px" }}>
        {/* 상단: 정책 링크 + 카피라이트 */}
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 16, paddingBottom: 24, borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
            <a href="https://onehour.notion.site/11fb05000f09802fb93ff633611683a9" target="_blank" rel="noopener noreferrer" style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.85)", textDecoration: "underline", textUnderlineOffset: 3 }}>서비스 이용약관</a>
            <a href="https://onehour.notion.site/686dae9d229c40c5a7313cd4282d2c88" target="_blank" rel="noopener noreferrer" style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.85)", textDecoration: "underline", textUnderlineOffset: 3 }}>개인정보처리방침</a>
          </div>
          <p className="tnum" style={{ fontSize: 12, color: "rgba(255,255,255,0.4)", margin: 0 }}>Copyright © 제로엑스플로우. All rights reserved.</p>
        </div>

        {/* 하단: 사업자 정보 + 고객센터 + 언어 */}
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: "32px 40px", paddingTop: 32 }}>
          <div style={{ flex: "0 1 300px", minWidth: 260 }}>
            <Row label="상호명">주식회사 제로엑스플로우</Row>
            <Row label="대표자">김홍현</Row>
            <Row label="사업자등록번호"><span className="tnum">383-81-00791</span></Row>
            <Row label="통신판매업신고"><span className="tnum">2025-서울마포-0524</span> <FootLink href="https://www.ftc.go.kr/bizCommPop.do?wrkr_no=3838100791">사업자정보확인링크</FootLink></Row>
            <Row label="본사주소">서울 마포구 마포대로 109, 제오동 2304호(공덕동, 롯데캐슬 프레지던트)</Row>
            <Row label="전화번호"><span className="tnum">02-3285-1230</span></Row>
          </div>

          <div style={{ flex: "0 1 300px", minWidth: 260 }}>
            <p style={{ margin: "0 0 12px", fontSize: 13, color: "rgba(255,255,255,0.85)", fontWeight: 700 }}>
              고객센터 <span className="tnum" style={{ fontWeight: 500, color: "rgba(255,255,255,0.55)", marginLeft: 6 }}>평일 09:00 ~ 18:00</span> <span style={{ fontWeight: 500, color: "rgba(255,255,255,0.4)" }}>*점심시간 12:00 ~ 13:00</span>
            </p>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
              <li style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}><span style={{ color: "rgba(255,255,255,0.4)", marginRight: 8 }}>· 전화번호</span><span className="tnum">02-3285-1230</span></li>
              <li style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}><span style={{ color: "rgba(255,255,255,0.4)", marginRight: 8 }}>· 원아워 채팅 문의</span><FootLink href={CHANNEL_IO_URL}>바로가기</FootLink></li>
              <li style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}><span style={{ color: "rgba(255,255,255,0.4)", marginRight: 8 }}>· 이메일</span><FootLink href="mailto:cs@zeroxflow.com">cs@zeroxflow.com</FootLink></li>
              <li style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}><span style={{ color: "rgba(255,255,255,0.4)", marginRight: 8 }}>· 원아워 사용 가이드</span><FootLink href="https://1hour.gitbook.io/guide">바로가기</FootLink></li>
            </ul>
          </div>

          <div style={{ flex: "0 0 auto", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 12 }}>
            <a href={APP_STORE_URL} target="_blank" rel="noopener noreferrer"
              style={{ display: "inline-flex", alignItems: "center", gap: 10, minWidth: 176, padding: "10px 16px", borderRadius: "var(--r-md)", border: "1px solid rgba(255,255,255,0.22)", background: "rgba(255,255,255,0.06)", textDecoration: "none", transition: "background .12s ease, border-color .12s ease" }}>
              <IconDownload size={20} style={{ color: "rgba(255,255,255,0.8)", flexShrink: 0 }} />
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
                <span style={{ fontSize: 10, color: "rgba(255,255,255,0.45)" }}>iOS 앱 다운로드</span>
                <span style={{ fontSize: 14, fontWeight: 700, color: "#fff" }}>App Store</span>
              </span>
            </a>
            <a href={PLAY_STORE_URL} target="_blank" rel="noopener noreferrer"
              style={{ display: "inline-flex", alignItems: "center", gap: 10, minWidth: 176, padding: "10px 16px", borderRadius: "var(--r-md)", border: "1px solid rgba(255,255,255,0.22)", background: "rgba(255,255,255,0.06)", textDecoration: "none", transition: "background .12s ease, border-color .12s ease" }}>
              <IconDownload size={20} style={{ color: "rgba(255,255,255,0.8)", flexShrink: 0 }} />
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
                <span style={{ fontSize: 10, color: "rgba(255,255,255,0.45)" }}>Android 앱 다운로드</span>
                <span style={{ fontSize: 14, fontWeight: 700, color: "#fff" }}>Google Play</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function SignupNotification() {
  const [show, setShow] = React.useState(false);
  const [loc, setLoc] = React.useState("");
  const [ago, setAgo] = React.useState("");
  React.useEffect(() => {
    const fire = () => {
      setLoc(SIGNUP_LOCATIONS[Math.floor(Math.random() * SIGNUP_LOCATIONS.length)]);
      setAgo(`${Math.floor(Math.random() * 30) + 1}분 전`);
      setShow(true);
      setTimeout(() => setShow(false), 4000);
    };
    const d = setTimeout(fire, 3000);
    const iv = setInterval(fire, 12000);
    return () => { clearTimeout(d); clearInterval(iv); };
  }, []);
  return (
    <div style={{
      position: "fixed", bottom: 24, right: 24, zIndex: 60, transition: "all .5s",
      opacity: show ? 1 : 0, transform: show ? "none" : "translateY(16px)", pointerEvents: show ? "auto" : "none",
    }}>
      <div style={{ background: "#fff", borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-lg)", border: "1px solid var(--border)", padding: "16px 20px", display: "flex", alignItems: "center", gap: 12, maxWidth: 300 }}>
        <div className="check-chip"><IconCheck size={14} stroke={2.5} /></div>
        <div>
          <p style={{ fontSize: 14, fontWeight: 700, color: "var(--text-1)", margin: 0 }}>{loc}</p>
          <p style={{ fontSize: 12, color: "var(--text-2)", margin: 0 }}>3일 무료체험을 시작했습니다.</p>
          <p style={{ fontSize: 12, color: "var(--text-3)", margin: "2px 0 0" }}>{ago}</p>
        </div>
      </div>
    </div>
  );
}

function VideoModal({ onClose }) {
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(26,26,26,0.6)", backdropFilter: "blur(6px)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", width: "100%", maxWidth: 896, margin: "0 16px", background: "#000", borderRadius: "var(--r-xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
        <button onClick={onClose} style={{ position: "absolute", top: 16, right: 16, zIndex: 10, width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(255,255,255,0.2)", border: "none", color: "#fff", cursor: "pointer" }}>
          <IconX size={20} />
        </button>
        <div style={{ position: "relative", width: "100%", paddingBottom: "56.25%" }}>
          <iframe style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" title="원아워 실제 사용 화면" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TrustSection, FaqSection, FinalCta, Footer, SignupNotification, VideoModal });
