// Sections for odd duck landing — exposes Nav, Hero, Marquee, Manifesto, About, Contact, Footer
const { useState, useEffect } = React;

const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [overDark, setOverDark] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      // Check whether the dark Manifesto section is currently covering the top of viewport
      const m = document.querySelector('.manifesto');
      if (m) {
        const r = m.getBoundingClientRect();
        // top of nav (~32px below page top) sits inside the dark section
        setOverDark(r.top <= 40 && r.bottom > 40);
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const cls = `nav${scrolled ? ' scrolled' : ''}${overDark ? ' over-dark' : ''}`;
  return (
    <nav className={cls}>
      <a className="nav-mark" href="#top">
        <img src="assets/duck-character.png" alt="odd duck" />
        <span>ODD DUCK<sup style={{fontSize:9, marginLeft:4, opacity:0.6}}>™</sup></span>
      </a>
      <div className="nav-links">
        <a href="#work">Work</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
        <a href="#" aria-label="Korean / English">KO / EN</a>
      </div>
    </nav>
  );
};

const Hero = () => {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, "0");
      const mm = String(d.getMinutes()).padStart(2, "0");
      const ss = String(d.getSeconds()).padStart(2, "0");
      setTime(`${hh}:${mm}:${ss} KST`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-top">
        <div className="corner">
          <span className="eyebrow">★ Est. 2026 · Songdo</span>
          <span style={{opacity:0.6, fontSize:11}}>{time}</span>
        </div>
        <div className="corner right">
          <span className="eyebrow">An odd little studio</span>
          <span className="ko" style={{opacity:0.6, fontSize:11}}>이상한 것을 만드는 작은 스튜디오</span>
        </div>
      </div>

      <div className="hero-mid">
        <div className="hero-duck-wrap">
          <img src="assets/duck-character.png" alt="odd duck mascot" className="duck-wobble" />
          <div className="hero-duck-callout">our<br/>actual<br/>boss 사장님</div>
        </div>

        <h1 className="hero-headline">
          <span className="row">We make</span>
          <span className="row indent">
            <span className="outline">strange</span>
            <span className="scribble">↻ weird-ish</span>
          </span>
          <span className="row">
            <span className="sans">things</span> <span style={{fontSize:'0.55em', verticalAlign:'middle', opacity:0.5}}>—</span>
          </span>
          <span className="row indent-2">
            <span className="duck-color">with AI.</span>
          </span>
        </h1>
      </div>

      <div className="hero-bottom">
        <div className="lede">
          A creative studio prototyping unusual games &amp; tools, one experiment at a time.
          <span className="ko">AI로 이상한 게임과 도구를 만드는 2인 실험 중심 크리에이티브 스튜디오입니다.</span>
        </div>
        <div className="meta">
          <div className="label">Currently</div>
          <div>2 ducks shipping<br/>1 mascot supervising<br/>∞ coffees</div>
          <img src="assets/duck-surprised.png" alt="" style={{display:'block', width:64, marginTop:14, transform:'rotate(-6deg)'}} />
        </div>
        <div className="cta">
          <a className="btn" href="#contact">
            <span className="blink"></span>
            Say hi · 안녕하세요
          </a>
          <a className="btn btn-ghost" href="#about">Meet the ducks ↓</a>
        </div>
      </div>
    </section>
  );
};

const Marquee = () => {
  const items = [
    {t:"AI experiments"}, {dot:true},
    {t:"이상하게 잘 만듭니다", ko:true}, {dot:true},
    {t:"playful prototypes", italic:true}, {dot:true},
    {t:"DUCK-DRIVEN DEV", sans:true}, {dot:true},
    {t:"weird is good!", hand:true}, {dot:true},
    {t:"오리는 진심입니다", ko:true}, {dot:true},
    {t:"quack the impossible", italic:true}, {dot:true},
    {t:"made in Songdo ✨", hand:true}, {dot:true},
  ];
  const all = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {all.map((it, i) => {
          if (it.dot) return <span className="dot" key={i}>★</span>;
          let cls = "word";
          if (it.sans) cls += " sans";
          if (it.ko) cls += " ko";
          if (it.hand) return <span className="hand-word" key={i}>{it.t}</span>;
          return <span className={cls} key={i}>{it.t}</span>;
        })}
      </div>
    </div>
  );
};

const Manifesto = () => (
  <section className="manifesto" id="work">
    <div className="container">
      <span className="eyebrow">— 01 / Manifesto · 우리가 하는 일</span>
      <h2>
        We chase <span className="strike">good</span> <span className="hi">odd</span> ideas,<br/>
        then build them <span className="sans">on purpose</span>.
      </h2>
      <div className="grid">
        <div className="card">
          <div className="num">— a.</div>
          <h3>Experiment first.</h3>
          <span className="ko-sub">실험이 먼저입니다.</span>
          <p>We prototype the weird half before anyone asks if it's a good idea. Most don't survive. The survivors get strange and useful.</p>
          <span className="sticky-note">most don't survive *</span>
        </div>
        <div className="card">
          <div className="num">— b.</div>
          <h3>AI as a co-author.</h3>
          <span className="ko-sub">AI는 공동저자입니다.</span>
          <p>Not a feature, not a wrapper. We treat generative models like a slightly-too-honest collaborator — argue with it, edit it, give it credit.</p>
        </div>
        <div className="card">
          <div className="num">— c.</div>
          <h3>Ship the duck.</h3>
          <span className="ko-sub">완성도보단 출시.</span>
          <p>Small, opinionated releases &gt; one giant launch. Every other Friday something odd goes out the door. Sometimes it quacks.</p>
          <span className="handnote orange" style={{marginTop:14, display:'inline-block', transform:'rotate(-3deg)'}}>← yes, really every Friday</span>
          <img src="assets/duck-running-light.png" alt="" style={{display:'block', width:140, marginTop:24, opacity:0.95}} />
        </div>
      </div>
    </div>
  </section>
);

const About = () => (
  <section className="about" id="about">
    <div className="container">
      <div className="about-head">
        <span className="eyebrow">— 02 / About · 소개</span>
        <div>
          <h2 className="lede">
            We're a tiny <span className="hl">two-duck</span> studio (plus one mascot)
            <br/> turning <span className="sans">odd</span> hunches into <span className="ko">출시되는 제품</span>.
          </h2>
        </div>
      </div>

      <div className="about-body">
        <div>
          <p>odd duck is a Songdo-based studio of two — a designer and an engineer, plus one suspiciously vocal mascot — building experimental software with AI at the core. We started in a co-working space above a pet shop. We never left.</p>
          <p className="ko">odd duck은 인천 송도에 자리한 2인 크리에이티브 스튜디오입니다 (마스코트 1인 포함). AI를 중심에 둔 게임과 도구를 직접 기획하고 만듭니다. 우리는 결과가 약간 이상해도 — 아니, 이상해야 — 좋다고 믿습니다.</p>
          <div className="pair" style={{marginTop:32}}>
            <div className="stamp">①</div>
            <div>
              <strong style={{fontFamily:'var(--sans)', fontWeight:700}}>All ducks, all week.</strong>
              <p style={{margin:'4px 0 0'}}>No clients, no agency hours. Every day — weekends very much included — goes into the experiments we want to exist.</p>
            </div>
          </div>
          <div className="pair" style={{marginTop:20}}>
            <div className="stamp">②</div>
            <div>
              <strong style={{fontFamily:'var(--sans)', fontWeight:700}}>Two by design.</strong>
              <p style={{margin:'4px 0 0'}}>Two ducks, two opinions, zero standing meetings. Everything that could be a duck is a duck.</p>
            </div>
          </div>
        </div>

        <div>
          <p>Our work is our work. We build things we're curious about — small games, generative tools, experiments that may quietly turn into a product.</p>
          <p className="ko">우리는 우리 것을 만듭니다. 호기심에서 출발한 게임, 생성형 도구, 실험들을 직접 기획해서 내놓습니다. 그중 일부는 조용히 제품이 됩니다.</p>
          <div className="pair" style={{marginTop:32}}>
            <div className="stamp">③</div>
            <div>
              <strong style={{fontFamily:'var(--sans)', fontWeight:700}}>Both ducks ship.</strong>
              <p style={{margin:'4px 0 0'}}>Everyone writes, designs, and pushes code. Job titles below are mostly for the parents.</p>
            </div>
          </div>
          <div className="pair" style={{marginTop:20}}>
            <div className="stamp">④</div>
            <div>
              <strong style={{fontFamily:'var(--sans)', fontWeight:700}}>One mascot, taken seriously.</strong>
              <p style={{margin:'4px 0 0'}}>The mascot has a name (꽥). Salary paid in bread, title non-negotiable.</p>
              <div style={{display:'flex', alignItems:'center', gap:16, marginTop:14}}>
                <img src="assets/duck-sleeping.png" alt="sleeping mascot" style={{display:'block', width:120, opacity:0.95}} />
                <span className="handnote orange" style={{transform:'rotate(-2deg)'}}>← VIP, do not disturb</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="team">
        <div className="team-head">
          <h3>The ducks · 멤버</h3>
          <span className="count">(03 / 03)</span>
        </div>
        <Team />
      </div>
    </div>
  </section>
);

const Team = () => {
  const members = [
    { name: "Wooduck", ko: "우덕", role: "Co-founder · Engineering / Direction", bio: "Believes type should have a sense of humor.", bioKo: "타이포그래피에도 유머가 있어야 한다고 믿는 사람." },
    { name: "Chooduck", ko: "추덕", role: "Co-founder · Design / AI", bio: "Ships on Fridays. Argues with models for a living.", bioKo: "금요일에만 배포합니다. 모델과 논쟁하는 게 직업입니다." },
    { name: "Quack", ko: "꽥", role: "Mascot · Morale Officer", bio: "Salary paid in bread. Title non-negotiable.", bioKo: "월급은 빵. 직함 협상 불가." },
  ];
  return (
    <div className="team-list">
      {members.map((m, i) => (
        <div className="team-row" key={m.name}>
          <span className="idx">— {String(i+1).padStart(2, "0")}</span>
          <span className="name">{m.name} <span className="ko" style={{fontSize:'0.5em', opacity:0.6, marginLeft:8}}>· {m.ko}</span></span>
          <span className="role">{m.role}</span>
          <span className="bio">{m.bio}<br/><span className="ko" style={{opacity:0.7}}>{m.bioKo}</span></span>
          <span className="arrow">↗</span>
          {m.name === "Quack" && <span className="vip-note">— (the mascot has tenure)</span>}
        </div>
      ))}
    </div>
  );
};

const Contact = () => (
  <section className="contact" id="contact">
    <div className="container" style={{position:'relative'}}>
      <div className="contact-stamp">
        <img src="assets/duck-dancing.png" alt="" />
      </div>
      <span className="eyebrow">— 03 / Contact · 연락하기</span>
      <h2>
        Let's<br/>
        <span className="duck">make</span> something<br/>
        <span className="outline">odd.</span>
      </h2>

      <div className="contact-cta">
        <span className="contact-email-wrap">
          <a className="contact-email" href="mailto:hi@oddduck.ooo">hi@oddduck.ooo →</a>
          <span className="handnote handnote-abs orange">we read everything!</span>
        </span>

        <div className="contact-info">
          <div className="label">Say hi · 인사</div>
          <p>Show us something weird, tell us what you're playing with, or just say hi. No briefs, no pitch decks — we read everything.</p>
          <p className="ko" style={{marginTop:8, opacity:0.85}}>이상한 거 자랑하셔도 좋고, 요즘 만지작거리는 거 들려주셔도 좋고, 그냥 안녕하셔도 좋습니다. 다 읽습니다.</p>
        </div>

        <div className="contact-info">
          <div className="label">Studio</div>
          <p className="ko">인천 송도 어딘가의 34층 혹은 48층</p>
          <p>Songdo, Incheon</p>
          <p style={{marginTop:12}}>
            <a href="#">Twitter / X</a> &nbsp;·&nbsp; <a href="#">Instagram</a> &nbsp;·&nbsp; <a href="#">GitHub</a>
          </p>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div className="col lockup">
          <img src="assets/duck-logo.png" alt="odd duck" />
          <span className="tagline">An odd<br/>little studio,<br/>est. 2026.</span>
        </div>
        <div className="col">
          <h4>Sitemap</h4>
          <a href="#top">Home</a>
          <a href="#work">Manifesto</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="col">
          <h4>Find us</h4>
          <a href="#">Twitter / X</a>
          <a href="#">Instagram</a>
          <a href="#">GitHub</a>
          <a href="mailto:hi@oddduck.ooo">hi@oddduck.ooo</a>
        </div>
        <div className="col">
          <h4>Studio · 스튜디오</h4>
          <p className="ko">인천 송도</p>
          <p>Songdo, Incheon</p>
          <p style={{marginTop:12, opacity:0.6}}>Mon–Thu, sometimes Fri</p>
        </div>
      </div>
      <div className="footer-bottom">
        <span className="lockup-mini">© 2026 odd duck studio · oddduck.ooo · All quacks reserved.</span>
        <span><span className="hand-sig">Made with bread crumbs &amp; coffee,</span> in Songdo.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Marquee, Manifesto, About, Team, Contact, Footer });