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

/* ============================================================
   LOGO, four rounded vertical pills, animated as living mark
   ============================================================ */
const PILLS = [
{ id: 'orange', top: 'var(--orange-top)', bot: 'var(--orange-bot)' },
{ id: 'pink', top: 'var(--pink-top)', bot: 'var(--pink-bot)' },
{ id: 'blue', top: 'var(--blue-top)', bot: 'var(--blue-bot)' },
{ id: 'green', top: 'var(--green-top)', bot: 'var(--green-bot)' }];


function Logo({ size = 32, motion = 'restrained', interactive = true, scrollLink = 0, animateIn = true }) {
  // Four rounded vertical pills, geometry from the golden-ratio brand mark
  // (pill 118×292, gap 56). `size` drives the rendered HEIGHT; width follows.
  // scrollLink: 0..1, compresses/expands the pills as a function of scroll
  const pillCount = 4;
  const pw = 118;
  const ph = 292;
  const gapPx = 56;
  const pad = 16; // breathing room so scale/translate animation isn't clipped
  const markW = pillCount * pw + (pillCount - 1) * gapPx; // 640
  const W = markW + pad * 2;
  const H = ph + pad * 2;

  // animation states
  const [mounted, setMounted] = useState(!animateIn);
  useEffect(() => {
    if (!animateIn) return;
    const t = setTimeout(() => setMounted(true), 80);
    return () => clearTimeout(t);
  }, [animateIn]);

  // breathing pulse per pill (CSS animation, just set delay)
  return (
    <svg
      className="verveli-logo"
      viewBox={`0 0 ${W} ${H}`}
      height={size}
      width={size * (W / H)}
      style={{ display: 'block', overflow: 'visible' }}
      aria-label="Verveli">

      <defs>
        {PILLS.map((p) =>
        <linearGradient key={p.id} id={`grad-${p.id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={p.top} />
            <stop offset="100%" stopColor={p.bot} />
          </linearGradient>
        )}
      </defs>
      {PILLS.map((p, i) => {
        const x = pad + i * (pw + gapPx);
        const compress = 1 - scrollLink * 0.18; // scroll: compress slightly
        const yOffset = ph * (1 - compress) / 2;
        const yScale = compress;
        const delay = i * 110;
        return (
          <g
            key={p.id}
            style={{
              transformOrigin: `${x + pw / 2}px ${pad + ph / 2}px`,
              transform: mounted ?
              `translateY(${yOffset}px) scaleY(${yScale})` :
              `translateY(${ph * 0.4}px) scaleY(0.6)`,
              opacity: mounted ? 1 : 0,
              transition: `transform 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms, opacity 700ms ease ${delay}ms`
            }}>
            
            <rect
              className="pill"
              x={x}
              y={pad}
              width={pw}
              height={ph}
              rx={pw / 2}
              ry={pw / 2}
              fill={`url(#grad-${p.id})`}
              style={{
                transformBox: 'fill-box',
                transformOrigin: '50% 100%',
                animation: motion === 'off' ?
                'none' :
                `verveliPresence 4.8s ease-in-out ${i * 0.18}s infinite`
              }} />
            
          </g>);

      })}
    </svg>);

}

// keyframes injected once
function injectLogoKeyframes() {
  if (document.getElementById('verveli-logo-keyframes')) return;
  const style = document.createElement('style');
  style.id = 'verveli-logo-keyframes';
  style.textContent = `
    @keyframes verveliPresence {
      0%, 100% { transform: translateY(0) scaleY(1); filter: saturate(1); }
      36%      { transform: translateY(-16px) scaleY(1.035); filter: saturate(1.08); }
      58%      { transform: translateY(0) scaleY(0.985); }
    }
  `;
  document.head.appendChild(style);
}

/* ============================================================
   PHONE FRAME
   ============================================================ */
function PhoneFrame({ children }) {
  return (
    <div className="phone">
      <div className="bezel-shine"></div>
      <div className="screen">
        <div className="notch"></div>
        <div className="statusbar">
          <span>9:41</span>
          <span className="right">
            <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><path d="M1 8 h2 v1 H1z M4 6 h2 v3 H4z M7 4 h2 v5 H7z M10 2 h2 v7 H10z" /></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="0.5" y="2" width="10" height="6" rx="1.4" /><rect x="11.5" y="4" width="1" height="2" fill="currentColor" /></svg>
          </span>
        </div>
        {children}
      </div>
    </div>);

}

function TabBar({ active = 'today' }) {
  const tabs = [
  { id: 'today', label: 'Today', ic: '🗞' },
  { id: 'signals', label: 'Signals', ic: '📡' },
  { id: 'alumni', label: 'Alumni', ic: '👥' },
  { id: 'community', label: 'Community', ic: '🌐' }];

  // Use SVGs not emoji
  const icons = {
    today: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>,
    signals: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 16c0-3.9 3.1-7 7-7s7 3.1 7 7" /><path d="M8.5 16c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5" /><circle cx="12" cy="16" r="1.2" fill="currentColor" /></svg>,
    alumni: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="9" r="3" /><circle cx="17" cy="10" r="2.4" /><path d="M3.5 18c.7-2.6 3-4.5 5.5-4.5s4.8 1.9 5.5 4.5" /><path d="M14.5 17c.5-1.9 2-3 3.5-3 1.4 0 2.7 1 3.2 2.6" /></svg>,
    community: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="8.5" /><path d="M3.5 12h17M12 3.5c2.6 3 2.6 14 0 17M12 3.5c-2.6 3-2.6 14 0 17" /></svg>
  };
  return (
    <div className="tabbar">
      {tabs.map((t) =>
      <div key={t.id} className="tab" data-active={String(active === t.id)}>
          <div className="ic">{icons[t.id]}</div>
          <span>{t.label}</span>
        </div>
      )}
    </div>);

}

/* ============================================================
   PHONE SCREENS, Today / Signals / Alumni / Community
   ============================================================ */

function ScreenToday() {
  return (
    <>
      <div className="screen-content">
        <div className="tab-header">
          <div className="title">Today</div>
          <div className="icon-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 10-12 0v3.2a2 2 0 01-.6 1.4L4 17h5" /><path d="M9 17a3 3 0 006 0" /></svg>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
          <span className="chip"><span className="dot"></span>For you</span>
          <span className="chip">Events</span>
          <span className="chip">News</span>
          <span className="chip">Photos</span>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi"></div>
            <div>
              <div className="name">Today’s question</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>From the institute</div>
            </div>
            <div className="when">2h</div>
          </div>
          <div className="body" style={{ fontWeight: 500, color: 'var(--ink)' }}>
            What’s one habit from campus you still keep?
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10, fontSize: 10.5, color: 'var(--ink-3)' }}>
            <span>↳ 38 answers</span>
            <span>· 4 from your batch</span>
          </div>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi" style={{ background: 'color-mix(in oklab, var(--c-pink) 30%, var(--paper-3))' }}></div>
            <div>
              <div className="name">Alumni Day · Bengaluru</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Sat, Nov 22 · RSVP open</div>
            </div>
            <div className="when">·</div>
          </div>
          <div className="image"></div>
          <div style={{ display: 'flex', gap: 8, marginTop: 8, alignItems: 'center' }}>
            <span className="chip">Going · 42</span>
            <span className="chip">Maybe · 18</span>
          </div>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi" style={{ background: 'color-mix(in oklab, var(--c-blue) 26%, var(--paper-3))' }}></div>
            <div>
              <div className="name">Campus News</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Office of Alumni Affairs</div>
            </div>
            <div className="when">1d</div>
          </div>
          <div className="body">
            Convocation 2026 dates announced. Returning alumni travel notes inside.
          </div>
        </div>
      </div>
      <TabBar active="today" />
    </>);

}

function ScreenSignals() {
  return (
    <>
      <div className="screen-content">
        <div className="tab-header">
          <div className="title">Signals</div>
          <div className="icon-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
          <span className="chip"><span className="dot"></span>All</span>
          <span className="chip">Hiring</span>
          <span className="chip">Referrals</span>
          <span className="chip">Help</span>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi" style={{ background: 'color-mix(in oklab, var(--c-green) 32%, var(--paper-3))' }}></div>
            <div>
              <div className="name">A. Iyer · ’14</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Hiring · Bengaluru</div>
            </div>
            <div className="when">3h</div>
          </div>
          <div className="body" style={{ color: 'var(--ink)', fontWeight: 500 }}>
            Looking for senior backend engineers. Referrals welcome from any batch.
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <span className="chip">Full-time</span>
            <span className="chip">Remote OK</span>
          </div>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi" style={{ background: 'color-mix(in oklab, var(--c-pink) 28%, var(--paper-3))' }}></div>
            <div>
              <div className="name">Who works at Stripe?</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Discovery</div>
            </div>
            <div className="when">·</div>
          </div>
          <div style={{ display: 'flex', gap: -6, marginTop: 6, alignItems: 'center' }}>
            <div className="avi" style={{ width: 26, height: 26, background: 'color-mix(in oklab, var(--c-orange) 26%, var(--paper-3))' }}></div>
            <div className="avi" style={{ width: 26, height: 26, background: 'color-mix(in oklab, var(--c-blue) 26%, var(--paper-3))', marginLeft: -8 }}></div>
            <div className="avi" style={{ width: 26, height: 26, background: 'color-mix(in oklab, var(--c-green) 26%, var(--paper-3))', marginLeft: -8 }}></div>
            <span style={{ fontSize: 11, color: 'var(--ink-2)', marginLeft: 10 }}>7 alumni · 3 in your city</span>
          </div>
        </div>

        <div className="feed-card">
          <div className="meta">
            <div className="avi"></div>
            <div>
              <div className="name">R. Menon · ’09</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Asking for help</div>
            </div>
            <div className="when">1d</div>
          </div>
          <div className="body">
            Moving back to campus city. Anyone who can recommend a paediatrician?
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 8, fontSize: 10.5, color: 'var(--ink-3)' }}>
            <span>↳ 6 replies</span>
          </div>
        </div>
      </div>
      <TabBar active="signals" />
    </>);

}

function ScreenAlumni() {
  const profiles = [
  { name: 'Priya Shah', batch: '’11 · Director, Public Health', tint: 'var(--c-pink)' },
  { name: 'Vikram Rao', batch: '’02 · Founder, Indus Robotics', tint: 'var(--c-orange)' },
  { name: 'Ananya Bose', batch: '’17 · Postdoc, MIT', tint: 'var(--c-blue)' },
  { name: 'Karan Mehta', batch: '’08 · Partner, Sequoia', tint: 'var(--c-green)' }];

  return (
    <>
      <div className="screen-content">
        <div className="tab-header">
          <div className="title">Alumni</div>
          <div className="icon-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
          <span className="chip"><span className="dot"></span>Featured</span>
          <span className="chip">By batch</span>
          <span className="chip">By city</span>
        </div>

        <div className="feed-card" style={{ padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div className="avi" style={{ width: 56, height: 56, background: `linear-gradient(135deg, color-mix(in oklab, var(--c-orange) 40%, var(--paper-3)), color-mix(in oklab, var(--c-pink) 30%, var(--paper-3)))` }}></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Featured this week</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-2)', marginTop: 2, lineHeight: 1.45 }}>
                Priya Shah, ’11, leading vaccine logistics in Tier 2 cities.
              </div>
            </div>
          </div>
        </div>

        {profiles.slice(0, 3).map((p, i) =>
        <div key={i} className="feed-card" style={{ padding: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="avi" style={{ width: 34, height: 34, background: `color-mix(in oklab, ${p.tint} 30%, var(--paper-3))` }}></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="name">{p.name}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{p.batch}</div>
              </div>
              <button style={{ fontSize: 10, padding: '5px 10px', borderRadius: 999, border: '1px solid var(--line)', background: 'var(--paper)', color: 'var(--ink-2)' }}>View</button>
            </div>
          </div>
        )}
      </div>
      <TabBar active="alumni" />
    </>);

}

function ScreenCommunity() {
  return (
    <>
      <div className="screen-content">
        <div className="tab-header">
          <div className="title">Community</div>
          <div className="icon-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
          </div>
        </div>

        <div style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '6px 2px 8px', fontWeight: 500 }}>
          City chapters
        </div>
        <div className="feed-card" style={{ padding: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: 'color-mix(in oklab, var(--c-blue) 22%, var(--paper-3))' }}></div>
            <div style={{ flex: 1 }}>
              <div className="name">Bengaluru chapter</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Lead: M. Pillai · 384 members</div>
            </div>
            <span className="chip">Joined</span>
          </div>
        </div>
        <div className="feed-card" style={{ padding: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: 'color-mix(in oklab, var(--c-green) 22%, var(--paper-3))' }}></div>
            <div style={{ flex: 1 }}>
              <div className="name">SF Bay Area</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>Lead: S. Krishnan · 211 members</div>
            </div>
            <span className="chip">Join</span>
          </div>
        </div>

        <div style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '14px 2px 8px', fontWeight: 500 }}>
          Groups
        </div>
        <div className="feed-card" style={{ padding: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: 'color-mix(in oklab, var(--c-orange) 22%, var(--paper-3))' }}></div>
            <div style={{ flex: 1 }}>
              <div className="name">Founders &amp; Operators</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>97 members · EC: 3</div>
            </div>
          </div>
        </div>
        <div className="feed-card" style={{ padding: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: 'color-mix(in oklab, var(--c-pink) 22%, var(--paper-3))' }}></div>
            <div style={{ flex: 1 }}>
              <div className="name">Class of ’14</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>From WhatsApp directory · 142</div>
            </div>
          </div>
        </div>
      </div>
      <TabBar active="community" />
    </>);

}

const SCREENS = {
  today: ScreenToday,
  signals: ScreenSignals,
  alumni: ScreenAlumni,
  community: ScreenCommunity
};

function Phone({ screen = 'today' }) {
  const S = SCREENS[screen] || ScreenToday;
  return (
    <PhoneFrame>
      <S />
    </PhoneFrame>);

}

Object.assign(window, { Logo, Phone, PhoneFrame, injectLogoKeyframes });