const { Button, StatusBadge, Input } = window.WAGMIGlobalDesignSystem_6f9300;

const CASES = [
  ['work-privex', 'PriveX', 'development', 'Private perpetual trading infrastructure', 'Built the go-to-market engine for a next-generation perp DEX, from positioning to launch.', 'Full-stack build'],
  ['work-stablis', 'Stablis', 'development', 'Stablecoin infrastructure for a changing market', 'Incubated from concept to a launch-ready protocol, with tokenomics and product owned end-to-end.', 'Incubation'],
  ['work-nfa', 'NFA.club', 'live', 'The home of onchain trading culture', 'Grew a global community and brand for traders and degens into a live, thriving product.', 'Growth & community'],
  ['work-panenka', 'Panenka.ai', 'live', 'AI-powered football intelligence', 'Brought data, AI and community together for smarter football insights, live and scaling.', 'BD & community'],
];

function Portfolio() {
  const [active, setActive] = React.useState(0);
  const c = CASES[active];
  return (
    <section id="portfolio" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--lime-500)', fontWeight: 600 }}>Portfolio</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 46, lineHeight: 1.06, letterSpacing: '-0.015em', margin: '18px 0 44px' }}>Building across DeFi, AI and Web3 infrastructure.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 40, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {CASES.map((cc, i) => (
              <button key={cc[1]} onClick={() => setActive(i)} style={{ appearance: 'none', textAlign: 'left', cursor: 'pointer', background: i === active ? 'var(--ink-800)' : 'transparent', border: `1px solid ${i === active ? 'var(--border-default)' : 'transparent'}`, borderRadius: 'var(--radius-md)', padding: '18px 20px', transition: 'background .2s' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: i === active ? 'var(--paper-100)' : 'var(--text-secondary)' }}>{cc[1]}</span>
                  <StatusBadge status={cc[2]} />
                </div>
                {i === active && <div style={{ marginTop: 8, fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.5 }}>{cc[3]}</div>}
              </button>
            ))}
          </div>
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-subtle)', position: 'relative', minHeight: 420, display: 'flex', flexDirection: 'column' }}>
            <div style={{ flex: 1, backgroundImage: `url(../assets/${c[0]}.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            <div style={{ padding: 30, background: 'var(--surface-card)' }}>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--lime-500)', fontWeight: 600 }}>{c[5]}</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22 }}>{c[3]}</div>
              <div style={{ marginTop: 12, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{c[4]}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Portfolio = Portfolio;

function Testimonial() {
  return (
    <section style={{ borderBottom: '1px solid var(--border-subtle)', background: 'var(--gradient-glow-violet), var(--ink-850)' }}>
      <div style={{ maxWidth: 940, margin: '0 auto', padding: '92px 32px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, lineHeight: 0.6, color: 'var(--violet-500)' }}>&ldquo;</div>
        <blockquote style={{ margin: '18px 0 0', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 29, lineHeight: 1.34, letterSpacing: '-0.01em', color: 'var(--paper-100)' }}>
          WAGMI didn't just handle community and social. They turned them into powerful growth engines. That freed our dev team to focus on core protocol work while amplifying our market presence. They became integral to our success.
        </blockquote>
        <div style={{ marginTop: 28, fontSize: 14, color: 'var(--text-secondary)' }}>Philip D., <span style={{ color: 'var(--text-primary)' }}>Founder of Arkadiko</span></div>
      </div>
    </section>
  );
}
window.Testimonial = Testimonial;

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--lime-500)', fontWeight: 600 }}>Let's build</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.02em', margin: '20px 0 0', color: 'var(--paper-100)' }}>
              Building something that <span style={{ color: 'var(--lime-500)' }}>should exist?</span>
            </h2>
            <p style={{ marginTop: 22, maxWidth: 420, fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
              Tell us about your project and we'll come back with the highest-leverage path forward. Great partnerships start here.
            </p>
          </div>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '40px 40px', boxShadow: 'var(--shadow-card)' }}>
            {sent ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, color: 'var(--lime-500)' }}>Thanks for submitting!</div>
                <p style={{ marginTop: 12, color: 'var(--text-secondary)', fontSize: 15 }}>We'll be in touch within one business day.</p>
                <div style={{ marginTop: 22 }}><Button variant="ghost" icon={false} onClick={() => setSent(false)}>Send another</Button></div>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <Input label="First name" placeholder="Jane" />
                  <Input label="Last name" placeholder="Doe" />
                </div>
                <Input label="Email" placeholder="you@project.xyz" />
                <label style={{ display: 'block' }}>
                  <span style={{ display: 'block', marginBottom: 8, fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)' }}>What are you building?</span>
                  <textarea rows={3} placeholder="A few lines on your project…" style={{ width: '100%', boxSizing: 'border-box', padding: 14, fontSize: 15, fontFamily: 'var(--font-body)', color: 'var(--text-primary)', background: 'var(--ink-850)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', outline: 'none', resize: 'vertical' }} />
                </label>
                <div style={{ marginTop: 6 }}><Button variant="accent" onClick={() => setSent(true)}>Send message</Button></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

function Footer() {
  const cols = {
    Studio: ['Approach', 'Capabilities', 'How we operate'],
    Work: ['Contact', 'Start a project', 'Careers'],
    Connect: ['Start a project', 'X / Twitter', 'LinkedIn'],
  };
  return (
    <footer style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 32px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)', gap: 40 }}>
        <div>
          <window.Logo size={30} />
          <p style={{ marginTop: 18, maxWidth: 300, fontSize: 13, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            The senior Web3 operating team founders bring in when strategy, product, growth and execution need to work as one.
          </p>
        </div>
        {Object.entries(cols).map(([h, items]) => (
          <div key={h}>
            <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-muted)', marginBottom: 16 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map((i) => <a key={i} href="#" style={{ fontSize: 14, color: 'var(--text-secondary)', textDecoration: 'none' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12, color: 'var(--text-muted)' }}>
        <span>© 2026 SRI Group BV. All rights reserved.</span>
        <span style={{ textTransform: 'uppercase', letterSpacing: '0.12em' }}>We're gonna make it, one block at a time</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;