/* eslint-disable no-undef */

/* ---- ABOUT ---- */
function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="reveal section-index">01 — About</div>
        <div className="about-grid" style={{ marginTop: 28 }}>
          <div>
            <h2 className="serif about-h reveal">
              We don't build <em>applications.</em><br/>We build <em>students.</em>
            </h2>
            <div className="about-prose han reveal delay-1">
              <p>
                Resonet은 15년 동안 학생 한 명 한 명을 직접 마주해온 <strong>비스포크 어드미션 컨설팅</strong>입니다.
                매년 정원은 한정되어 있고, 모든 케이스는 디렉터가 처음부터 끝까지 함께합니다.
              </p>
              <p>
                좋은 대학에 가는 것과 좋은 사람이 되는 것은 같은 방향이라고 믿습니다.
                그래서 우리는 원서를 먼저 쓰지 않습니다.
                <strong> 학생이 누구인지를 먼저 발견합니다.</strong>
              </p>
              <p>
                그 학생만의 진짜 모습이 곧 가장 강력한 전략이 됩니다.
                공식도, 템플릿도, 지름길도 없습니다.
                Resonet은 그 학생만의 길을 함께 찾는 작업입니다.
              </p>
            </div>
          </div>

          <div className="reveal delay-2">
            <ul className="values">
              <li className="value">
                <span className="value-num">I.</span>
                <span className="serif value-name"><em>Identity</em></span>
                <span className="value-desc han">전략보다 먼저 세우는 정체성. 그 학생만의 결을 찾는 일에서 시작합니다.</span>
              </li>
              <li className="value">
                <span className="value-num">II.</span>
                <span className="serif value-name"><em>Integrity</em></span>
                <span className="value-desc han">꾸미지 않은 진실. 입시 너머에도 남는 한 사람의 무게.</span>
              </li>
              <li className="value">
                <span className="value-num">III.</span>
                <span className="serif value-name"><em>Intention</em></span>
                <span className="value-desc han">한 줄, 한 결정에도 의도를 담습니다. 정해진 정원, 깊은 시간.</span>
              </li>
            </ul>
          </div>
        </div>

        <a href="about.html" className="about-deeper reveal delay-3">
          <span className="about-deeper-rule" />
          <span className="about-deeper-text">
            Read our mission, principles, and motto.
            <span className="arr">→</span>
          </span>
        </a>
      </div>
    </section>
  );
}

/* ---- CONSULTING ---- */
function Consulting() {
  const services = [
    {
      tag: "PROGRAM A",
      name: <>Resonet <em>Full</em> Consulting</>,
      small: "2-Year Director-led Program",
      body: <>15년 경력의 디렉터가 직접 주관하는 풀 프로그램. 정체성 발견에서 출발해 전략 설계, EC 빌딩, 에세이, 원서까지 한 사람의 손으로 이어집니다.</>,
      meta: [["Duration", "24 months"], ["Capacity", "By application"], ["Lead", "Alex, Director"]]
    },
    {
      tag: "PROGRAM B",
      name: <>EBR <em>×</em> Resonet</>,
      small: "Early Bird Review × Essay Package",
      body: <>전직 Dartmouth Admissions Officer Sam Jeong과의 파트너십. Ivy 출신 AO의 직접 리뷰가 더해진 에세이 집중 프로그램.</>,
      meta: [["Partner", "Sam Jeong, ex-Dartmouth AO"], ["Format", "Review + Mentorship"], ["Stage", "Senior year"]]
    },
    {
      tag: "PROGRAM C",
      name: <>Art School <em>Admissions</em></>,
      small: "Portfolio + Application, integrated",
      body: <>Resonet Haus와 함께하는 아트스쿨 전문 패키지. 포트폴리오와 원서가 한 시선 아래 묶여 진행됩니다.</>,
      meta: [["With", "Resonet Haus"], ["Track", "RISD · Parsons · Pratt 외"], ["Format", "Portfolio + Apps"]]
    },
  ];

  return (
    <section className="section" id="consulting">
      <div className="container">
        <div className="reveal section-index">02 — Consulting</div>
        <div className="section-head" style={{ marginTop: 28 }}>
          <h2 className="serif h2 reveal">Crafted, <em>not</em> templated.</h2>
          <p className="hero-lede han reveal delay-1" style={{ animation: "none", opacity: 1, maxWidth: "44ch" }}>
            세 갈래의 길. 같은 철학.
            정원이 한정된 비스포크 프로그램입니다.
          </p>
        </div>

        <div className="services-rail reveal delay-2">
          {services.map((s, i) => (
            <a key={i} className="service" href="#contact">
              <div className="service-tag">{s.tag}</div>
              <h3 className="service-name serif">
                {s.name}
                <span className="small">{s.small}</span>
              </h3>
              <div className="service-body han">
                {s.body}
                <ul>
                  {s.meta.map(([k, v]) => (
                    <li key={k}><span>{k}</span><span className="k">{v}</span></li>
                  ))}
                </ul>
              </div>
              <span className="service-arrow">Learn more <span>→</span></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- HAUS ---- */
function Haus() {
  const divisions = [
    { num: "i.", name: <>Academy</>, desc: "아트 포트폴리오와 미술 수업. 입시를 위한 작업이 아니라, 작업을 위한 작업." },
    { num: "ii.", name: <><em>Design</em> Studio</>, desc: "외부 패션 브랜드와의 디자인 외주. 학생의 손이 진짜 시장을 통과하는 곳." },
    { num: "iii.", name: <>Project Directing</>, desc: "패션·비주얼 프로젝트의 기획부터 실행까지 — 디렉팅의 언어를 배웁니다." },
    { num: "iv.", name: <><em>Branding</em></>, desc: "학생 소셜 기업과 스타트업 인큐베이팅. 아이디어가 브랜드가 되는 첫 도약." },
  ];

  return (
    <section className="section haus" id="haus">
      <div className="container">
        <div className="reveal section-index">03 — Haus</div>
        <div className="section-head" style={{ marginTop: 28 }}>
          <h2 className="serif h2 reveal">Where creativity becomes <em>strategy.</em></h2>
          <p className="haus-tagline serif reveal delay-1">Make it visible.</p>
        </div>

        <div className="haus-grid">
          <p className="haus-intro han reveal">
            <strong>Resonet Creative Haus</strong>는 크리에이티브 디렉터 <em>Dongho</em>가 이끄는 크리에이티브 디비전입니다.
            학생의 창의성을 입시 전략으로, 또 실제 작업물로 옮기는 공간 — 이력서가 아니라 결과물로 말하는 자리.
          </p>

          <div className="divisions reveal delay-1">
            {divisions.map((d, i) => (
              <a key={i} className="division" href="#contact">
                <span className="division-num">{d.num}</span>
                <div>
                  <h4 className="division-name serif">{d.name}</h4>
                  <p className="division-desc han">{d.desc}</p>
                </div>
                <span className="division-arr">→</span>
              </a>
            ))}
          </div>
        </div>

        <div className="haus-cta reveal delay-2">
          <p className="haus-cta-line serif">
            Resonet Creative Haus가<br/>처음으로 공개하는 <em>첫 번째 프로젝트.</em>
          </p>
          <a className="btn-primary" href="#contact">Discover Haus <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ---- TEAM ---- */
function Team() {
  const members = [
    {
      initials: "A.",
      name: <>Alex</>,
      hoverName: "Alex",
      role: "Founder & Director",
      bio: "15년 입시 컨설팅. 정체성에서 출발하는 어드미션 어프로치를 만들었습니다. 모든 풀 컨설팅 케이스를 직접 주관합니다.",
      quote: "I read students before I read essays.",
    },
    {
      initials: "S.",
      name: <>오수빈 <em>Subin</em></>,
      hoverName: "오수빈 Subin",
      role: "Director, Client Relations",
      bio: "가족과 학생, 그리고 팀 사이의 언어를 옮깁니다. 모든 진지한 대화의 첫 문 — 신뢰가 쌓이는 자리.",
      quote: "Every program begins with listening.",
    },
    {
      initials: "P.",
      name: <>Patrick <em>Kim</em></>,
      hoverName: "Patrick Kim",
      role: "Essay Mentor",
      bio: "에세이는 글쓰기 이전에 사고의 작업이라고 믿습니다. 학생의 문장 뒤에 있는 사람을 찾는 멘토.",
      quote: "Find the sentence only you could write.",
    },
    {
      initials: "J.",
      name: <>Jiyoon <em>Kim</em></>,
      hoverName: "Jiyoon Kim",
      role: "Essay Mentor",
      bio: "정직한 문장이 가장 멀리 갑니다. 디테일과 구조를 함께 다듬는 두 번째 시선.",
      quote: "Honesty travels the farthest.",
    },
    {
      initials: "D.",
      name: <>하동호 <em>Dongho</em></>,
      hoverName: "하동호 Dongho",
      role: "Creative Director, Resonet Haus",
      bio: "패션·비주얼·브랜드. 학생의 창의성이 실제 작업물로 옮겨지는 공간을 이끕니다.",
      quote: "Make it visible. Then make it matter.",
    },
    {
      initials: "S.",
      name: <>Sam <em>Jeong</em></>,
      hoverName: "Sam Jeong",
      role: "Partner — EBR · ex-Dartmouth AO",
      bio: "전직 Dartmouth Admissions Officer. EBR(Early Bird Review) 파트너로 Ivy 출신 AO의 시선을 더합니다.",
      quote: "I read for what's true, not what's polished.",
    },
  ];

  return (
    <section className="section" id="team">
      <div className="container">
        <div className="reveal section-index">04 — Team</div>
        <div className="section-head" style={{ marginTop: 28 }}>
          <h2 className="serif h2 reveal">Quiet <em>experts.</em></h2>
        </div>

        <div className="team-grid">
          {members.map((m, i) => (
            <div key={i} className={cls("member", "reveal", `delay-${(i % 3) + 1}`)}>
              <div className="member-portrait">
                <div className="ph" />
                <div className="grain" />
                <span className="initials serif"><em>{m.initials}</em></span>
                <div className="quote serif">&ldquo;{m.quote}&rdquo;</div>
              </div>
              <h4 className="member-name serif">{m.name}</h4>
              <div className="member-role">{m.role}</div>
              <p className="member-bio han">{m.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA + FOOTER ---- */
function CTA() {
  return (
    <section className="cta-dark" id="contact">
      <span className="ornament" />
      <div className="container">
        <div className="reveal eyebrow">Request a conversation</div>
        <h2 className="cta-h serif reveal delay-1">
          Start with <em>who you are.</em>
        </h2>
        <p className="cta-sub serif reveal delay-2">
          정원이 한정된 비스포크 프로그램입니다.<br/>진지한 대화로 시작합니다.
        </p>
        <a className="cta-button reveal delay-3" href="mailto:hello@resonet.kr">
          Request a Conversation <span>→</span>
        </a>
        <p className="cta-mark serif reveal delay-4">Discover your own resonance.</p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">Resonet
              <small>주식회사 울림에듀케이션 · Woollim Education Inc.</small>
            </div>
          </div>
          <div className="foot-contact">
            admin@resonet.org<br/>
            Gangnam-Gu, Seoul
          </div>
        </div>
        <div className="foot-base">
          <span>© 2026 Resonet. All rights reserved.</span>
          <span className="resonance"><em>Resonet propria voce.</em></span>
        </div>
      </div>
    </footer>
  );
}

window.About = About;
window.Consulting = Consulting;
window.Haus = Haus;
window.Team = Team;
window.CTA = CTA;
window.Footer = Footer;