/* global React, Stars, Icon */

function Reviews() {
  const r = [
    ['Maria T.', 'On Mounjaro since spring', 'Ya’ll I’ve been taking this pills for 3 days .U can NOT believe me I lost 8 pounds I don’t know ,how ,where or even when ; IN 3 days 🙌🏼. I take 4 pills a day 2 with the lunch and 2 with the dinner. I always feel full 🙌🏼 I lost that massive appetite. Taste is good . Quality 100000/10 . The most part I like that it’s healthy 🙌🏼 One last thing ,I used to go to the restroom 1 time a day . Now I go more and feel my digestive system is much better than before.'],
    ['James R.', 'Verified buyer', 'This is a simple but good product. Easy to swallow. No sugary orange flavor. Fiber (soluble and insoluble) is so important yet we disregard it. Helps with soft, regular stools but also helps with cholesterol, weight loss, etc. If you’re using probiotics, they need fiber as a food source otherwise you’re not gaining the full benefits of the probiotics.'],
    ['Priya S.', 'Wegovy user', 'I’ve tried a few fiber supplements before and these are honestly one of the easiest to take. The capsules are a good size but still very easy to swallow, and I didn’t notice any weird taste or aftertaste. They were also much gentler than I expected but still worked really well. Within a short time I noticed everything was more “regular,” if you know what I mean. 😅 I also like that I don’t have to mix powders or deal with gritty drinks — just take the capsules and you’re good. Overall I’m really happy with these and will definitely keep them in my routine.']
  ];
  return (
    <section id="reviews" style={{ background: 'var(--green-900)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '76px 28px' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Stars n={5} size={22} />
          <h2 style={{ margin: '14px 0 6px', fontSize: 38, fontWeight: 800, letterSpacing: '-.02em', color: '#fff' }}>
            Loved by 15,000+ customers
          </h2>
          <p style={{ margin: 0, fontSize: 17, color: 'rgba(255,255,255,.7)' }}>4.8 average · 2,140 verified reviews</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
          {r.map(([name, role, text]) => (
            <div key={name} style={{ background: 'var(--white)', borderRadius: 18, padding: 26 }}>
              <Stars n={5} size={15} />
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--green-900)', margin: '14px 0 20px' }}>"{text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--green-100)',
                  color: 'var(--green-700)', fontWeight: 700, display: 'flex', alignItems: 'center',
                  justifyContent: 'center', fontSize: 15 }}>{name[0]}</div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--green-900)' }}>{name}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-400)', display: 'flex', alignItems: 'center', gap: 5 }}>
                    <Icon name="badge-check" size={13} color="var(--green-600)" />{role}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Shop', ['Psyllium Husk Fibre', 'Subscribe & save', 'Bundles', 'Gift cards']],
    ['Learn', ['How it works', 'For GLP-1 users', 'Ingredients', 'FAQ']],
    ['Company', ['About us', 'Reviews', 'Contact', 'Wholesale']]
  ];
  return (
    <footer style={{ background: 'var(--cream)', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 28px 32px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <img src="../../assets/logo-wordmark-black.png" alt="Psyllify" style={{ height: 24, marginBottom: 14 }} />
          <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-600)', maxWidth: 260, margin: 0 }}>
            Gentle daily psyllium husk fibre, made for GLP-1 users. Vegan · UK made · 3rd-party lab tested.
          </p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <h5 style={{ margin: '0 0 14px', fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase',
              color: 'var(--green-900)', fontWeight: 700 }}>{h}</h5>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(i => <li key={i}><a href="#" style={{ fontSize: 14.5, color: 'var(--ink-600)', textDecoration: 'none' }}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--line)', padding: '20px 28px', maxWidth: 1200, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--ink-400)' }}>
        <span>© 2026 Psyllify. Food supplement. Not a substitute for a varied diet.</span>
        <span style={{ display: 'flex', gap: 18 }}><a href="#" style={{ color: 'var(--ink-400)', textDecoration: 'none' }}>Privacy</a><a href="#" style={{ color: 'var(--ink-400)', textDecoration: 'none' }}>Terms</a></span>
      </div>
    </footer>
  );
}

Object.assign(window, { Reviews, Footer });