const { useState: useS2, useEffect: useE2 } = React;

// ---------- 4 Product Pillars ----------
const PILLARS = [
  {
    id:'data',
    num:'01',
    tag:'REVIEW DATA & INSIGHTS',
    title:'Review data & AI insights from 80+ sources',
    copy:'Access reviews, ratings, metadata and sentiment from 80+ sites through a single normalized schema. Layer on AI-powered insights for trending topics, competitive benchmarks and customer sentiment analysis.',
    badges:['API','White-label'],
    demo:'data',
  },
  {
    id:'response',
    num:'02',
    tag:'REVIEW RESPONSE',
    title:'Generate and post replies with one API call',
    copy:'Draft automated responses and publish them directly to Google, Yelp, Facebook and more — without forcing your users to log into each platform separately.',
    badges:['API','White-label'],
    demo:'response',
  },
  {
    id:'solicit',
    num:'03',
    tag:'REVIEW SOLICITATION & SURVEYS',
    title:'Collect more feedback with automated request flows',
    copy:'Send branded review requests and surveys via SMS, email, or in-store QR. Use our API or white-label tools to trigger requests, track delivery, and measure response rates.',
    badges:['API','White-label'],
    demo:'solicit',
  },
  {
    id:'flag',
    num:'04',
    tag:'REVIEW FLAGGING',
    title:'Flag and dispute bad reviews automatically',
    copy:'Automatically surface fake, inappropriate, or policy-violating reviews. We handle submission, platform-specific rules, and dispute tracking end-to-end.',
    badges:['API','White-label'],
    demo:'flag',
  },
];

// Tiny demo visuals per pillar — concrete UI instead of decorative art
const PillarDemo = ({id}) => {
  if (id === 'data') return (
    <div style={{padding:18, display:'flex', flexDirection:'column', gap:10}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
        <span style={{fontSize:12, color:'var(--ink-3)'}}>Average rating · 90d</span>
        <span className="mono" style={{fontSize:28, fontWeight:500, letterSpacing:'-0.02em'}}>4.62</span>
      </div>
      <svg viewBox="0 0 300 70" style={{width:'100%', height:70}}>
        <path d="M0 45 C 30 40, 60 48, 90 38 S 150 22, 180 28 S 240 18, 300 14" stroke="var(--shout)" strokeWidth="2" fill="none"/>
        <path d="M0 45 C 30 40, 60 48, 90 38 S 150 22, 180 28 S 240 18, 300 14 L 300 70 L 0 70 Z" fill="var(--shout-soft)"/>
      </svg>
      <div style={{display:'flex', flexDirection:'column', gap:6, paddingTop:8}}>
        {[['speed','+18%','up'],['pricing','+11%','up'],['wait time','−22%','down']].map(([k,d,dir])=>(
          <div key={k} style={{display:'flex', justifyContent:'space-between', fontSize:12.5}}>
            <span style={{color:'var(--ink-2)'}}>{k}</span>
            <span className="mono" style={{color: dir==='up'?'var(--ok)':'var(--coral)', fontWeight:500}}>{d}</span>
          </div>
        ))}
      </div>
    </div>
  );
  if (id === 'response') return (
    <div style={{padding:16, display:'flex', flexDirection:'column', gap:12}}>
      <div style={{background:'var(--paper-2)', padding:12, borderRadius:10, fontSize:12.5, color:'var(--ink-2)'}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
          <span style={{fontWeight:600, color:'var(--ink)'}}>Marcus K. · ★★</span>
          <span className="mono" style={{fontSize:11}}>Yelp</span>
        </div>
        "Coffee was cold, waiter was colder..."
      </div>
      <div style={{display:'flex', alignItems:'center', gap:8, paddingLeft:12, color:'var(--shout)', fontSize:12}}>
        <Dot c="var(--shout)"/>
        <span className="mono">POST /reply — AI draft</span>
      </div>
      <div style={{background:'var(--shout-soft)', padding:12, borderRadius:10, fontSize:12.5, color:'var(--ink)', border:'1px solid color-mix(in oklab, var(--shout) 20%, transparent)'}}>
        "Hi Marcus — so sorry about your visit. We've re-trained the morning team on drink temps. Can we make it right? Reply MANAGER for a free round."
      </div>
      <div style={{fontSize:11, color:'var(--ink-3)', display:'flex', justifyContent:'space-between'}}>
        <span className="mono">published · 2.1s</span>
        <span>↻ Regenerate</span>
      </div>
    </div>
  );
  if (id === 'solicit') return (
    <div style={{padding:16, display:'flex', flexDirection:'column', gap:10}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
        {[['SMS','62%'],['Email','38%'],['QR / In-store','24%'],['Post-service','71%']].map(([k,v])=>(
          <div key={k} style={{border:'1px solid var(--rule)', borderRadius:10, padding:10}}>
            <div style={{fontSize:11, color:'var(--ink-3)'}}>{k}</div>
            <div className="mono" style={{fontSize:20, fontWeight:500}}>{v}</div>
            <div style={{height:4, background:'var(--paper-2)', borderRadius:2, marginTop:6}}>
              <div style={{height:'100%', width:v, background:'var(--shout)', borderRadius:2}}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2}}>Response rate by channel · trailing 30d</div>
    </div>
  );
  if (id === 'flag') return (
    <div style={{padding:16, display:'flex', flexDirection:'column', gap:8}}>
      {[
        ['Off-topic',      'queued',    'ink'],
        ['Fake / bot',     'submitted', 'shout'],
        ['Hate speech',    'removed',   'ok'],
        ['Wrong business', 'submitted', 'shout'],
      ].map(([k,s,tone],i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 10px', border:'1px solid var(--rule)', borderRadius:8, fontSize:12.5}}>
          <span style={{color:'var(--ink)'}}>{k}</span>
          <Pill tone={tone} style={{fontSize:10.5}}>{s}</Pill>
        </div>
      ))}
      <div style={{fontSize:11, color:'var(--ink-3)', paddingTop:4}}>4 flags auto-submitted · 1 removed today</div>
    </div>
  );
};

const Pillars = () => {
  return (
    <section style={{padding:'120px 0', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:56, gap:40}}>
          <div>
            <Pill tone="ink" style={{marginBottom:18}}>03 — What you can build</Pill>
            <h2 style={{fontSize:'clamp(40px, 4.6vw, 64px)', lineHeight:1.02, letterSpacing:'-0.03em', margin:0, fontWeight:600, textWrap:'balance', maxWidth:720}}>
              Four building blocks. <span className="serif" style={{fontWeight:400, color:'var(--shout)'}}>One infrastructure</span>.
            </h2>
          </div>
          <p style={{fontSize:15.5, color:'var(--ink-2)', maxWidth:380, margin:0, textWrap:'pretty'}}>
            Every product is available as a raw API for deep integration, or as an embeddable white-label UI for faster time-to-market.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:1, background:'var(--rule)', border:'1px solid var(--rule)', borderRadius:16, overflow:'hidden'}}>
          {PILLARS.map(p=>(
            <div key={p.id} style={{background:'var(--paper)', padding:32, display:'grid', gridTemplateColumns:'1fr 280px', gap:28, alignItems:'start', minHeight:320}}>
              <div style={{display:'flex', flexDirection:'column', height:'100%'}}>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
                  <span className="mono" style={{fontSize:11, color:'var(--ink-3)', fontWeight:500}}>{p.num}</span>
                  <span style={{height:1, flex:1, background:'var(--rule)'}}/>
                  <div style={{display:'flex', gap:4}}>
                    {p.badges.map(b=>(
                      <span key={b} className="mono" style={{fontSize:10, padding:'2px 6px', border:'1px solid var(--rule-2)', borderRadius:4, color:'var(--ink-2)', letterSpacing:'0.04em'}}>{b.toUpperCase()}</span>
                    ))}
                  </div>
                </div>
                <div style={{fontSize:11, color:'var(--shout-ink)', letterSpacing:'0.08em', fontWeight:600, marginBottom:10}}>{p.tag}</div>
                <h3 style={{fontSize:26, letterSpacing:'-0.025em', margin:'0 0 12px', lineHeight:1.12, fontWeight:600, textWrap:'balance'}}>{p.title}</h3>
                <p style={{fontSize:14.5, color:'var(--ink-2)', margin:'0 0 auto', lineHeight:1.5, textWrap:'pretty'}}>{p.copy}</p>
                <a style={{marginTop:20, fontSize:13.5, color:'var(--ink)', borderBottom:'1px solid var(--ink)', paddingBottom:2, alignSelf:'flex-start', fontWeight:500}}>Learn more →</a>
              </div>
              <div style={{background:'var(--paper-2)', borderRadius:10, border:'1px solid var(--rule)', minHeight:240}}>
                <PillarDemo id={p.demo}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Build vs Buy ----------
const ROWS = [
  { k:'Time to launch',
    s:{h:'Days to weeks', b:'Launch your review product without pulling your dev team off the roadmap.'},
    b:{h:'12–18+ months', b:'Scoping, hiring, building, QA, and platform-specific edge cases.'},
  },
  { k:'Upfront cost',
    s:{h:'$500 – $10k', b:'Scales with products used, API vs. white-label, and customization.'},
    b:{h:'$300k – $600k+', b:'Dev salaries, infrastructure, and diverted eng resources before V1.'},
  },
  { k:'Ongoing maintenance',
    s:{h:'We handle it', b:'Review-site changes, API updates, scrapers, hosting, uptime, bug fixes, feature work.'},
    b:{h:'Never-ending', b:'Every platform change triggers new dev, QA, and a late-night Slack thread.'},
  },
  { k:'Core product focus',
    s:{h:'Stays focused', b:'Your team keeps shipping the features your customers actually pay for.'},
    b:{h:'Diverted', b:'12–18 months of your roadmap re-aimed at infrastructure you don\'t sell.'},
  },
  { k:'Reliability & scale',
    s:{h:'Proven', b:'Built to handle tens of millions of locations without performance drops.'},
    b:{h:'Unproven', b:'Scaling requires more infrastructure, more on-call, and more surprises.'},
  },
];

const BuildVsBuy = () => (
  <section style={{padding:'120px 0', background:'var(--ink)', color:'var(--paper)'}}>
    <div className="wrap">
      <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:48, gap:40}}>
        <div>
          <span style={{fontSize:11, color:'oklch(0.70 0.02 250)', letterSpacing:'0.08em', fontWeight:500}}>04 — BUILD VS. BUY</span>
          <h2 style={{fontSize:'clamp(40px, 4.6vw, 60px)', lineHeight:1.02, letterSpacing:'-0.03em', margin:'14px 0 0', fontWeight:600, textWrap:'balance', maxWidth:720}}>
            Ship in weeks. Or build it yourself <span className="serif" style={{fontWeight:400, color:'var(--shout)'}}>for a year and a half</span>.
          </h2>
        </div>
      </div>
      <div style={{border:'1px solid oklch(0.28 0.01 250)', borderRadius:14, overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'240px 1fr 1fr', background:'oklch(0.22 0.01 250)', fontSize:12, letterSpacing:'0.06em', color:'oklch(0.72 0.02 250)', textTransform:'uppercase'}}>
          <div style={{padding:'14px 20px'}}>&nbsp;</div>
          <div style={{padding:'14px 20px', display:'flex', alignItems:'center', gap:8, borderLeft:'1px solid oklch(0.28 0.01 250)'}}>
            <Dot c="var(--shout)"/> Reviora
          </div>
          <div style={{padding:'14px 20px', borderLeft:'1px solid oklch(0.28 0.01 250)'}}>Build it yourself</div>
        </div>
        {ROWS.map((r,i)=>(
          <div key={r.k} style={{display:'grid', gridTemplateColumns:'240px 1fr 1fr', borderTop:'1px solid oklch(0.28 0.01 250)'}}>
            <div style={{padding:'24px 20px', fontSize:14, color:'oklch(0.80 0.02 250)', fontWeight:500}}>{r.k}</div>
            <div style={{padding:'24px 20px', borderLeft:'1px solid oklch(0.28 0.01 250)', background:'oklch(0.20 0.02 250)'}}>
              <div style={{fontSize:22, letterSpacing:'-0.02em', marginBottom:6, fontWeight:600}}>{r.s.h}</div>
              <div style={{fontSize:13.5, color:'oklch(0.78 0.02 250)', lineHeight:1.5, maxWidth:380, textWrap:'pretty'}}>{r.s.b}</div>
            </div>
            <div style={{padding:'24px 20px', borderLeft:'1px solid oklch(0.28 0.01 250)'}}>
              <div style={{fontSize:22, letterSpacing:'-0.02em', marginBottom:6, color:'oklch(0.78 0.08 30)', fontWeight:600}}>{r.b.h}</div>
              <div style={{fontSize:13.5, color:'oklch(0.72 0.02 250)', lineHeight:1.5, maxWidth:380, textWrap:'pretty'}}>{r.b.b}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop:32, display:'flex', gap:10}}>
        <Btn variant="shout">Book a demo →</Btn>
        <Btn variant="ghost" style={{color:'var(--paper)', border:'1px solid oklch(0.35 0.01 250)'}}>Download build-vs-buy PDF</Btn>
      </div>
    </div>
  </section>
);

// ---------- Review Sites Matrix ----------
const SITES = [
  {name:'Google', cat:'General'},        {name:'Yelp', cat:'General'},
  {name:'Facebook', cat:'General'},      {name:'BBB', cat:'General'},
  {name:'Trustpilot', cat:'General'},    {name:"Judy's Book", cat:'General'},
  {name:'Apple Maps', cat:'General'},    {name:'Bing Places', cat:'General'},

  {name:'CarFax', cat:'Automotive'},     {name:'CarGurus', cat:'Automotive'},
  {name:'Edmunds', cat:'Automotive'},    {name:'DealerRater', cat:'Automotive'},
  {name:'KBB', cat:'Automotive'},        {name:'Cars.com', cat:'Automotive'},

  {name:'Avvo', cat:'Professional'},     {name:'Clearsurance', cat:'Professional'},
  {name:'Glassdoor', cat:'Professional'},{name:'Indeed', cat:'Professional'},
  {name:'G2', cat:'Professional'},       {name:'Capterra', cat:'Professional'},

  {name:'Healthgrades', cat:'Healthcare'}, {name:'RateMds', cat:'Healthcare'},
  {name:'RealSelf', cat:'Healthcare'},   {name:'Vitals', cat:'Healthcare'},
  {name:'ZocDoc', cat:'Healthcare'},     {name:'WebMD', cat:'Healthcare'},

  {name:'Angi', cat:'Home services'},    {name:'HomeAdvisor', cat:'Home services'},
  {name:'HomeStars', cat:'Home services'},{name:'Houzz', cat:'Home services'},
  {name:'Porch', cat:'Home services'},   {name:'Thumbtack', cat:'Home services'},

  {name:'Zillow', cat:'Real estate'},    {name:'Apartment Ratings', cat:'Real estate'},
  {name:'Apartment Guide', cat:'Real estate'}, {name:'Rent.com', cat:'Real estate'},
  {name:'Realtor.com', cat:'Real estate'}, {name:'Redfin', cat:'Real estate'},

  {name:'Airbnb', cat:'Travel'},         {name:'Expedia', cat:'Travel'},
  {name:'Tripadvisor', cat:'Travel'},    {name:'Travelocity', cat:'Travel'},
  {name:'Orbitz', cat:'Travel'},         {name:'Booking.com', cat:'Travel'},
  {name:'Hotels.com', cat:'Travel'},     {name:'GolfNow', cat:'Travel'},

  {name:'OpenTable', cat:'Food'},        {name:'GrubHub', cat:'Food'},
  {name:'Zomato', cat:'Food'},           {name:'Gayot', cat:'Food'},
  {name:'DoorDash', cat:'Food'},         {name:'Uber Eats', cat:'Food'},

  {name:'TheKnot', cat:'Weddings'},      {name:'WeddingWire', cat:'Weddings'},
];

const ReviewSites = () => {
  const [filter, setFilter] = useS2('All');
  const cats = ['All', ...Array.from(new Set(SITES.map(s=>s.cat)))];
  const shown = filter==='All' ? SITES : SITES.filter(s=>s.cat===filter);
  return (
    <section style={{padding:'120px 0', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:40, gap:32, flexWrap:'wrap'}}>
          <div>
            <Pill tone="ink" style={{marginBottom:16}}>05 — Coverage</Pill>
            <h2 style={{fontSize:'clamp(40px, 4.6vw, 60px)', lineHeight:1.02, letterSpacing:'-0.03em', margin:0, fontWeight:600, textWrap:'balance'}}>
              One API. <span className="serif" style={{fontWeight:400, color:'var(--shout)'}}>Eighty-plus</span> review sites.
            </h2>
          </div>
          <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
            {cats.map(c=>(
              <button key={c} onClick={()=>setFilter(c)} style={{
                padding:'6px 12px', fontSize:13, borderRadius:999,
                border:'1px solid '+(filter===c?'var(--ink)':'var(--rule-2)'),
                background: filter===c?'var(--ink)':'transparent',
                color: filter===c?'var(--paper)':'var(--ink-2)',
                fontWeight:500,
              }}>{c}</button>
            ))}
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:1, background:'var(--rule)', border:'1px solid var(--rule)', borderRadius:12, overflow:'hidden'}}>
          {shown.map(s=>(
            <div key={s.name} style={{background:'var(--paper)', padding:'18px 14px', display:'flex', alignItems:'center', gap:10, fontSize:13.5, color:'var(--ink)', fontWeight:500, minHeight:56}}>
              <span style={{width:8, height:8, borderRadius:2, background:'var(--shout)', opacity:0.5, flexShrink:0}}/>
              {s.name}
            </div>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:24, fontSize:13.5, color:'var(--ink-3)'}}>
          Plus {Math.max(0, 83 - SITES.length)}+ niche & regional sources. <a style={{color:'var(--ink)', borderBottom:'1px solid var(--ink)'}}>See the full list →</a>
        </div>
      </div>
    </section>
  );
};

// ---------- Stats ----------
const Stats = () => (
  <section style={{padding:'120px 0', background:'var(--paper-2)', borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)'}}>
    <div className="wrap">
      <div style={{maxWidth:720, marginBottom:56}}>
        <Pill tone="shout" style={{marginBottom:16}}>06 — By the numbers</Pill>
        <h2 style={{fontSize:'clamp(40px, 4.6vw, 60px)', lineHeight:1.02, letterSpacing:'-0.03em', margin:0, fontWeight:600, textWrap:'balance'}}>
          Powering review management for <span className="serif" style={{fontWeight:400, color:'var(--shout)'}}>hundreds of platforms</span>.
        </h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
        {[
          {n:'300+', k:'Partners',      body:'SaaS platforms, marketplaces and agencies building review management on our APIs and white-label infrastructure.'},
          {n:'80+',  k:'Review sites',  body:'Aggregate review data, post replies, and generate reports across 80+ review sources through one schema.'},
          {n:'2012', k:'Year founded',  body:'Over a decade powering review products for the world\'s top vertical SaaS platforms.'},
        ].map(s=>(
          <div key={s.k} style={{background:'var(--paper)', border:'1px solid var(--rule)', borderRadius:14, padding:28, display:'flex', flexDirection:'column', gap:12, minHeight:240}}>
            <div className="mono" style={{fontSize:72, letterSpacing:'-0.04em', fontWeight:500, lineHeight:1, color:'var(--ink)'}}>{s.n}</div>
            <div style={{fontSize:13, color:'var(--shout-ink)', letterSpacing:'0.06em', fontWeight:600, textTransform:'uppercase'}}>{s.k}</div>
            <p style={{fontSize:14.5, color:'var(--ink-2)', margin:'4px 0 0', lineHeight:1.5, textWrap:'pretty'}}>{s.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- CTA ----------
const CTA = () => (
  <section style={{padding:'140px 0', position:'relative', overflow:'hidden'}}>
    <div aria-hidden style={{
      position:'absolute', inset:0, pointerEvents:'none',
      backgroundImage:`radial-gradient(circle at 1px 1px, var(--rule-2) 1px, transparent 0)`,
      backgroundSize:'28px 28px', opacity:.4,
      maskImage:'radial-gradient(ellipse at center, black, transparent 70%)',
    }}/>
    <div className="wrap" style={{position:'relative', textAlign:'center'}}>
      <div style={{display:'inline-flex', marginBottom:24}}>
        <Pill tone="shout"><Dot c="var(--shout)"/> Most demos booked this week</Pill>
      </div>
      <h2 style={{fontSize:'clamp(48px, 6vw, 88px)', lineHeight:0.98, letterSpacing:'-0.035em', margin:'0 auto 24px', fontWeight:600, maxWidth:900, textWrap:'balance'}}>
        Add review management<br/>to your platform in <span className="serif" style={{color:'var(--shout)', fontWeight:400}}>days</span>.
      </h2>
      <p style={{fontSize:18, color:'var(--ink-2)', maxWidth:540, margin:'0 auto 36px', textWrap:'pretty'}}>
        Book a call to explore the API, see white-label demos, and get custom pricing for your platform.
      </p>
      <div style={{display:'flex', gap:10, justifyContent:'center'}}>
        <Btn variant="primary">Book a demo →</Btn>
        <Btn variant="ghost">Request API key</Btn>
      </div>
      <div style={{marginTop:40, fontSize:13, color:'var(--ink-3)', display:'flex', gap:24, justifyContent:'center'}}>
        <span>✓ Custom pricing</span>
        <span>✓ White-label demo</span>
        <span>✓ Security & compliance docs</span>
      </div>
    </div>
  </section>
);

// ---------- Footer ----------
const Footer = () => (
  <footer style={{borderTop:'1px solid var(--rule)', background:'var(--paper-2)', padding:'64px 0 32px'}}>
    <div className="wrap">
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:40, marginBottom:48}}>
        <div>
          <Logo/>
          <p style={{fontSize:14.5, color:'var(--ink-2)', margin:'16px 0 0', maxWidth:300, textWrap:'pretty'}}>
            The review management API for platforms, marketplaces and agencies.
          </p>
        </div>
        {[
          ['Products', ['Review Data & Insights API','Review Response API','Review Solicitation API','Review Flagging API','White-label suite']],
          ['Company',  ['About us','Partners','Blog','Careers','Contact']],
          ['Developers', ['API Docs','Status','Changelog','Security','Request API key']],
        ].map(([h, items])=>(
          <div key={h}>
            <div style={{fontSize:12, color:'var(--ink-3)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:14, fontWeight:500}}>{h}</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {items.map(i=> <a key={i} style={{fontSize:14, color:'var(--ink)'}}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{paddingTop:24, borderTop:'1px solid var(--rule)', display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--ink-3)'}}>
        <span>© 2026 Reviora. All rights reserved.</span>
        <div style={{display:'flex', gap:20}}>
          <a>Privacy Policy</a>
          <a>Terms of Service</a>
          <a className="mono">v4.2 — api.reviora.com</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Pillars, BuildVsBuy, ReviewSites, Stats, CTA, Footer });