// iPhone mockup — mirrors the 4 onboarding screens from Figma
const { useState, useEffect, useRef } = React;

// ── System icons ──────────────────────────────────────────
const IconBattery = () =>
<svg width="22" height="11" viewBox="0 0 22 11" fill="none">
    <rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="white" opacity="0.6" />
    <rect x="2" y="2" width="15" height="7" rx="1.5" fill="white" />
    <rect x="20" y="3.5" width="1.5" height="4" rx="0.5" fill="white" opacity="0.6" />
  </svg>;

const IconSignal = () =>
<svg width="16" height="11" viewBox="0 0 16 11" fill="white">
    <rect x="0" y="7" width="2.5" height="4" rx="0.5" />
    <rect x="4" y="5" width="2.5" height="6" rx="0.5" />
    <rect x="8" y="3" width="2.5" height="8" rx="0.5" />
    <rect x="12" y="0" width="2.5" height="11" rx="0.5" />
  </svg>;

const IconWifi = () =>
<svg width="14" height="11" viewBox="0 0 14 11" fill="white">
    <path d="M7 0a13 13 0 0 1 9 4l-1.5 1.5a11 11 0 0 0-15 0L-2 4A13 13 0 0 1 7 0z" transform="translate(2,1)" opacity="0.5" />
    <path d="M7 4a7.5 7.5 0 0 1 5.3 2.2L11 7.7a5.5 5.5 0 0 0-8 0L1.7 6.2A7.5 7.5 0 0 1 7 4z" opacity="0.8" />
    <circle cx="7" cy="9.5" r="1.5" />
  </svg>;

const IconPlus = () =>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M12 5v14M5 12h14" />
  </svg>;

const IconArrowUp = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 4l8 8h-5v8h-6v-8H4z" />
  </svg>;


// ── Slide 1: World Overview ────────────────────────────────
function SlideWorlds({ copy }) {
  const c = copy.iphone;
  return (
    <div className="screen-slide active">
      <div className="s-header">
        <div className="s-title-block">
          <div className="s-title">{c.worldTitle}</div>
        </div>
        <div className="s-action"><IconPlus /></div>
      </div>

      {c.worlds.map((w, i) =>
      <div className="world-card" key={i}>
          <div className="row">
            <div
            className="cover"
            style={i === 0
              ? { backgroundImage: "url(assets/world-thumb.png)" }
              : { background: "linear-gradient(135deg,#c98d8d,#a87171)" }} />
          
            <div className="meta">
              <div className="name-row">
                <span className="name">{w.name}</span>
                {w.isNew && <span className="badge-new">NEW</span>}
              </div>
            </div>
            <div className="more"><span></span></div>
          </div>
          <div className="desc">{w.desc}</div>
          <div className="tags">
            {w.tags.map(([e, t], j) =>
          <span className="tag" key={j}>
                <span className="e">{e}</span>{t}
              </span>
          )}
          </div>
        </div>
      )}
    </div>);

}

// ── Slide 2: Customise — region edit ───────────────────────
function SlideCustomise({ copy }) {
  const r = copy.iphone.region;
  return (
    <div className="screen-slide active">
      <div className="region-card">
        <div className="top">
          <div className="cover" />
          <div>
            <div className="nm">{r.name}</div>
            <div className="rg">{r.kind}</div>
          </div>
        </div>
        <div className="fields">
          <div className="field">
            <span className="k">{r.labels.government}</span>
            <span className="v">
              <span className="em">{r.government.icon}</span>
              {r.government.value}
            </span>
          </div>
          <div className="field">
            <span className="k">{r.labels.population}</span>
            <span className="v">
              <span className="em">{r.population.icon}</span>
              {r.population.value}
              <span className="stepper">
                <button>−</button>
                <button>+</button>
              </span>
            </span>
          </div>
          <div className="field">
            <span className="k">{r.labels.capital}</span>
            <span className="v violet">
              <span className="em">{r.capital.icon}</span>
              {r.capital.value}
            </span>
          </div>
        </div>
      </div>

      <div className="chat-bubble" style={{ marginTop: 28 }}>
        {r.bubble}
      </div>
    </div>);

}

// ── Slide 3: AI find & change ──────────────────────────────
function SlideAIChat({ copy }) {
  const a = copy.iphone.ai;
  return (
    <div className="screen-slide active">
      <div className="ai-thread">
        <div className="ai-msg-user">{a.userMsg}</div>
        <div className="ai-result">
          <div className="lead">
            {a.leadPre}
            <span className="chip">{a.leadChip}</span>
          </div>
          <div className="ready">{a.ready}</div>
          <div className="diff">
            {a.diff.map((d, i) =>
            <div className="diff-row" key={i}>
                <span>{d.k}:</span>
                <span className="val">{d.v}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="ai-compose">
        <span>{a.composing}</span>
        <span className="caret"></span>
        <div className="send-btn"><IconArrowUp /></div>
      </div>
    </div>);

}

// ── Slide 4: Roleplay simulation ───────────────────────────
function SlideRoleplay({ copy }) {
  const r = copy.iphone.rp;
  return (
    <div className="screen-slide active">
      <div className="rp-scene">
        <div className="quest-bubble">
          <span className="scroll">📜</span>
          <span className="label">{r.quest.label}</span>
          <span className="title">{r.quest.title}</span>
        </div>

        <div className="rp-portrait p1" style={{ backgroundImage: "url(assets/portrait-wizard.png)" }} />
        <div className="rp-portrait p2" style={{ backgroundImage: "url(assets/portrait-redhead.png)" }} />
        <div className="rp-portrait p3" style={{ backgroundImage: "url(assets/portrait-dwarf.png)" }} />

        <div className="rp-dialogue">{r.dialogue}</div>
      </div>
    </div>);

}

// ── iPhone wrapper ─────────────────────────────────────────
function IPhone({ lang, slide, onSlide, parallax = 0 }) {
  const copy = window.COPY[lang];
  const slides = [SlideWorlds, SlideCustomise, SlideAIChat, SlideRoleplay];
  const Active = slides[slide];

  // Subtle mouse tilt
  const stageRef = useRef(null);
  const [tilt, setTilt] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => {
      const rect = stageRef.current?.getBoundingClientRect();
      if (!rect) return;
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / window.innerWidth;
      const dy = (e.clientY - cy) / window.innerHeight;
      setTilt({ x: dy * -6, y: dx * 6 });
    };
    window.addEventListener("mousemove", handler);
    return () => window.removeEventListener("mousemove", handler);
  }, []);

  return (
    <div
      className="iphone-stage"
      ref={stageRef}
      style={{ transform: `translate3d(0, ${parallax * -40}px, 0)` }}>
      
      <div
        className="iphone"
        style={{
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition: "transform 200ms cubic-bezier(0.4,0,0.2,1)"
        }}>
        
        <div className="iphone-side-btns"></div>
        <div className="iphone-side-btns"></div>
        <div className="iphone-side-btns"></div>
        <div className="iphone-power"></div>
        <div className="iphone-screen">
          <div className="iphone-notch"></div>
          <div className="screen-status">
            <span>9:41</span>
            <span className="right">
              <IconSignal />
              <IconWifi />
              <IconBattery />
            </span>
          </div>
          <div className="screen-stage">
            <Active copy={copy} key={`${slide}-${lang}`} />
          </div>
          <div className="dots">
            {slides.map((_, i) =>
            <div
              key={i}
              className={`dot ${i === slide ? "active" : ""}`}
              onClick={() => onSlide && onSlide(i)}
              style={{ cursor: "pointer" }} />

            )}
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { IPhone });