// solution.jsx — The Problem + The Solution (이모지→Lucide 아이콘)

// ─── Before / After 블록 ───
const BeforeAfter = ({ before, after }) => (
  <React.Fragment>
    <div style={{ background: "#fff", borderRadius: "var(--r-md)", padding: 16, border: "1px solid var(--border)", marginBottom: 16 }}>
      <p style={{ fontSize: 12, color: "var(--text-3)", margin: "0 0 4px", fontWeight: 600 }}>Before</p>
      <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0, wordBreak: "keep-all", lineHeight: 1.6, textWrap: "balance" }}>{before}</p>
    </div>
    <div style={{ background: "var(--primary-light)", borderRadius: "var(--r-md)", padding: 16, border: "1px solid var(--border)", marginBottom: 16 }}>
      <p style={{ fontSize: 12, color: "var(--primary-dark)", margin: "0 0 4px", fontWeight: 700 }}>After</p>
      <p style={{ fontSize: 14, color: "var(--text-1)", margin: 0, wordBreak: "keep-all", lineHeight: 1.6, textWrap: "balance" }}>{after}</p>
    </div>
  </React.Fragment>
);

// ─── 솔루션 스텝 (좌우 교차) ───
function SolutionStep({ step, title, desc, before, after, tags, reverse, children, links, foot }) {
  return (
    <div style={{ marginBottom: 96 }}>
      <div className="step-grid" style={{ flexDirection: reverse ? "row-reverse" : "row" }}>
        <div style={{ flex: 1 }}>
          <span className="eyebrow">{step}</span>
          <h3 style={{ fontSize: 24, fontWeight: 800, color: "var(--text-1)", letterSpacing: "-0.015em", margin: "8px 0 12px" }}>{title}</h3>
          <p style={{ fontSize: 14, color: "var(--text-2)", margin: "0 0 16px", wordBreak: "keep-all", lineHeight: 1.6, textWrap: "balance" }}>{desc}</p>
          <BeforeAfter before={before} after={after} />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 16 }}>
            {tags.map((t) => <Tag key={t}>{t}</Tag>)}
          </div>
          {links && <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>{links.map((l) => {
            const sameTab = l.href === FREE_TRIAL_URL;
            return (
              <a key={l.label} className="link-mint" href={l.href} {...(sameTab ? {} : { target: "_blank", rel: "noopener noreferrer" })}>{l.label} →</a>
            );
          })}</div>}
          {foot && <p style={{ fontSize: 12, color: "var(--text-3)", marginTop: 8 }}>{foot}</p>}
        </div>
        <div style={{ flex: 1 }}>{children}</div>
      </div>
    </div>
  );
}

function ProblemSection() {
  const items = [
    { Icon: IconClock, title: "수업 준비에 하루 3시간 이상", desc: "교재 선정부터 수업 자료 제작, 문제 출제까지... 수업 준비에만 하루의 절반을 쏟고 계시진 않으세요?" },
    { Icon: IconClipboard, title: "끝없는 숙제 관리 반복", desc: "과제 누가 냈고 누가 안 냈는지, 매일 하나하나 확인하고 계신가요?" },
    { Icon: IconMessage, title: "학부모 소통, 더 쉽게", desc: "학부모님이 궁금해하는 학습 현황, 매번 카톡으로 따로 전달하느라 번거로우셨나요?" },
    { Icon: IconBook, title: "검증된 콘텐츠 확보의 어려움", desc: "검증된 교재를 찾고, 수업에 맞게 가공하는 데 시간이 너무 많이 드시나요?" },
  ];
  return (
    <section style={{ padding: "clamp(104px,13vw,152px) 0", background: "#fff" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>THE PROBLEM</p>
          <h2 className="sec-title">원장님, 혹시 이런 고민<br />하고 계시진 않으신가요?</h2>
          <p style={{ fontSize: 16, color: "var(--text-2)", margin: 0, wordBreak: "keep-all", textWrap: "balance" }}>전국 2,000+ 학원 원장님들이 공통적으로 겪고 계셨던 문제들입니다.</p>
        </div>
        <div className="grid-4">
          {items.map(({ Icon, title, desc }) => (
            <div key={title} className="problem-card">
              <div className="icon-chip"><Icon size={24} /></div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: "var(--text-1)", margin: "0 0 12px" }}>{title}</h3>
              <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0, lineHeight: 1.6, wordBreak: "keep-all", textWrap: "balance" }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionSection() {
  const [t02, setT02] = React.useState(0);
  const [t03, setT03] = React.useState(0);
  const [t032, setT032] = React.useState(0);
  const [t04, setT04] = React.useState(0);
  const [t05, setT05] = React.useState(0);

  return (
    <section id="solution" style={{ padding: "clamp(104px,13vw,152px) 0", background: "#f8fafc", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>THE SOLUTION</p>
          <h2 className="sec-title">원아워가 이렇게 해결합니다</h2>
          <p style={{ fontSize: 16, color: "var(--text-2)", margin: 0, wordBreak: "keep-all", textWrap: "balance" }}>어려움에 맞는 1:1 솔루션 자동화 기능으로, 원장님의 하루가 달라집니다.</p>
        </div>

        <SolutionStep step="STEP 01" title="바로 쓰는 공식 라이센스 콘텐츠"
          desc="출판사 공식 콘텐츠 1,000권+ · 20,960개 수업을 검색하고 바로 활용하세요."
          before="검증된 교재를 찾고, 수업에 맞게 가공하는 데 시간이 너무 많이 듭니다."
          after={<>NE빌드앤그로우, YBM, Efuture, A*List 등 주요 출판사의 공식 라이센스 콘텐츠 1,000권+,<br />20,960개 수업을 원마켓에서 바로 사용하세요.</>}
          tags={["ELT", "영상", "원서", "듣기평가", "모의고사"]}
          links={[{ label: "라이센스 콘텐츠 둘러보기", href: FREE_TRIAL_URL }]}
          foot="NE빌드앤그로우 · YBM · Efuture · A*List 등 1,000권+ 콘텐츠 확인">
          <img src="https://live-public.1hour.ai/assets/landing/solution-1.jpg" alt="원마켓 콘텐츠" style={{ borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-md)", width: "100%", display: "block" }} />
        </SolutionStep>

        <SolutionStep step="STEP 02" title="자동 수업 생성 AI" reverse
          desc="원클릭 200문제 자동 생성, 다수 학원에서 검증된 내신 문제 유형"
          before="내신 변형 문제를 만들려면 몇 시간이 걸리고, 외부 지문으로 수업을 만드는 건 더 오래 걸립니다."
          after="내신 변형 문제와 맞춤 수업 자료를 AI로 빠르게 만들 수 있습니다. 외부 지문만 입력해도 필요한 문제를 자동으로 생성합니다."
          tags={["내신 변형 문제 자동 생성", "외부 지문 원클릭 200문제 자동 생성"]}
          links={[{ label: "수업 만들러 가기", href: FREE_TRIAL_URL }]}
          foot="회원가입 후 바로 수업 생성 가능 · 3일 무료체험">
          <SolutionTabs tabs={STEP02_TABS} activeIdx={t02} setActiveIdx={setT02} />
          <TabImageSwitcher tabs={STEP02_TABS} activeIdx={t02} />
        </SolutionStep>

        <SolutionStep step="STEP 03" title="과제 부여, 1분이면 끝"
          desc="학생별 과제를 빠르게 배포하고 일정까지 함께 관리하세요."
          before="과제를 일일이 정리하고, 학생별로 배분하고, 마감일을 관리하는 데 매번 30분 이상 걸립니다."
          after="과제 유형·학습 모드·마감일을 설정하고 클릭 한 번으로 과제를 부여하세요. 과제 분할 설정과 캘린더 스케줄링으로 학생이 매일 고르게 학습할 수 있습니다."
          tags={["과제 분할 설정 — 하루 평균 분량 자동 계산", "캘린더 기반 스케줄 · 휴일 설정 · 반복 설정", "기존 30분 → 1분으로 단축"]}>
          <SolutionTabs tabs={STEP03_TABS} activeIdx={t03} setActiveIdx={setT03} />
          <TabImageSwitcher tabs={STEP03_TABS} activeIdx={t03} />
        </SolutionStep>

        <SolutionStep step="STEP 03-1" title="커리큘럼 제작 & 공유" reverse
          desc="반복되는 과제 시나리오를 저장하고 선생님끼리 쉽게 공유하세요."
          before="매번 새로운 커리큘럼을 처음부터 만들고, 다른 선생님에게 전달하기가 번거롭습니다."
          after={<>과제 부여 시나리오를 커리큘럼으로 만들고, 원클릭으로 배포하세요.<br />다른 선생님의 커리큘럼을 공유받거나 공개 커리큘럼을 바로 사용할 수도 있습니다.</>}
          tags={["과제 시나리오 → 커리큘럼 자동 생성", "공개 등록 · 아이디 공유 · 링크 공유"]}
          links={[{ label: "공개 커리큘럼 둘러보기", href: FREE_TRIAL_URL }, { label: "커리큘럼 공유받기", href: "https://1hour.ai/kr/curriculum/shared/vY4a3wP6" }]}
          foot="회원가입 후 바로 사용 가능">
          <img src="https://live-public.1hour.ai/assets/landing/solution-5-1.jpg" alt="커리큘럼 공유" style={{ borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-md)", width: "100%", display: "block" }} />
        </SolutionStep>

        <SolutionStep step="STEP 03-2" title="한눈에 보는 과제 관리"
          desc="학생별 제출 현황과 클래스 완료율을 빠르게 파악하세요."
          before="학생별 과제 제출 여부를 하나하나 확인하고 따로 안내하는 데 시간이 많이 걸립니다."
          after={<>과제별 학생 제출 현황(완료/미제출)과 단어 점수를 즉시 확인하고,<br />클래스 전체 과제 완료율과 월간 리포트를 캘린더 뷰로 한눈에 파악하세요.</>}
          tags={["학생별 제출 현황 · 최종 제출 시간 · 단어 점수 즉시 확인", "클래스 월간·주간 캘린더 뷰 · 학생별 완료율", "월간 리포트 · 커리큘럼으로 저장"]}>
          <SolutionTabs tabs={STEP03_2_TABS} activeIdx={t032} setActiveIdx={setT032} />
          <TabImageSwitcher tabs={STEP03_2_TABS} activeIdx={t032} />
        </SolutionStep>

        <SolutionStep step="STEP 04" title="학생 실력이 자라는 학습 경험" reverse
          desc="읽기·쓰기·말하기·듣기·해석 5대 영역 AI가 돕는 학습, 학생 성장으로 이어집니다."
          before="스피킹·라이팅은 직접 채점해야 하고, 학생 실력이 얼마나 늘었는지 파악하기 어려웠습니다."
          after={<>AI가 평가와 피드백을 도와주어 학생은 반복 학습으로 실력을 쌓고,<br />선생님은 성장 결과를 쉽게 확인할 수 있습니다.</>}
          tags={["AI 스피킹 자동 평가 — 정확성·유창성·억양", "AI 영작 분석 & 문법 피드백 자동 생성", "AI 해석 학습 — 의미 전달·문법 세부 점수"]}>
          <SolutionTabs tabs={STEP04_TABS} activeIdx={t04} setActiveIdx={setT04} />
          <TabImageSwitcher tabs={STEP04_TABS} activeIdx={t04} />
        </SolutionStep>

        <SolutionStep step="STEP 05" title="학생별 학습 리포트와 인사이트를 자동으로"
          desc="월간 리포트부터 수행 결과 분석까지 한곳에서 확인하세요."
          before="학생별 학습 현황을 파악하려면 엑셀을 찾고, 리포트를 수작업으로 만들어야 합니다."
          after={<>학생별 월간 학습 리포트, 클래스 과제 완료율, AI 영작 피드백까지 한 곳에서 확인하세요.<br />데이터 기반으로 학습 수준을 정확히 파악하고 다음 수업을 설계하세요.</>}
          tags={["학생별 월간 학습량 · 3개월 추이 차트 · 완료 현황", "클래스 영역별 완료율(단어/문장/말하기/쓰기) 상세 현황", "AI 영작 피드백 · 과제별 수행 결과 세부 분석"]}>
          <SolutionTabs tabs={STEP05_TABS} activeIdx={t05} setActiveIdx={setT05} />
          <TabImageSwitcher tabs={STEP05_TABS} activeIdx={t05} ratio="1280 / 735" />
        </SolutionStep>

        <SolutionStep step="STEP 06" title="학생 현황을 한눈에, 클래스 관리" reverse
          desc="반 전체 학습 현황을 쉽게 파악하고 랭킹과 리포트를 활용하세요."
          before="학생 수가 늘어날수록 학생 개개인의 학습 상태를 세밀하게 챙기기 어렵습니다."
          after="클래스별 학생 관리, 학습 랭킹, 상세 리포트를 한 곳에서 확인하세요."
          tags={["클래스별 학생 관리 · 과제 완료율", "학생별 상세 학습 리포트"]}>
          <img src="https://live-public.1hour.ai/assets/landing/solution-8.jpg" alt="클래스 관리" style={{ borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-md)", width: "100%", display: "block" }} />
        </SolutionStep>
      </div>
    </section>
  );
}

// ─── THE DIFFERENCE (메인 기능 맛보기) ───
function DifferenceSection() {
  const items = [
    { Icon: IconSparkle, title: "비효율적인 자료 제작 시간이 확 줄어듭니다", desc: "강의 영상·모의고사 PDF·외부지문 텍스트만 넣으면, 변형문제부터 서술형 영작 과제까지 자동으로 만들어져요." },
    { Icon: IconClipboard, title: "학생 개별 맞춤 지도가 가능해집니다", desc: "틀린 문제는 자동으로 다시 풀리고, 약한 문제 유형·영역·단어만 골라 맞춤 과제로 내줄 수 있어요." },
    { Icon: IconBook, title: "여러 선생님이 같은 수준으로 가르칩니다", desc: "커리큘럼을 학원 전체가 공유해서, 어느 지점에서 배우든 수업의 질이 고르게 유지돼요." },
    { Icon: IconChart, title: "아이의 학습 데이터를 학부모가 숫자로 확인합니다", desc: "학생별 월별 학습량, 과제 완료율, 약한 단어·문장 분석, 발음 과제 영상본과 AI 발음 피드백까지 학부모님께 리포트로 공유할 수 있어요." },
  ];
  return (
    <section id="difference" style={{ padding: "80px 0", background: "#fff", scrollMarginTop: 80 }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>THE DIFFERENCE</p>
          <h2 className="sec-title">원아워로 이렇게 달라집니다</h2>
        </div>
        <div className="grid-4">
          {items.map(({ Icon, title, desc }) => (
            <div key={title} className="problem-card">
              <div className="icon-chip"><Icon size={24} /></div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: "var(--text-1)", margin: "0 0 12px", wordBreak: "keep-all", textWrap: "balance" }}>{title}</h3>
              <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0, lineHeight: 1.6, wordBreak: "keep-all", textWrap: "balance" }}>{desc}</p>
            </div>
          ))}
        </div>

        {/* 학년별 차별점 — 유초등 → 중등 → 고등 */}
        <div style={{ marginTop: 56 }}>
          <h3 style={{ fontSize: "clamp(1.25rem,2.2vw,1.6rem)", fontWeight: 800, color: "var(--text-1)", letterSpacing: "-0.02em", textAlign: "center", margin: "0 0 28px", wordBreak: "keep-all" }}>학년별로 더 깊게 — 유초등부터 고등까지</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              { label: "유초등", title: "영어를 처음 접하는 아이도, 보고 들으며 익힙니다", desc: "유튜브 영상과 챕터북으로 자료를 만들고, 소리영어(쉐도잉)로 듣고 따라 말하며 익혀요. 1,000권이 넘는 ELT 교재와 영어원서를 갖춘 영어도서관에서 수준에 맞는 읽기 자료를 골라 쓸 수 있어요." },
              { label: "중등", title: "내신 대비부터 영작·스피킹까지", desc: "내신 기간에는 외부지문으로 변형문제를 만들어 대비해요. 영작·에세이는 실제 내신 기준으로 짚어주고, 스피킹은 음소 단위로 원아워를 통해 더 세세히 분석할 수 있어요." },
              { label: "고등", title: "내신은 물론, 동형모의고사까지", desc: "학평·모의고사 PDF만 넣으면 지문의 어휘와 문장 구조를 바꿔 의미 추론, 제목 고르기, 내용 일치·불일치, 빈칸 추론 등 변형문제를 만들어요. 내신 대비 변형문제도, 실전 동형모고도 모두 가능하고, 오답만 모아 자동으로 반복 풀이를 시킬 수 있어요." },
            ].map(({ label, title, desc }) => (
              <div key={label} style={{ borderRadius: "var(--r-lg)", border: "1px solid var(--border)", background: "#fff", boxShadow: "var(--shadow-sm)", padding: "clamp(24px,3vw,32px)" }}>
                <span style={{ display: "inline-block", fontSize: 12, fontWeight: 700, letterSpacing: "0.04em", color: "var(--brand-06)", background: "var(--primary-light)", borderRadius: "var(--r-pill)", padding: "5px 12px", marginBottom: 14 }}>{label}</span>
                <h4 style={{ fontSize: "clamp(1.05rem,1.7vw,1.25rem)", fontWeight: 800, color: "var(--text-1)", letterSpacing: "-0.01em", lineHeight: 1.4, margin: "0 0 10px", wordBreak: "keep-all", textWrap: "balance" }}>{title}</h4>
                <p style={{ fontSize: 14.5, color: "var(--text-2)", margin: 0, lineHeight: 1.7, wordBreak: "keep-all", maxWidth: 760 }}>{desc}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 32 }}>
          <a className="link-mint" href="features.html">기능 한눈에 보기 →</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, SolutionSection, DifferenceSection });