/* global React */
const { useState, useEffect } = React;

/* ─────────────────────────────────────────────────────────────
   Nav bar
   ───────────────────────────────────────────────────────────── */
function NavBar({ scrolled, onCta }) {
  const links = [
    { id: "home", label: "home" },
    { id: "about", label: "about" },
    { id: "membership", label: "membership" },
    { id: "reviews", label: "reviews" },
  ];
  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(246, 230, 212, 0.92)" : "transparent",
        backdropFilter: scrolled ? "saturate(140%) blur(10px)" : "none",
        WebkitBackdropFilter: scrolled ? "saturate(140%) blur(10px)" : "none",
        transition: "background 0.25s ease",
        borderBottom: scrolled ? "1px solid rgba(0,0,0,0.04)" : "1px solid transparent",
      }}
    >
      <div
        className="container"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "18px 32px",
          gap: 24,
        }}
      >
        <a href="#top" style={{ display: "flex", alignItems: "center" }}>
          <img
            src="assets/logo.png"
            alt="englider"
            style={{ height: 28, width: "auto" }}
          />
        </a>

        <nav
          className="nav-center"
          style={{
            display: "flex",
            gap: 28,
            background: "rgba(255,255,255,0.55)",
            padding: "10px 22px",
            borderRadius: 999,
            border: "1px solid var(--line)",
          }}
        >
          {links.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              style={{
                fontSize: 14,
                fontWeight: 500,
                color: "var(--ink)",
                opacity: 0.85,
              }}
              onMouseEnter={(e) => (e.currentTarget.style.opacity = 1)}
              onMouseLeave={(e) => (e.currentTarget.style.opacity = 0.85)}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <button className="btn btn-primary" onClick={onCta}>
          시작하기&nbsp;<span style={{ opacity: 0.9 }}>›</span>
        </button>

        <style>{`
          @media (max-width: 860px) {
            .nav-center { display: none !important; }
          }
        `}</style>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────────────────────────
   Hero — headline + 3 user-type cards
   ───────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section id="top" style={{ paddingTop: 28, paddingBottom: 56 }}>
      <div className="container">
        {/* Headline block */}
        <div style={{ textAlign: "center", padding: "32px 0 56px" }}>
          <div
            className="mono-label"
            style={{ marginBottom: 16, letterSpacing: "0.08em" }}
          >
            AI-Powered English Learning
          </div>
          <h1
            className="display"
            style={{
              fontSize: "clamp(48px, 8vw, 96px)",
              margin: 0,
              color: "var(--ink)",
            }}
          >
            영어를 배우는
            <br />
            <span style={{ color: "var(--coral)" }}>가장 지적인</span>
            <br />
            방법
          </h1>
          <p
            style={{
              maxWidth: 540,
              margin: "28px auto 0",
              color: "var(--ink-2)",
              fontSize: 16,
              lineHeight: 1.7,
            }}
          >
            AI가 당신의 패턴을 분석해 최적의 학습 경로를 설계합니다.
            <br />
            매일 10분, 과학적으로 설계된 루틴.
          </p>
        </div>

        {/* 3 user cards */}
        <UserCards />
      </div>
    </section>
  );
}

const USER_CARDS = [
  {
    id: "personal",
    href: "/b2c",
    img: "assets/home_personal.png",
    bg: "#ee7e5a",
    label: "잉글라이더 개인용",
    desc: "우리 아이를 위한 맞춤 영어 학습",
    cta: "개인 사용자 바로가기",
  },
  {
    id: "school",
    href: "/b2b",
    img: "assets/home_school.png",
    bg: "#8aa05a",
    label: "잉글라이더 기관용",
    desc: "학교나 학원, 유치원에서 쓰고 있어요",
    cta: "기관 사용자 바로가기",
  },
  {
    id: "church",
    href: "/church",
    img: "assets/home_church.png",
    bg: "#4d5a8c",
    label: "잉글라이더 교회용",
    desc: "주일학교와 성경 영어교육을 위해 써요",
    cta: "교회 사용자 바로가기",
  },
];

function UserCards() {
  const [hover, setHover] = useState(null);
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 16,
      }}
      className="user-grid"
    >
      {USER_CARDS.map((c) => {
        const isHover = hover === c.id;
        return (
          <a
            key={c.id}
            href={c.href}
            onMouseEnter={() => setHover(c.id)}
            onMouseLeave={() => setHover(null)}
            style={{
              background: c.bg,
              borderRadius: "var(--r-lg)",
              overflow: "hidden",
              color: "#fff",
              textDecoration: "none",
              display: "flex",
              flexDirection: "column",
              transition: "transform 0.25s ease, box-shadow 0.25s ease",
              transform: isHover ? "translateY(-4px)" : "translateY(0)",
              boxShadow: isHover
                ? "0 18px 40px rgba(80, 50, 30, 0.18)"
                : "0 6px 18px rgba(80, 50, 30, 0.08)",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                padding: "26px 26px 0",
                textAlign: "center",
              }}
            >
              <div
                style={{
                  fontFamily: "var(--display)",
                  fontSize: 24,
                  fontWeight: 400,
                  lineHeight: 1.1,
                }}
              >
                {c.label}
              </div>
              <div
                style={{
                  marginTop: 8,
                  fontSize: 13.5,
                  opacity: 0.88,
                  fontWeight: 500,
                }}
              >
                {c.desc}
              </div>
            </div>

            <div
              style={{
                marginTop: 14,
                aspectRatio: "1 / 0.88",
                background: `url(${c.img}) center/cover no-repeat`,
                transition: "transform 0.4s ease",
                transform: isHover ? "scale(1.03)" : "scale(1)",
              }}
            />

            <div style={{ padding: 16 }}>
              <span
                style={{
                  display: "block",
                  width: "100%",
                  padding: "12px 16px",
                  borderRadius: 999,
                  background: isHover
                    ? "rgba(255,255,255,0.32)"
                    : "rgba(255,255,255,0.18)",
                  border: "1.5px solid rgba(255,255,255,0.55)",
                  color: "#fff",
                  fontWeight: 600,
                  fontSize: 14,
                  textAlign: "center",
                  backdropFilter: "blur(4px)",
                  transition: "background 0.2s",
                }}
              >
                {c.cta} ›
              </span>
            </div>
          </a>
        );
      })}
      <style>{`
        @media (max-width: 880px) {
          .user-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────
   Why Englider — 6 feature cards
   ───────────────────────────────────────────────────────────── */
const FEATURES = [
  {
    n: "01",
    title: "AI 개인화 커리큘럼",
    body:
      "매일 학습 데이터를 수집해 오답 패턴, 취약 영역, 최적 학습 시간을 분석합니다. 당신만을 위한 경로가 매일 새롭게 생성됩니다.",
  },
  {
    n: "02",
    title: "정밀 발음 분석",
    body:
      "음소 단위의 발음 분석으로 어떤 소리가 부족한지 정확하게 알려드립니다.",
  },
  {
    n: "03",
    title: "간격 반복 (SRS)",
    body:
      "에빙하우스 망각 곡선을 기반으로 잊기 직전에 복습을 제시합니다.",
  },
  {
    n: "04",
    title: "스트릭 & 동기 시스템",
    body:
      "연속 학습 기록과 마일스톤 보상으로 중단 없이 학습을 이어갑니다.",
  },
  {
    n: "05",
    title: "패밀리 플랜",
    body:
      "교재 PDF 업로드, 부모 대시보드, 엄마표 영어에 특화된 학습 흐름.",
  },
  {
    n: "06",
    title: "실전 콘텐츠",
    body:
      "테크 뉴스, 비즈니스 아티클 등 살아있는 영어로 실력을 키웁니다.",
  },
];

function WhyEnglider() {
  return (
    <section id="about">
      <div className="container">
        <div className="mono-label" style={{ marginBottom: 18 }}>
          Why Englider
        </div>
        <h2
          className="display"
          style={{
            fontSize: "clamp(36px, 5.4vw, 60px)",
            margin: 0,
            maxWidth: 820,
          }}
        >
          단순한 앱이 아닙니다.
          <br />
          <span style={{ color: "var(--coral)" }}>학습 시스템</span>입니다.
        </h2>
        <p
          style={{
            marginTop: 18,
            color: "var(--ink-2)",
            maxWidth: 640,
            lineHeight: 1.7,
          }}
        >
          인지과학과 AI를 결합해 단기 기억을 장기 기억으로 전환하는 과정을
          설계합니다.
        </p>

        <div
          className="feat-grid"
          style={{
            marginTop: 48,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 14,
          }}
        >
          {FEATURES.map((f) => (
            <FeatureCard key={f.n} f={f} />
          ))}
        </div>

        <style>{`
          @media (max-width: 900px) {
            .feat-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 560px) {
            .feat-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function FeatureCard({ f }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "linear-gradient(180deg, #fdf3e4 0%, #fbecd7 100%)",
        border: "1px solid var(--line)",
        borderRadius: "var(--r-lg)",
        padding: "26px 24px 24px",
        minHeight: 200,
        display: "flex",
        flexDirection: "column",
        gap: 10,
        transition: "transform 0.2s, box-shadow 0.2s",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        boxShadow: hover ? "var(--shadow)" : "var(--shadow-sm)",
      }}
    >
      <div
        style={{
          fontFamily: "var(--mono)",
          fontSize: 13,
          color: "var(--coral)",
          letterSpacing: "0.04em",
        }}
      >
        # {f.n}
      </div>
      <div
        style={{
          fontWeight: 700,
          fontSize: 19,
          color: "var(--ink)",
          marginTop: 6,
        }}
      >
        {f.title}
      </div>
      <p
        style={{
          margin: 0,
          color: "var(--ink-2)",
          fontSize: 14,
          lineHeight: 1.7,
        }}
      >
        {f.body}
      </p>
    </div>
  );
}

Object.assign(window, { NavBar, Hero, WhyEnglider });