// Direction B — Editorial Stack (PURE variant)
// Massive wordmark hero, then each app is a tall editorial section with
// floating phone + story, alternating sides. Adds Process + Testimonials.

function HomeEditorial({ tilt = 4, float = 1 }) {
  const [active, setActive] = React.useState(APPS[0]);
  const [paused, setPaused] = React.useState(false);

  return (
    <div className="bz-page bz-noise" style={{ minHeight: '100vh', position: 'relative' }}>
      {/* Brand logo bar */}
      <header className="bz-brand-bar" style={{
        padding: '20px 56px 0',
        position: 'relative',
        zIndex: 10,
      }}>
        <Wordmark size={20} />
      </header>

      <main style={{ position: 'relative', zIndex: 2 }}>
        {/* Hero — type + interactive orbit, side by side */}
        <section className="bz-hero-section" style={{
          minHeight: 'calc(100vh - 56px)',
          padding: '12px 56px 60px',
          display: 'grid',
          gridTemplateRows: '1fr auto',
          gap: 40,
          position: 'relative',
        }}>
          <div className="bz-hero-grid" style={{
            display: 'grid',
            gridTemplateColumns: '1.1fr 540px',
            gap: 40,
            alignItems: 'center',
          }}>
            {/* Left — type */}
            <div style={{ maxWidth: 760 }}>
              <h1 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(72px, 11vw, 168px)',
                fontWeight: 700,
                lineHeight: 0.86,
                letterSpacing: '-0.045em',
                margin: 0,
              }}>
                Everything<br/>
                <span style={{ color: 'var(--accent)' }}>connects.</span>
              </h1>
              <p className="bz-body" style={{ marginTop: 28, fontSize: 20, maxWidth: 560, lineHeight: 1.45 }}>
                We're 360 Buzz — a small studio shipping mobile and web apps under one roof. Three products. One system. Every release sharpens the next.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <a className="bz-btn" href="#1glance">See the apps →</a>
              </div>
            </div>

            {/* Right — interactive orbit */}
            <div className="bz-hero-orbit" style={{ position: 'relative', height: 680, display: 'grid', placeItems: 'start center', paddingTop: 20 }}>
              <div style={{ position: 'absolute', top: 20, left: 0, right: 0, height: 540, display: 'grid', placeItems: 'center' }}>
                <OrbitLogo
                  size={540}
                  radius={220}
                  nodes={APPS}
                  activeId={active.id}
                  spin={paused ? 0 : 36}
                  paused={paused}
                  onSelect={(n) => setActive(n)}
                  nodeSize={28}
                />
              </div>

              {/* Center label — does not spin */}
              <div style={{
                position: 'absolute',
                left: '50%', top: '50%',
                transform: 'translate(-50%, -50%)',
                textAlign: 'center',
                zIndex: 4,
                pointerEvents: 'none',
                maxWidth: 220,
              }}>
                <div className="bz-mono" style={{ color: 'var(--accent)' }}>NOW ORBITING</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, marginTop: 6, letterSpacing: '-0.02em', lineHeight: 1 }}>
                  {active.name}
                </div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 6 }}>{active.tag}</div>
              </div>

              {/* Active app card */}
              <div className="bz-hero-card" style={{
                position: 'absolute',
                bottom: 20,
                left: '50%',
                transform: 'translateX(-50%)',
                width: 380,
                padding: '14px 18px',
                borderRadius: 16,
                background: 'rgba(11,11,13,0.85)',
                border: '1px solid var(--line-2)',
                backdropFilter: 'blur(20px)',
                display: 'flex',
                alignItems: 'center',
                gap: 14,
                zIndex: 5,
              }}>
                <AppIcon app={active} size={44} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600 }}>{active.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{active.platforms.join(' · ')}</div>
                </div>
                <a href={`#${active.id}`} className="bz-mono" style={{
                  color: 'var(--accent)', textDecoration: 'none',
                  padding: '6px 10px', borderRadius: 999,
                  border: '1px solid var(--accent)', fontSize: 10,
                }}>JUMP ↓</a>
              </div>

              {/* play/pause */}
              <button onClick={() => setPaused(p => !p)} style={{
                position: 'absolute', top: 8, right: 8,
                background: 'transparent', border: '1px solid var(--line-2)',
                color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 10,
                padding: '6px 10px', borderRadius: 999, cursor: 'pointer', letterSpacing: '.1em',
              }}>{paused ? '▶ ORBIT' : '⏸ PAUSE'}</button>
            </div>
          </div>

          {/* Bottom strip — apps as horizontal index */}
          <div className="bz-hero-strip" style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            paddingTop: 32, borderTop: '1px solid var(--line)',
            gap: 40,
          }}>
            <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-end' }}>
              {APPS.map((app, i) => (
                <a key={app.id} href={`#${app.id}`}
                   onMouseEnter={() => setActive(app)}
                   style={{
                  textDecoration: 'none',
                  color: active.id === app.id ? 'var(--fg)' : 'var(--fg-2)',
                  display: 'flex', flexDirection: 'column', gap: 4,
                  fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500,
                  borderTop: `2px solid ${app.accent}`,
                  paddingTop: 8,
                  transition: 'color .2s, border-color .2s',
                }}>
                  <span className="bz-mono" style={{ color: 'var(--fg-3)', fontSize: 10 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span>{app.name}</span>
                </a>
              ))}
            </div>
            <a className="bz-mono" href="#1glance" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
              JUMP TO APPS ↓
            </a>
          </div>
        </section>

        {/* Editorial app sections */}
        {APPS.map((app, i) => (
          <EditorialAppSection key={app.id} app={app} index={i} reverse={i % 2 === 1} tilt={tilt} float={float} />
        ))}

        <ProcessSection />
        <TestimonialsSection />

        <SiteFooter />
      </main>
    </div>
  );
}

function EditorialAppSection({ app, index, reverse, tilt = 4, float = 1 }) {
  const phoneTilt = reverse ? tilt : -tilt;
  return (
    <section id={app.id} className="bz-app-section" style={{
      minHeight: '90vh',
      padding: '120px 56px',
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 80,
      alignItems: 'center',
      borderTop: '1px solid var(--line)',
      position: 'relative',
    }}>
      <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
        <AppVideo id={app.id} accent={app.accent} tilt={phoneTilt} float={float} floatDelay={index} />
      </div>

      <div style={{ maxWidth: 520, position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
          <div
            style={{
              width: 72,
              height: 72,
              borderRadius: 18,
              padding: 3,
              boxSizing: 'border-box',
              background: 'linear-gradient(145deg, var(--jet-3) 0%, var(--jet) 45%, #050506 100%)',
              border: '1px solid var(--line)',
              boxShadow: `0 0 28px 2px ${app.accent}55, 0 0 64px -4px ${app.accent}44, 0 0 120px -12px ${app.accent}33, inset 0 1px 0 rgba(255,255,255,0.04)`,
              flexShrink: 0,
              display: 'grid',
              placeItems: 'stretch',
              overflow: 'hidden',
            }}
          >
            {app.logo ? (
              <img src={app.logo} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
            ) : null}
          </div>
          <div>
            <span className="bz-eyebrow" style={{ '--accent-glow': `${app.accent}55` }}>{app.platforms.join(' · ')}</span>
            <div
              style={{
                fontFamily: 'var(--font-display)',
                fontSize: 56,
                fontWeight: 700,
                letterSpacing: '-0.025em',
                lineHeight: 1,
                marginTop: 8,
                color: app.accent,
              }}
            >
              {app.name}
            </div>
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, lineHeight: 1.15, letterSpacing: '-0.015em' }}>
          {app.tag}.
        </div>
        <p className="bz-body" style={{ marginTop: 20, fontSize: 16 }}>{app.blurb}</p>
        {app.note && (
          <p style={{ marginTop: 10, fontSize: 13, color: 'var(--fg-4)', fontStyle: 'italic', lineHeight: 1.4 }}>{app.note}</p>
        )}

        <div style={{ marginTop: 24 }}>
          <div className="bz-mono" style={{ marginBottom: 10 }}>BUILT WITH</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {app.tech.map(t => {
              const logo = TECH_LOGOS[t];
              return (
                <span key={t} className="bz-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  {logo
                    ? <img src={`/assets/tech-logos/${logo}`} alt={t} style={{ width: 16, height: 16, objectFit: 'contain' }} />
                    : <span className="bz-chip-dot" style={{ background: app.accent }} />
                  }
                  {t}
                </span>
              );
            })}
          </div>
        </div>

        {app.storeLinks && app.storeLinks.length > 0 && (
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            {app.storeLinks.map((link, i) => (
              <a key={i} href={link.url} target="_blank" rel="noopener noreferrer">
                <img src={link.badge} alt={link.label} style={{ height: 44, display: 'block' }} />
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// — Process section (timeline)
function ProcessSection() {
  const steps = [
    { n: '01', t: 'Discover',  d: 'A week of conversations, sketches, and "what if" docs. Constraints win.' },
    { n: '02', t: 'Frame',     d: 'A single page of intent. The product fits on it or it isn\u2019t the product.' },
    { n: '03', t: 'Prototype', d: 'Real interactions in real frameworks. We test on devices in week two.' },
    { n: '04', t: 'Ship',      d: 'TestFlight, then production. Versioned releases. Public changelog.' },
    { n: '05', t: 'Orbit',     d: 'Apps don\u2019t end at launch. We circle back, sharpen, and ship the next slice.' },
  ];
  return (
    <section className="bz-process-section" style={{ padding: '160px 56px 140px', borderTop: '1px solid var(--line)', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="bz-process-intro" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <span className="bz-eyebrow">Process · 5 steps</span>
            <h2 className="bz-h2" style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 96px)' }}>
              How we build<br/><span style={{ color: 'var(--accent)' }}>in orbit.</span>
            </h2>
          </div>
          <p className="bz-body bz-process-intro-lede" style={{ fontSize: 18, justifySelf: 'end', maxWidth: 440 }}>
            Five phases. No phase is sacred. We loop the last three until the app earns its place in the constellation.
          </p>
        </div>

        <div className="bz-process-timeline" style={{ position: 'relative', paddingTop: 24 }}>
          <div
            className="bz-process-line"
            style={{
            position: 'absolute', top: 36, left: '5%', right: '5%', height: 1,
            background: 'linear-gradient(90deg, transparent, var(--accent), transparent)',
            opacity: 0.4,
          }}
          />
          <div className="bz-process-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20, position: 'relative' }}>
            {steps.map((s, i) => (
              <div key={s.n} className="bz-process-step" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                <div
                  className="bz-process-node"
                  style={{
                  width: 16, height: 16, borderRadius: '50%',
                  background: i === 0 ? 'var(--accent)' : '#1B1B20',
                  border: i === 0 ? 'none' : '1.5px solid var(--accent)',
                  boxShadow: i === 0 ? '0 0 24px var(--accent-glow)' : 'none',
                  marginBottom: 24,
                  marginLeft: 8,
                }}
                />
                <div className="bz-mono" style={{ color: 'var(--accent)' }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.015em', marginTop: 8 }}>{s.t}</div>
                <p style={{ fontSize: 13, color: 'var(--fg-2)', marginTop: 10, lineHeight: 1.5 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}


// — App Store reviews (carousel)
const REVIEW_CARD_MAX = 500;
const REVIEW_GAP = 16;
const REVIEW_MOBILE_MQ = '(max-width: 640px)';

function TestimonialsSection() {
  const reviews = [
    {
      app: 'ABH.CARE',
      title: 'Helpful and easy',
      quote: 'This app is smooth and simple to use. I definitely recommend it.',
      who: 'LA Resident',
      date: 'Jan 29',
    },
    {
      app: 'ABH.CARE',
      title: 'A breeze to set appointments!',
      quote: 'Very easy to use. Works flawlessly! Good design and would DEFINITELY recommend this app for time saving.',
      who: 'kstrohvia',
      date: 'Jan 19',
    },
    {
      app: '1Glance',
      title: 'Amazing.',
      quote: 'I didn\u2019t know I needed this till I found it. Now I absolutely love it. Thank you to the creator.',
      who: 'cars8569fabio',
      date: 'Oct 22',
    },
    {
      app: '1Glance',
      title: 'Easy to use!',
      quote: 'Very straightforward, guided setup even for those that might not be tech savvy!',
      who: 'Rocket42585',
      date: 'Jan 13',
    },
    {
      app: '1Glance',
      title: 'Dr. Bailey',
      quote: 'Totally amazing!! The possibilities are endless and is so simple even a child could set up this screen. Thank you AppleTV and Jeff G 😍',
      who: 'Maywe3',
      date: 'Jan 12',
    },
  ];

  const n = reviews.length;
  const viewportRef = React.useRef(null);
  const [viewportW, setViewportW] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(
    () => typeof window !== 'undefined' && window.matchMedia(REVIEW_MOBILE_MQ).matches,
  );
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const mq = window.matchMedia(REVIEW_MOBILE_MQ);
    const onMq = () => setIsMobile(mq.matches);
    onMq();
    mq.addEventListener('change', onMq);
    return () => mq.removeEventListener('change', onMq);
  }, []);

  React.useLayoutEffect(() => {
    const el = viewportRef.current;
    if (!el || typeof ResizeObserver === 'undefined') return undefined;
    const ro = new ResizeObserver(() => setViewportW(el.clientWidth));
    ro.observe(el);
    setViewportW(el.clientWidth);
    return () => ro.disconnect();
  }, []);

  const visibleCount = React.useMemo(() => {
    if (viewportW <= 0) return 1;
    if (isMobile) return 1;
    const raw = Math.max(1, Math.ceil((viewportW + REVIEW_GAP) / (REVIEW_CARD_MAX + REVIEW_GAP)));
    let v = Math.min(n, raw);
    while (v > 1 && (viewportW - (v - 1) * REVIEW_GAP) / v > REVIEW_CARD_MAX) {
      v -= 1;
    }
    return v;
  }, [viewportW, isMobile, n]);

  const rawCardW =
    visibleCount > 0
      ? (viewportW - (visibleCount - 1) * REVIEW_GAP) / visibleCount
      : REVIEW_CARD_MAX;
  const cardWidth = Math.min(REVIEW_CARD_MAX, rawCardW);

  const maxIdx = Math.max(0, n - visibleCount);

  React.useEffect(() => {
    setIdx((i) => Math.min(i, maxIdx));
  }, [maxIdx]);

  const go = (dir) => {
    setIdx((i) => Math.min(Math.max(0, i + dir), maxIdx));
  };

  const stepPx = cardWidth + REVIEW_GAP;
  const lo = idx + 1;
  const hi = Math.min(n, idx + visibleCount);
  const counter =
    visibleCount > 1 && hi > lo
      ? `${String(lo).padStart(2, '0')}\u2013${String(hi).padStart(2, '0')} / ${String(n).padStart(2, '0')}`
      : `${String(lo).padStart(2, '0')} / ${String(n).padStart(2, '0')}`;

  const arrowBtn = (dir, label) => (
    <button
      type="button"
      aria-label={label}
      onClick={() => go(dir)}
      disabled={dir < 0 ? idx <= 0 : idx >= maxIdx}
      style={{
        position: 'absolute',
        top: '50%',
        transform: 'translateY(-50%)',
        [dir < 0 ? 'left' : 'right']: 0,
        zIndex: 4,
        width: 44,
        height: 44,
        borderRadius: '50%',
        border: '1px solid var(--line-2)',
        background: 'rgba(11,11,13,0.75)',
        color: 'var(--fg)',
        cursor: (dir < 0 ? idx <= 0 : idx >= maxIdx) ? 'default' : 'pointer',
        opacity: (dir < 0 ? idx <= 0 : idx >= maxIdx) ? 0.35 : 1,
        display: 'grid',
        placeItems: 'center',
        fontSize: 18,
        lineHeight: 1,
        padding: 0,
        transition: 'opacity .2s, border-color .2s',
      }}
    >
      {dir < 0 ? '\u2039' : '\u203A'}
    </button>
  );

  return (
    <section className="bz-testimonials-section" style={{ padding: '120px 56px', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <span className="bz-eyebrow">App Store</span>
            <h2 className="bz-h2" style={{ marginTop: 16, fontSize: 'clamp(48px, 6vw, 80px)' }}>People<br/>have noticed.</h2>
          </div>
          <span className="bz-mono" style={{ color: 'var(--fg-3)', fontSize: 12, letterSpacing: '0.12em' }}>{counter}</span>
        </div>

        <div className="bz-reviews-carousel" style={{ position: 'relative', paddingLeft: 52, paddingRight: 52 }}>
          {arrowBtn(-1, 'Previous review')}
          {arrowBtn(1, 'Next review')}

          <div ref={viewportRef} style={{ overflow: 'hidden', borderRadius: 20 }}>
            <div
              style={{
                display: 'flex',
                gap: REVIEW_GAP,
                transform: viewportW > 0 ? `translateX(-${idx * stepPx}px)` : 'none',
                transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
              }}
            >
              {reviews.map((r, i) => (
                <div
                  key={i}
                  style={{
                    width: viewportW > 0 ? cardWidth : '100%',
                    flex: '0 0 auto',
                    boxSizing: 'border-box',
                  }}
                >
                  <div
                    className="bz-card"
                    style={{
                      padding: 28,
                      display: 'flex',
                      flexDirection: 'column',
                      minHeight: 280,
                      height: '100%',
                    }}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
                        {r.title}
                      </div>
                      <div style={{ textAlign: 'right', flexShrink: 0 }}>
                        <div className="bz-mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.08em' }}>{r.date}</div>
                        <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 4 }}>{r.who}</div>
                      </div>
                    </div>
                    <div style={{ marginTop: 10, display: 'flex', gap: 3 }} aria-hidden>
                      {[1, 2, 3, 4, 5].map((s) => (
                        <span key={s} style={{ color: 'var(--accent)', fontSize: 14, lineHeight: 1 }}>★</span>
                      ))}
                    </div>
                    <p style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 500, lineHeight: 1.35, letterSpacing: '-0.01em', margin: '16px 0 0', color: 'var(--fg-2)' }}>
                      {r.quote}
                    </p>
                    <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                      <span className="bz-mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)' }}>{r.app}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeEditorial, EditorialAppSection, ProcessSection, TestimonialsSection });