/* ============================================================
   sections.jsx — landing page sections (brutalist)
   ============================================================ */

/* scroll reveal hook */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------------- NAV ---------------- */
function Nav({ dark, onToggleTheme }) {
  const [open, setOpen] = useState(false);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--bg)',
      borderBottom: 'var(--bw) solid var(--line)' }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 70 }}>
        <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <span aria-hidden="true" style={{ width: 34, height: 34, background: 'var(--accent)',
            border: 'var(--bw) solid var(--line)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Archivo Black', fontSize: 20, color: '#0A0A0A' }}>B</span>
          <span className="black" style={{ fontSize: 21, letterSpacing: '-.02em' }}>BRUTAL<span style={{ color: 'var(--muted)' }}>/UI</span></span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 26 }} className="nav-links">
          {[
            { label: 'Components', href: '#showcase' },
            { label: 'Docs', href: '#install' },
            { label: 'Themes', href: '#why' },
            { label: 'Pricing', href: '#install' },
            { label: 'GitHub', href: 'https://github.com/servatj/brutalist-ui-library', external: true },
          ].map(l => (
            <a
              key={l.label}
              href={l.href}
              rel={l.external ? 'noreferrer' : undefined}
              target={l.external ? '_blank' : undefined}
              style={{ fontWeight: 700, fontSize: 15, textDecoration: 'none' }}
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button onClick={onToggleTheme} aria-label="Toggle dark mode" className="btn btn-ghost btn-sm" style={{ padding: '8px 11px' }}>
            {dark ? '☀' : '☾'}
          </button>
          <a href="#install" className="btn btn-accent btn-sm">Get started <Arrow s={14}/></a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* grid texture */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '46px 46px', opacity: 0.06 }}/>
      <div className="wrap" style={{ position: 'relative', padding: '74px 28px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 50, alignItems: 'center' }} className="hero-grid">
          <div>
            <span className="tag" style={{ background: 'var(--accent)', color: '#0A0A0A' }}>● 42 COMPONENTS · v3.0</span>
            <h1 className="black" style={{ fontSize: 'clamp(46px, 7vw, 92px)', lineHeight: .92, letterSpacing: '-.03em', margin: '22px 0 0' }}>
              BUILD<br/>
              <span style={{ display: 'inline-block', background: 'var(--accent-2)', color: '#0A0A0A', padding: '0 .12em', transform: 'rotate(-1.4deg)', border: 'var(--bw) solid var(--line)', boxShadow: 'var(--shadow) var(--shadow) 0 0 var(--line)' }}>LOUDER.</span><br/>
              SHIP FASTER.
            </h1>
            <p style={{ fontSize: 20, fontWeight: 500, maxWidth: 480, marginTop: 26, color: 'var(--fg)' }}>
              The component library with a backbone. Accessible, fast and unapologetically bold primitives — so five developers finally build the same button.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 30 }}>
              <a href="#install" className="btn btn-accent btn-lg">Install now <Arrow s={16}/></a>
              <a href="#showcase" className="btn btn-lg">See components</a>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 28 }}>
              <BAvatars/>
              <div style={{ fontWeight: 600, fontSize: 14, lineHeight: 1.3 }}>
                <strong className="mono">12,400+</strong> developers<br/>
                <span style={{ color: 'var(--muted)' }}>shipping with BRUTAL/UI</span>
              </div>
            </div>
          </div>

          {/* hero card stack */}
          <div style={{ position: 'relative' }}>
            <div className="shell" style={{ padding: 22, transform: 'rotate(1.4deg)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <span className="eyebrow">// live preview</span>
                <span style={{ display: 'inline-flex', gap: 6 }}>
                  <i style={{ width: 12, height: 12, background: 'var(--accent-2)', border: '2px solid var(--line)', display: 'block' }}/>
                  <i style={{ width: 12, height: 12, background: 'var(--accent)', border: '2px solid var(--line)', display: 'block' }}/>
                  <i style={{ width: 12, height: 12, background: 'var(--accent-4)', border: '2px solid var(--line)', display: 'block' }}/>
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <button className="btn btn-accent btn-sm">Primary</button>
                  <button className="btn btn-sm">Default</button>
                  <button className="btn btn-pink btn-sm">Accent</button>
                </div>
                <BInput label="Email" placeholder="you@studio.dev" type="email"/>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <BToggle label="notifications"/>
                  <BRating/>
                  <BStepper/>
                </div>
                <BTabs/>
              </div>
            </div>
            <span aria-hidden="true" style={{ position: 'absolute', bottom: -22, left: -22, background: 'var(--accent-3)', color: '#fff',
              fontFamily: 'Space Mono, monospace', fontWeight: 700, fontSize: 13, padding: '8px 13px',
              border: 'var(--bw) solid var(--line)', transform: 'rotate(-3deg)' }}>npm i brutalist-ui-library</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- MARQUEE ---------------- */
function Marquee() {
  const items = ['ACCESSIBLE', 'FAST', 'THEMEABLE', 'TYPED', 'ZERO-DEPS', 'OPEN SOURCE', 'TESTED', 'TREE-SHAKEABLE'];
  const row = [...items, ...items];
  return (
    <div style={{ borderTop: 'var(--bw) solid var(--line)', borderBottom: 'var(--bw) solid var(--line)',
      background: 'var(--accent)', color: '#0A0A0A', overflow: 'hidden', padding: '13px 0' }}>
      <div className="marquee-track">
        {row.map((t, i) => (
          <span key={i} className="black" style={{ fontSize: 22, letterSpacing: '-.01em', padding: '0 26px', display: 'inline-flex', alignItems: 'center', gap: 26 }}>
            {t} <Star s={16} fill="#0A0A0A"/>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------------- SHOWCASE ---------------- */
function ShowcaseCard({ label, children, span = 1, bg }) {
  return (
    <div className="shell reveal" style={{ gridColumn: `span ${span}`, padding: 20, background: bg || 'var(--bg-panel)',
      display: 'flex', flexDirection: 'column', gap: 16 }}>
      <span className="eyebrow" style={{ color: 'var(--muted)' }}>{label}</span>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, flex: 1, justifyContent: 'center' }}>{children}</div>
    </div>
  );
}

function Showcase() {
  return (
    <section id="showcase" className="wrap" style={{ padding: '78px 28px' }}>
      <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20, marginBottom: 38 }}>
        <div>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>// the kit</span>
          <h2 className="black" style={{ fontSize: 'clamp(34px, 5vw, 58px)', letterSpacing: '-.03em', lineHeight: .96, margin: '10px 0 0' }}>
            42 LIVE COMPONENTS.<br/>EVERY ONE EDITABLE.
          </h2>
        </div>
        <p style={{ maxWidth: 330, fontWeight: 500, color: 'var(--muted)' }}>
          These aren't screenshots. Click, type, drag — it's the real library, theming itself from your tweaks in real time.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }} className="showcase-grid">
        <ShowcaseCard label="Buttons">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            <button className="btn btn-accent btn-sm">Primary</button>
            <button className="btn btn-sm">Default</button>
            <button className="btn btn-pink btn-sm">Accent</button>
            <button className="btn btn-blue btn-sm">Solid</button>
            <button className="btn btn-ghost btn-sm">Ghost</button>
          </div>
        </ShowcaseCard>
        <ShowcaseCard label="Toggle & checks">
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <BToggle/><BToggle defaultOn={false}/>
          </div>
          <BCheck label="Accessible by default" defaultChecked/>
          <BCheck label="Opt-in analytics"/>
        </ShowcaseCard>
        <ShowcaseCard label="Inputs">
          <BInput label="Project" placeholder="brutal-app"/>
        </ShowcaseCard>
        <ShowcaseCard label="Rating & stepper">
          <BRating/>
          <BStepper/>
        </ShowcaseCard>

        <ShowcaseCard label="Tabs" span={2}>
          <BTabs/>
        </ShowcaseCard>
        <ShowcaseCard label="Slider">
          <BSlider label="Volume" defaultValue={72}/>
          <BSlider label="Contrast" defaultValue={40}/>
        </ShowcaseCard>
        <ShowcaseCard label="Radio group">
          <BRadio name="plan" options={['Hobby', 'Pro', 'Team']}/>
        </ShowcaseCard>

        <ShowcaseCard label="Accordion" span={2}>
          <BAccordion/>
        </ShowcaseCard>
        <ShowcaseCard label="Badges">
          <BBadges/>
          <BAvatars/>
        </ShowcaseCard>
        <ShowcaseCard label="Toast">
          <BToast/>
        </ShowcaseCard>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, Nav, Hero, Marquee, Showcase });