/* global React */
const { useState: useState2 } = React;

/* ─────────────────────────────────────────────────────────────
   Pricing — 3 plans
   ───────────────────────────────────────────────────────────── */
const PLANS = [
  {
    id: "free",
    name: "Free",
    price: "₩0",
    note: "영원히 무료",
    cta: "무료로 시작",
    ctaStyle: "ghost",
    features: [
      { ok: true, t: "하루 10문장 학습" },
      { ok: true, t: "기본 단어 500개" },
      { ok: true, t: "스트릭 추적" },
      { ok: false, t: "AI 발음 분석" },
      { ok: false, t: "무제한 콘텐츠" },
      { ok: false, t: "패밀리 플랜" },
    ],
  },
  {
    id: "pro",
    name: "Pro",
    price: "₩9,900",
    sub: "/ 월 · VAT 포함",
    cta: "7일 무료 체험",
    ctaStyle: "coral",
    highlight: true,
    features: [
      { ok: true, t: "무제한 학습 콘텐츠" },
      { ok: true, t: "핵심 단어 5,000개" },
      { ok: true, t: "AI 정밀 발음 분석" },
      { ok: true, t: "개인화 커리큘럼" },
      { ok: true, t: "주간 학습 리리포트" },
      { ok: false, t: "패밀리 플랜" },
    ],
  },
  {
    id: "family",
    name: "Family",
    price: "₩19,900",
    sub: "/ 월 · 최대 4인",
    cta: "패밀리 시작",
    ctaStyle: "olive",
    features: [
      { ok: true, t: "pro 기능 전체 포함" },
      { ok: true, t: "교재 pdf 업로드" },
      { ok: true, t: "부모 대시보드" },
      { ok: true, t: "엄마표 영어 특화" },
      { ok: true, t: "최대 4개 계정" },
      { ok: true, t: "가족 학습 리포트" },
    ],
  },
];

function Pricing() {
  return (
    <section id="membership">
      <div className="container">
        <div className="center">
          <div className="mono-label" style={{ marginBottom: 12 }}>
            Pricing
          </div>
          <h2
            className="display"
            style={{
              fontSize: "clamp(40px, 6vw, 64px)",
              margin: 0,
            }}
          >
            플랜선택
          </h2>
          <p
            style={{
              marginTop: 16,
              color: "var(--ink-2)",
              fontSize: 15,
              lineHeight: 1.7,
            }}
          >
            모든 플랜 7일 무료 체험.
            <br />
            언제든 변경 및 해지 가능.
          </p>
        </div>

        <div
          className="plan-grid"
          style={{
            marginTop: 56,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 18,
            alignItems: "stretch",
          }}
        >
          {PLANS.map((p) => (
            <PlanCard key={p.id} p={p} />
          ))}
        </div>

        <style>{`
          @media (max-width: 880px) {
            .plan-grid { grid-template-columns: 1fr !important; max-width: 460px; margin-left: auto; margin-right: auto; }
          }
        `}</style>
      </div>
    </section>
  );
}

function PlanCard({ p }) {
  const ctaBg =
    p.ctaStyle === "coral"
      ? "var(--coral)"
      : p.ctaStyle === "olive"
      ? "var(--olive)"
      : "transparent";

  const ctaColor = p.ctaStyle === "ghost" ? "var(--ink)" : "#fff";

  return (
    <div
      style={{
        background: p.highlight ? "#fff" : "#fdf6ea",
        border: p.highlight
          ? "1px solid rgba(238,126,90,0.25)"
          : "1px solid var(--line)",
        borderRadius: "var(--r-lg)",
        padding: 28,
        display: "flex",
        flexDirection: "column",
        boxShadow: p.highlight
          ? "0 18px 40px rgba(238,126,90,0.15), 0 2px 0 rgba(0,0,0,0.02)"
          : "var(--shadow-sm)",
        transform: p.highlight ? "translateY(-8px)" : "translateY(0)",
        position: "relative",
      }}
    >
      {p.highlight && (
        <div
          style={{
            position: "absolute",
            top: -12,
            left: "50%",
            transform: "translateX(-50%)",
            background: "var(--coral)",
            color: "#fff",
            padding: "5px 14px",
            borderRadius: 999,
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: "0.04em",
            fontFamily: "var(--mono)",
          }}
        >
          MOST POPULAR
        </div>
      )}

      <div style={{ textAlign: "center", paddingBottom: 20 }}>
        <div
          className="display"
          style={{
            fontSize: 28,
            color: p.highlight ? "var(--ink)" : "var(--ink-2)",
            marginBottom: 12,
          }}
        >
          {p.name}
        </div>
        <div
          className="display"
          style={{
            fontSize: 40,
            color: "var(--ink)",
            lineHeight: 1,
          }}
        >
          {p.price}
        </div>
        <div
          style={{
            marginTop: 8,
            fontSize: 13,
            color: "var(--ink-2)",
          }}
        >
          {p.sub || p.note}
        </div>
      </div>

      <div
        style={{
          borderTop: "1px solid var(--line-2)",
          paddingTop: 18,
          display: "flex",
          flexDirection: "column",
          gap: 12,
          flex: 1,
        }}
      >
        {p.features.map((f, i) => (
          <div
            key={i}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              fontSize: 14.5,
              color: f.ok ? "var(--ink)" : "var(--ink-mute)",
            }}
          >
            <span
              aria-hidden
              style={{
                width: 18,
                height: 18,
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                color: f.ok ? "var(--coral)" : "var(--ink-mute)",
                fontWeight: 700,
                fontSize: 14,
              }}
            >
              {f.ok ? "✓" : "×"}
            </span>
            <span>{f.t}</span>
          </div>
        ))}
      </div>

      <button
        style={{
          marginTop: 22,
          width: "100%",
          padding: "14px 18px",
          borderRadius: 999,
          background: ctaBg,
          color: ctaColor,
          border:
            p.ctaStyle === "ghost"
              ? "1px solid var(--line)"
              : "1px solid transparent",
          fontWeight: 700,
          fontSize: 14.5,
          letterSpacing: "0.01em",
          transition: "filter 0.15s, transform 0.15s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.filter = "brightness(0.95)";
          e.currentTarget.style.transform = "translateY(-1px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.filter = "none";
          e.currentTarget.style.transform = "translateY(0)";
        }}
      >
        {p.cta}
      </button>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────
   Reviews
   ───────────────────────────────────────────────────────────── */
const REVIEWS = [
  {
    quote:
      "출근길 10분씩 했는데 3개월 만에 토익이 115점 올랐어요. 억지로 하는 느낌이 없어서 계속하게 됩니다.",
    name: "김지수",
    role: "직장인 · 7개월차",
  },
  {
    quote:
      "아이가 매일 먼저 켜요. 발음 점수가 시각화되니까 본인이 동기부여돼서 정말 신기합니다.",
    name: "박서연",
    role: "초3 학부모 · 4개월차",
  },
  {
    quote:
      "단어를 외운다는 느낌보다 자연스럽게 떠올라요. 간격 반복이 진짜로 작동한다는 걸 체감 중.",
    name: "이도현",
    role: "대학생 · 5개월차",
  },
];

function Reviews() {
  return (
    <section id="reviews">
      <div className="container">
        <h2
          className="display center"
          style={{
            fontSize: "clamp(36px, 5.4vw, 60px)",
            margin: 0,
          }}
        >
          학습자들의 실제 변화
        </h2>

        <div
          className="rev-grid"
          style={{
            marginTop: 48,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 16,
          }}
        >
          {REVIEWS.map((r, i) => (
            <ReviewCard key={i} r={r} />
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .rev-grid { grid-template-columns: 1fr !important; max-width: 520px; margin-left:auto; margin-right:auto; }
          }
        `}</style>
      </div>
    </section>
  );
}

function ReviewCard({ r }) {
  return (
    <div
      style={{
        background: "#fdf3e4",
        border: "1px solid var(--line)",
        borderRadius: "var(--r-lg)",
        padding: "28px 26px 26px",
        display: "flex",
        flexDirection: "column",
        boxShadow: "var(--shadow-sm)",
      }}
    >
      <div
        style={{
          fontSize: 18,
          letterSpacing: "0.08em",
          color: "var(--coral)",
          marginBottom: 14,
        }}
        aria-label="5 out of 5"
      >
        ★★★★★
      </div>
      <p
        style={{
          margin: 0,
          color: "var(--ink)",
          fontSize: 15,
          lineHeight: 1.7,
          flex: 1,
        }}
      >
        “{r.quote}”
      </p>
      <div
        style={{
          marginTop: 22,
          paddingTop: 16,
          borderTop: "1px dashed var(--line-2)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 2,
        }}
      >
        <div style={{ fontWeight: 700, color: "var(--ink)" }}>{r.name}</div>
        <div style={{ fontSize: 12.5, color: "var(--ink-mute)" }}>{r.role}</div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────
   Final CTA
   ───────────────────────────────────────────────────────────── */
function FinalCTA({ onCta }) {
  return (
    <section style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="container center">
        <h2
          className="display"
          style={{
            fontSize: "clamp(48px, 7.5vw, 88px)",
            margin: 0,
          }}
        >
          오늘부터
          <br />
          <span style={{ color: "var(--coral)" }}>영어가 달라집니다</span>
        </h2>
        <p
          style={{
            marginTop: 24,
            color: "var(--ink-2)",
            fontSize: 16,
          }}
        >
          신용카드 없이, 7일 무료로 경험해보세요.
        </p>
        <button
          className="btn btn-primary btn-lg"
          onClick={onCta}
          style={{ marginTop: 36 }}
        >
          무료로 시작하기 ›
        </button>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
const FOOTER_LINKS = [
  { label: "제휴안내", href: "/partnership" },
  { label: "이용약관", href: "/terms" },
  { label: "개인정보 처리방침", href: "/privacy" },
  { label: "인트라넷", href: "https://admin.englider.ai", external: true },
];

const SOCIAL = [
  { src: "assets/sns_talk.png", alt: "Kakao Talk" },
  { src: "assets/sns_instagram.png", alt: "Instagram" },
  { src: "assets/sns_youtube.png", alt: "YouTube" },
  { src: "assets/sns_blog.png", alt: "Blog" },
  { src: "assets/sns_chat.png", alt: "Chat" },
];

function Footer() {
  const [site, setSite] = useState2("잉글라이더 개인용");
  return (
    <footer
      style={{
        background: "var(--bg-2)",
        borderTop: "1px solid var(--line-2)",
        paddingTop: 36,
        paddingBottom: 28,
      }}
    >
      <div className="container">
        <div
          className="foot-top"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 24,
            flexWrap: "wrap",
            paddingBottom: 22,
            borderBottom: "1px solid var(--line-2)",
          }}
        >
          <ul
            style={{
              listStyle: "none",
              padding: 0,
              margin: 0,
              display: "flex",
              flexWrap: "wrap",
              gap: 22,
              fontSize: 13,
              color: "var(--ink-2)",
            }}
          >
            {FOOTER_LINKS.map((l) => (
              <li key={l.label}>
                <a
                  href={l.href}
                  target={l.external ? "_blank" : undefined}
                  rel={l.external ? "noopener noreferrer" : undefined}
                  style={{ color: "inherit" }}
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 14,
            }}
          >
            <div style={{ display: "flex", gap: 10 }}>
              {SOCIAL.map((s) => (
                <a
                  key={s.alt}
                  href="#"
                  aria-label={s.alt}
                  style={{
                    width: 28,
                    height: 28,
                    display: "inline-flex",
                  }}
                >
                  <img
                    src={s.src}
                    alt={s.alt}
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "contain",
                      transition: "transform 0.15s",
                    }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.transform = "scale(1.08)")
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.transform = "scale(1)")
                    }
                  />
                </a>
              ))}
            </div>

            <select
              value={site}
              onChange={(e) => setSite(e.target.value)}
              style={{
                padding: "6px 28px 6px 12px",
                fontSize: 12.5,
                background:
                  "#fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%226%22 viewBox=%220 0 10 6%22><path fill=%22%236b6157%22 d=%22M0 0l5 6 5-6z%22/></svg>') no-repeat right 10px center",
                color: "var(--ink)",
                border: "1px solid var(--line)",
                borderRadius: 8,
                appearance: "none",
                WebkitAppearance: "none",
                cursor: "pointer",
                fontFamily: "var(--body)",
              }}
            >
              <option>잉글라이더 개인용</option>
              <option>잉글라이더 기관용</option>
              <option>잉글라이더 교회용</option>
            </select>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            gap: 24,
            paddingTop: 22,
            flexWrap: "wrap",
          }}
        >
          <img
            src="assets/logo.png"
            alt="englider"
            style={{ height: 26, width: "auto" }}
          />
          <div
            style={{
              fontSize: 12,
              color: "var(--ink-mute)",
              lineHeight: 1.7,
              textAlign: "center",
              flex: 1,
              minWidth: 280,
            }}
          >
            ㈜씨스케이프 · 경기도 화성시 동탄기흥로 594-7, 9층 917호(영천동, 루체스타비즈)
            <br />
            Tel: 1670-4232 · 사업자번호 220-88-93324 · 대표: 양선학
            <br />
            Copyright © 2015 SeeScape All rights reserved.
          </div>
        </div>
      </div>
    </footer>
  );
}

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