/* global React, ReactDOM, Logo, Phone, AdminApprovals, AdminAudit,
          TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, injectLogoKeyframes */
const { useEffect: useEffectApp, useState: useStateApp, useRef: useRefApp, useMemo: useMemoApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F09A3A",
  "motion": "scroll"
} /*EDITMODE-END*/;

const ACCENTS = {
  '#F09A3A': { top: '#F8B45E', bot: '#ED8930' }, // orange
  '#E5428E': { top: '#F058A5', bot: '#DB347D' }, // pink
  '#5BAFE4': { top: '#76BFEC', bot: '#4FA4DD' }, // blue
  '#4FC2A0': { top: '#6BD7B0', bot: '#41B895' } // green
};

function applyAccent(hex) {
  const stops = ACCENTS[hex] || ACCENTS['#F09A3A'];
  document.documentElement.style.setProperty('--accent', hex);
  document.documentElement.style.setProperty('--accent-top', stops.top);
  document.documentElement.style.setProperty('--accent-bot', stops.bot);
}

/* ============================================================
   useScrollY, listens to window scroll
   ============================================================ */
function useScrollY() {
  const [y, setY] = useStateApp(0);
  useEffectApp(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setY(window.scrollY));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => {window.removeEventListener('scroll', onScroll);cancelAnimationFrame(raf);};
  }, []);
  return y;
}

/* ============================================================
   FadeInWhenVisible
   ============================================================ */
function FadeIn({ children, delay = 0, as: As = 'div', ...props }) {
  const ref = useRefApp(null);
  const [seen, setSeen] = useStateApp(false);
  useEffectApp(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {setSeen(true);io.disconnect();}
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      className={`fade-in ${seen ? 'in' : ''} ${props.className || ''}`}
      style={{ transitionDelay: `${delay}ms`, ...(props.style || {}) }}
      {...props}>
      
      {children}
    </As>);

}

/* ============================================================
   NAVBAR
   ============================================================ */
function Nav({ onTweaksToggle }) {
  const y = useScrollY();
  return (
    <nav className={`nav ${y > 12 ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-brand">
          <Logo size={28} motion="restrained" animateIn />
          <span className="wordmark">Verveli</span>
        </a>
        <div className="nav-links">
          <a href="#product">Product</a>
          <a href="#institutes">For Institutes</a>
          <a href="#trust">Trust</a>
          <a href="#ownership">Sovereignty</a>
          <a href="#pilot">Pilot</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-primary" href="#contact">
            Bring Verveli to your institute
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>);

}

/* ============================================================
   HERO
   ============================================================ */
function Hero({ motion }) {
  const y = useScrollY();
  // map first 600px of scroll to 0..1 for logo compress
  const scrollLink = motion === 'scroll' ? Math.min(1, Math.max(0, y / 600)) : 0;
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div className="hero-logo">
          <Logo size={104} motion={motion === 'off' ? 'off' : 'restrained'} scrollLink={scrollLink} animateIn />
        </div>

        <FadeIn delay={120}>
          <div className="eyebrow">An alumni network, built for institutes</div>
        </FadeIn>

        <FadeIn delay={220}>
          <h1 className="h-display" style={{ marginTop: 20 }}>
            A modern alumni network<br />your institute can <em>actually</em><br />keep alive.
          </h1>
        </FadeIn>

        <FadeIn delay={360}>
          <p className="lede">
            Verveli gives alumni a useful mobile space, and gives institute teams
            the control, verification, and visibility they need to keep it alive
            past the launch week.
          </p>
        </FadeIn>

        <FadeIn delay={440}>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#contact">Bring Verveli to your institute <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="#product">See the product</a>
          </div>
        </FadeIn>

        <FadeIn delay={560}>
          <div className="hero-trust">
            <span>Member mobile app</span>
            <span className="sep"></span>
            <span>Institute admin console</span>
            <span className="sep"></span>
            <span>60-second join</span>
          </div>
        </FadeIn>

        <div className="hero-phones" aria-hidden="false">
          <FadeIn delay={700} className="phone-wrap left"><Phone screen="signals" /></FadeIn>
          <FadeIn delay={800} className="phone-wrap center"><Phone screen="today" /></FadeIn>
          <FadeIn delay={900} className="phone-wrap right"><Phone screen="alumni" /></FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   PROBLEM
   ============================================================ */
function Problem() {
  const items = [
  {
    n: '01',
    t: 'Activity scattered everywhere',
    b: 'WhatsApp groups, LinkedIn DMs, batch spreadsheets, the occasional annual event. Nothing connects to the institute.'
  },
  {
    n: '02',
    t: 'Institutes lose visibility',
    b: 'Who joined? Who responded? Which programs landed? Most coordinators are guessing from screenshots.'
  },
  {
    n: '03',
    t: 'Alumni lose continuity',
    b: 'Numbers change, groups die quietly, classmates are unreachable a few years after graduation.'
  },
  {
    n: '04',
    t: 'Coordinators burn out',
    b: 'One person ends up holding the whole community together by hand. It works until they move on.'
  }];

  return (
    <section id="problem">
      <div className="container">
        <FadeIn>
          <div className="section-head">
            <div className="eyebrow">The problem</div>
            <h2 className="h-section">
              Most alumni networks die quietly,<br />between <em>WhatsApp</em> and the next reunion.
            </h2>
          </div>
        </FadeIn>

        <div className="problem-grid">
          {items.map((it, i) =>
          <FadeIn key={i} delay={i * 80} className="problem-card lift">
              <span className="num">{it.n}</span>
              <div>
                <h3>{it.t}</h3>
                <p>{it.b}</p>
              </div>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   PRODUCT, Today / Signals / Alumni / Community tabs
   ============================================================ */
const PRODUCT_TABS = [
{
  id: 'today',
  label: 'Today',
  eyebrow: 'Today tab',
  title: <>A daily reason to <em>open</em> the app.</>,
  body: 'A single feed of daily content, events, photos, news and questions from the institute. Calm, paced, and run by your team, not by chance.',
  features: [
  { h: 'Daily questions', p: 'A small prompt every day. Alumni answer in one tap, see their batchmates.' },
  { h: 'Events & RSVPs', p: 'Chapter events, alumni days, returning-to-campus visits, all in one place.' },
  { h: 'Photos & news', p: 'Curated by the institute. Archive built up automatically.' }]

},
{
  id: 'signals',
  label: 'Signals',
  eyebrow: 'Signals tab',
  title: <>Jobs, referrals, help requests, <em>moving</em> between alumni.</>,
  body: 'A purpose-built feed for the practical asks that today drown in unmoderated WhatsApp groups: who’s hiring, who can refer, who works at X.',
  features: [
  { h: 'Hiring & referrals', p: 'Posted by alumni, visible to the network, attributable.' },
  { h: '“Who works at X?”', p: 'Find alumni at a target company or city, with their consent.' },
  { h: 'Help requests', p: 'Asking the network for advice, intros, or a small favour, without spam.' }]

},
{
  id: 'alumni',
  label: 'Alumni',
  eyebrow: 'Alumni tab',
  title: <>Profiles that <em>actually</em> stay current.</>,
  body: 'Verified profiles, curated by your institute. Search by batch, city, company, or program. No more chasing batch reps for an updated list.',
  features: [
  { h: 'Verified joining', p: 'Phone OTP + institute code, with optional coordinator approval.' },
  { h: 'Curated profiles', p: 'Featured alumni rotate weekly. Institute keeps the editorial hand.' },
  { h: 'Search that works', p: 'By batch, city, company, program, EC role, instantly.' }]

},
{
  id: 'community',
  label: 'Community',
  eyebrow: 'Community tab',
  title: <>Chapters, groups, and the <em>WhatsApp</em> directory, in one place.</>,
  body: 'Bring city chapters, batch groups, EC structure, and existing WhatsApp groups into a single, navigable community map.',
  features: [
  { h: 'City chapters', p: 'Each with a lead, a roster, and its own calendar.' },
  { h: 'Groups & EC', p: 'Topic groups, batch groups, EC roles, clear and visible.' },
  { h: 'WhatsApp directory', p: 'Discover the institute’s existing WhatsApp groups without joining a hundred.' }]

}];


function Product() {
  const [active, setActive] = useStateApp('today');
  const tab = PRODUCT_TABS.find((t) => t.id === active);

  return (
    <section className="product" id="product">
      <div className="container">
        <FadeIn>
          <div className="section-head center">
            <div className="eyebrow">The member app</div>
            <h2 className="h-section">
              Four tabs. Each one earns<br />its place on the home screen.
            </h2>
            <p className="lede">
              Verveli on mobile is deliberately small, four tabs, no inbox to drown in, no infinite scroll
              of strangers. Each tab does one thing for the alumnus.
            </p>
          </div>
        </FadeIn>

        <FadeIn>
          <div className="product-tabs" role="tablist">
            {PRODUCT_TABS.map((t) =>
            <button
              key={t.id}
              className="product-tab"
              data-active={String(active === t.id)}
              onClick={() => setActive(t.id)}
              role="tab"
              aria-selected={active === t.id}>
              
                {t.label}
              </button>
            )}
          </div>
        </FadeIn>

        <div className="product-stage">
          <div className="product-copy">
            <div className="eyebrow">{tab.eyebrow}</div>
            <h3 className="h-section" style={{ fontSize: 'clamp(28px, 3.2vw, 44px)' }}>{tab.title}</h3>
            <p className="lede" style={{ marginTop: 14 }}>{tab.body}</p>

            <div className="product-features">
              {tab.features.map((f, i) =>
              <div className="product-feature" key={i}>
                  <span className="icon"><span className="dot"></span></span>
                  <div>
                    <h4>{f.h}</h4>
                    <p>{f.p}</p>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="product-phone-mount">
            <div key={active} className="phone-fader" style={{ animation: 'phoneFade 460ms cubic-bezier(.2,.7,.2,1)' }}>
              <Phone screen={active} />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FOR INSTITUTES
   ============================================================ */
function ForInstitutes() {
  const [view, setView] = useStateApp('approvals');
  return (
    <section id="institutes">
      <div className="container">
        <FadeIn>
          <div className="section-head">
            <div className="eyebrow">For institutes</div>
            <h2 className="h-section">
              A calm operator console<br />for alumni teams. Not a <em>dashboard</em>.
            </h2>
          </div>
        </FadeIn>

        <div className="institutes-stage">
          <div>
            <FadeIn>
              <p className="lede" style={{ marginBottom: 28 }}>
                The Verveli admin console gives your alumni team one place to run the network.
                Approvals, members, programs, chapters, content, settings, and a full audit log of who did what.
              </p>
            </FadeIn>

            <div className="institutes-bullets">
              <FadeIn delay={40}><div><h4>Approvals</h4><p>Verify joiners with email, code, or coordinator sign-off. Hold or approve in batch.</p></div></FadeIn>
              <FadeIn delay={80}><div><h4>Members</h4><p>Every member, searchable. Batch, city, company, program.</p></div></FadeIn>
              <FadeIn delay={120}><div><h4>Programs &amp; chapters</h4><p>Preload programs, batches, and chapter structure so the network starts populated.</p></div></FadeIn>
              <FadeIn delay={160}><div><h4>Daily content</h4><p>Schedule the Today feed without leaving the console. Drafts and previews.</p></div></FadeIn>
              <FadeIn delay={200}><div><h4>World settings</h4><p>Decide what verification, privacy, and visibility look like for your institute.</p></div></FadeIn>
              <FadeIn delay={240}><div><h4>Audit log</h4><p>Every administrative action, time-stamped and attributable. Exportable.</p></div></FadeIn>
            </div>

            <FadeIn delay={300}>
              <div style={{ marginTop: 36, display: 'flex', gap: 8, padding: 4, background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 999, width: 'fit-content' }}>
                <button className="product-tab" data-active={String(view === 'approvals')} onClick={() => setView('approvals')}>Approvals view</button>
                <button className="product-tab" data-active={String(view === 'audit')} onClick={() => setView('audit')}>Audit log</button>
              </div>
            </FadeIn>
          </div>

          <FadeIn delay={180}>
            <div key={view} style={{ animation: 'adminFade 500ms cubic-bezier(.2,.7,.2,1)' }}>
              {view === 'approvals' ? <AdminApprovals /> : <AdminAudit />}
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   TRUST
   ============================================================ */
function Trust() {
  const items = [
  { h: 'Verified joining', p: '60 seconds. Institute code + phone OTP, with optional coordinator approval.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z" /><path d="M9 12l2 2 4-4" /></svg> },
  { h: 'Approval queues', p: 'Your team holds the gate. Auto-approve is opt-in, not the default.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M11 7h9M11 12h9M11 17h9" /><path d="M3.5 7l1.3 1.3L7.5 5.6M3.5 16.5l1.3 1.3 2.7-2.7" /></svg> },
  { h: 'Member privacy controls', p: 'Members choose what is visible to non-batch, non-chapter, or no one.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg> },
  { h: 'Audit log', p: 'Every administrative action is logged, attributable, and exportable.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg> },
  { h: 'Institute world settings', p: 'You decide verification, privacy defaults, content moderation, retention.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h9M17 8h3M4 16h3M11 16h9" /><circle cx="15" cy="8" r="2" /><circle cx="9" cy="16" r="2" /></svg> },
  { h: 'Consent-first directory', p: 'Discovery is opt-in. Alumni can be searchable without being broadcast.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3.4" /><path d="M3.5 19.5c.7-3.2 3-5.2 5.5-5.2 1.1 0 2.2.4 3.1 1" /><path d="M14.5 16.5l2 2 3.5-3.5" /></svg> }];

  return (
    <section className="trust" id="trust">
      <div className="container">
        <FadeIn>
          <div className="section-head">
            <div className="eyebrow">Trust</div>
            <h2 className="h-section">
              Built with privacy and<br /><em>accountability</em> in the operating model.
            </h2>
          </div>
        </FadeIn>

        <div className="trust-grid">
          <div className="trust-list">
            {items.map((it, i) =>
            <FadeIn key={i} delay={i * 60} className="trust-item lift">
                <div className="ic">{it.ic}</div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </FadeIn>
            )}
            <div className="compliance-note">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z" /><path d="M9 12l2 2 4-4" /></svg>
              <p>
                Privacy, consent, and accountability are built into how Verveli works, guided by the
                principles behind India’s <strong>Digital Personal Data Protection Act</strong>.
              </p>
            </div>
          </div>

          <FadeIn delay={200}>
            <div className="trust-quote">
              <div className="mark">“</div>
              <blockquote>
                We didn’t want a social app for our alumni.<br />
                We wanted a <em>space</em> we could keep alive,<br />with a paper trail we could trust.
              </blockquote>
              <div className="cite">
                <div className="avatar"></div>
                <div>
                  <div style={{ color: 'var(--ink)', fontWeight: 500 }}>Alumni Relations Lead</div>
                  <div>Tier-1 engineering institute · pilot cohort</div>
                </div>
              </div>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>);

}

/* ============================================================
   OWNERSHIP, deployment flexibility / data sovereignty (moat).
   Benefit-level only: never describes how this is built.
   ============================================================ */
function Ownership() {
  const items = [
  { h: 'Fully managed by default', p: 'Most institutes start on Verveli’s cloud and go live in days. No servers to stand up, nothing for your team to maintain.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 19a4.5 4.5 0 0 1-.5-9 6 6 0 0 1 11.7-1A4 4 0 0 1 17.5 19z" /></svg> },
  { h: 'Your data can stay yours', p: 'When governance demands it, alumni records can live on infrastructure your institute controls, not ours.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5.5" rx="7.5" ry="2.8" /><path d="M4.5 5.5v5c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-5" /><path d="M4.5 10.5v5c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-5" /></svg> },
  { h: 'Made for sensitive institutions', p: 'Government, defence, and regulated institutes can adopt Verveli without member data leaving their environment.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M4 9.5h16M12 3L4 7v2.5h16V7z" /><path d="M6.5 9.5V18M11 9.5V18M17.5 9.5V18" /></svg> },
  { h: 'No lock-in, ever', p: 'Change how Verveli is hosted as your needs evolve. It stays the same product, with your data intact.',
    ic: <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 7.7-1.5" /></svg> }];

  return (
    <section id="ownership">
      <div className="container">
        <FadeIn>
          <div className="section-head">
            <div className="eyebrow">Ownership &amp; control</div>
            <h2 className="h-section">
              Run it on our cloud, or<br />entirely on <em>your</em> servers.
            </h2>
          </div>
        </FadeIn>

        <FadeIn>
          <p className="lede" style={{ marginBottom: 48, maxWidth: '60ch' }}>
            The same Verveli, hosted the way your institute needs it. Start fully managed,
            and move closer to your own infrastructure whenever data residency or compliance asks for it.
          </p>
        </FadeIn>

        <div className="trust-list">
          {items.map((it, i) =>
          <FadeIn key={i} delay={i * 60} className="trust-item lift">
              <div className="ic">{it.ic}</div>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   PILOT, 4-6 week launch path
   ============================================================ */
function Pilot() {
  const steps = [
  { w: 'Week 0', t: 'Kickoff', p: 'Goals, owners, and a short list of programs and chapters you want live.' },
  { w: 'Week 1', t: 'World setup', p: 'Branding, verification policy, privacy defaults, admin team set up.' },
  { w: 'Week 2', t: 'Preload', p: 'Programs, chapters, EC, and known alumni loaded from your existing records.' },
  { w: 'Week 3', t: 'Soft launch', p: 'A seed cohort joins. Today feed starts. Daily content cadence begins.' },
  { w: 'Week 4', t: 'Open up', p: 'Invites widen by batch. Coordinators approve, the network starts answering itself.' },
  { w: 'Week 5', t: 'Signals on', p: 'Hiring, referrals, and help requests start flowing. Visibility for the team.' },
  { w: 'Week 6', t: 'Handover', p: 'Steady-state playbook handed to your alumni office. Verveli stays close.' }];

  return (
    <section id="pilot">
      <div className="container">
        <FadeIn>
          <div className="section-head">
            <div className="eyebrow">Pilot</div>
            <h2 className="h-section">
              Live in <em>four to six</em> weeks.<br />Not in six months.
            </h2>
          </div>
        </FadeIn>

        <FadeIn>
          <p className="lede" style={{ marginBottom: 56 }}>
            A small, deliberate launch path. Each week has one job. Nothing depends on
            an annual event or a single coordinator pushing the rock uphill.
          </p>
        </FadeIn>

        <div className="pilot-grid">
          <div className="pilot-rail" />
          {steps.map((s, i) =>
          <FadeIn key={i} delay={i * 60} className={`pilot-step ${i <= 3 ? 'active' : ''}`}>
              <div className="marker"></div>
              <div className="week">{s.w}</div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   CLOSING CTA + FOOTER
   ============================================================ */
function Closing() {
  return (
    <section className="closing" id="contact">
      <div className="container closing-inner">
        <FadeIn>
          <div className="hero-logo"><Logo size={84} motion="restrained" animateIn /></div>
        </FadeIn>
        <FadeIn delay={120}>
          <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.8vw, 84px)' }}>
            Bring Verveli to<br />your <em>institute</em>.
          </h2>
        </FadeIn>
        <FadeIn delay={220}>
          <p className="lede">
            A 30-minute call is the fastest way to see if Verveli fits.
            Write to us, we keep it small, sober, and specific.
          </p>
        </FadeIn>
        <FadeIn delay={320}>
          <div className="hero-cta" style={{ marginTop: 44 }}>
            <a className="btn btn-primary" href="mailto:contact@thryvx.io">
              contact@thryvx.io <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="#product">See the product again</a>
          </div>
        </FadeIn>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brandcol">
            <div className="footer-brand">
              <Logo size={22} motion="restrained" animateIn={false} />
              <span className="wordmark">Verveli</span>
            </div>
            <a className="powered-by" href="https://thryvx.io" target="_blank" rel="noreferrer">
              Powered by <strong>Thryvx</strong>
            </a>
          </div>
          <div className="footer-contact">
            <a href="mailto:contact@thryvx.io">contact@thryvx.io</a>
          </div>
          <a className="btn btn-ghost" href="#contact" style={{ borderColor: 'rgba(255,255,255,0.25)', color: "rgb(244, 227, 227)" }}>
            Bring Verveli to your institute <span className="arrow">→</span>
          </a>
        </div>
        <div className="legal">© Verveli · A product of Thryvx · Built for institutes that want their alumni network to outlast a launch week.</div>
      </div>
    </footer>);

}

/* ============================================================
   APP
   ============================================================ */
function App() {
  injectLogoKeyframes();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent on tweak change
  useEffectApp(() => {applyAccent(tweaks.accent);}, [tweaks.accent]);

  return (
    <>
      <Nav />
      <Hero motion={tweaks.motion} />
      <Problem />
      <Product />
      <ForInstitutes />
      <Trust />
      <Ownership />
      <Pilot />
      <Closing />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Accent color" />
        <TweakColor
          label="From the four-pillar logo"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#F09A3A', '#E5428E', '#5BAFE4', '#4FC2A0']} />
        
        <TweakSection label="Logo motion" />
        <TweakRadio
          label="How alive the mark feels"
          value={tweaks.motion}
          onChange={(v) => setTweak('motion', v)}
          options={[
          { value: 'off', label: 'Off' },
          { value: 'breath', label: 'Pulse' },
          { value: 'scroll', label: 'Scroll' }]
          } />
        
      </TweaksPanel>
    </>);

}

/* mount */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);