// Services overview page

const Services = () => {
  const services = [
    { n: '01', t: 'AI Opportunity Audit', d: "We shadow your team for two weeks, learn how the business actually runs, and point at the corners where AI pays off most.", timeline: '2 weeks' },
    { n: '02', t: 'Custom Agents & Automations', d: 'Internal copilots, customer-facing assistants, automated workflows. Built into the tools you already use — Slack, your CRM, your inbox — and owned by you.', timeline: '4–8 weeks' },
    { n: '03', t: 'AI-Powered Marketing', d: 'Content engines, smarter SEO, ad creative that compounds week over week. Built once, your team runs it forever.', timeline: '6–10 weeks' },
    { n: '04', t: 'Web Design & Development', d: "Sites that load fast and convert. WordPress when you want to edit it yourself, custom when you don't. We host on whatever's cheapest and most reliable.", timeline: '6–10 weeks' },
    { n: '05', t: 'Paid Ads & SEO', d: 'Google, Meta, organic. Same AI tools we build for clients, used on our own work first — so the work compounds, week over week.', timeline: 'Ongoing' },
    { n: '06', t: 'Training & Enablement', d: "After we ship, your team needs to live with it. We run workshops and write the docs that make sure the system actually gets used.", timeline: '2–4 weeks' },
  ];

  const css = `
    .svc-list { border-top: 1px solid rgba(26,22,18,0.12); }
    .svc-row { display: grid; grid-template-columns: 80px 1fr 1.4fr 160px 60px; gap: 32px; padding: 40px 16px; border-bottom: 1px solid rgba(26,22,18,0.12); align-items: center; cursor: pointer; transition: padding 0.3s, background 0.3s; position: relative; overflow: hidden; }
    .svc-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(200,84,42,0.05), transparent 70%); transform: translateX(-100%); transition: transform 0.5s cubic-bezier(.2,.8,.3,1); }
    .svc-row:hover::before { transform: translateX(0); }
    .svc-row:hover { padding-left: 32px; }
    .svc-row:hover .svc-arrow { transform: translateX(8px); color: #c8542a; }
    .svc-row:hover .svc-title { color: #c8542a; }
    .svc-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; letter-spacing: 0.1em; position: relative; }
    .svc-title { font-family: 'Instrument Serif', serif; font-size: 40px; font-weight: 400; letter-spacing: -0.02em; transition: color 0.3s; line-height: 1.05; position: relative; }
    .svc-desc { font-size: 14px; line-height: 1.55; color: #4a3f33; position: relative; }
    .svc-meta { display: flex; flex-direction: column; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; position: relative; }
    .svc-meta span { color: #1a1612; }
    .svc-arrow { font-size: 24px; color: rgba(26,22,18,0.3); transition: all 0.3s; text-align: right; font-family: 'Instrument Serif', serif; font-style: italic; position: relative; }

    .svc-cta { padding: 100px 56px 0; max-width: 1400px; margin: 60px auto 0; }
    .svc-cta-card { background: #1a1612; color: #f4efe6; border-radius: 24px; padding: 80px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; position: relative; overflow: hidden; }
    .svc-cta-card::before { content: ''; position: absolute; top: -250px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232,167,127,0.25) 0%, transparent 70%); border-radius: 50%; animation: wefloat 12s ease-in-out infinite; }
    @keyframes wefloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px, 40px); } }
    .svc-cta-h { font-family: 'Instrument Serif', serif; font-size: 64px; line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 16px; position: relative; }
    .svc-cta-h em { font-style: italic; color: #e8a77f; }
    .svc-cta-p { font-size: 17px; line-height: 1.5; color: rgba(244,239,230,0.7); margin: 0; max-width: 480px; position: relative; }
    .svc-cta-btn { font-size: 16px; padding: 18px 32px; background: #e8a77f; color: #1a1612; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.3s, background 0.3s; align-self: center; justify-self: end; position: relative; }
    .svc-cta-btn:hover { transform: translateY(-3px); background: #f4efe6; }

    @media (max-width: 1024px) {
      .svc-row { grid-template-columns: 60px 1fr 1.2fr 130px 40px; gap: 24px; padding: 32px 12px; }
      .svc-title { font-size: 32px; }
      .svc-cta { padding: 64px 32px 0; margin-top: 40px; }
      .svc-cta-card { padding: 56px 40px; gap: 32px; grid-template-columns: 1fr; }
      .svc-cta-h { font-size: 48px; }
      .svc-cta-btn { justify-self: start; }
    }
    @media (max-width: 720px) {
      .svc-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 8px 14px; padding: 28px 8px; }
      .svc-num { grid-column: 1; grid-row: 1; }
      .svc-arrow { grid-column: 3; grid-row: 1; font-size: 20px; }
      .svc-title { grid-column: 1 / -1; grid-row: 2; font-size: 28px; }
      .svc-desc { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
      .svc-meta { grid-column: 1 / -1; grid-row: 4; flex-direction: row; gap: 12px; margin-top: 4px; }
      .svc-row:hover { padding-left: 8px; }
      .svc-cta { padding: 48px 20px 0; margin-top: 24px; }
      .svc-cta-card { padding: 40px 28px; border-radius: 18px; }
      .svc-cta-h { font-size: 36px; }
      .svc-cta-p { font-size: 15px; }
      .svc-cta-btn { padding: 14px 24px; font-size: 14px; }
    }
  `;

  return (
    <>
      <window.WeNav active="services" />
      <window.WeSEO page="services" />
      <style>{css}</style>
      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>Services</div>
        <h1 className="we-page-h1">A few <em>different ways</em><br />we can help.</h1>
        <p className="we-page-sub">We don't sell deliverables — we sell partnership. Every engagement starts with understanding the whole business, then picking the smallest move that earns its keep.</p>
      </section>

      <section className="we-section">
        <div className="svc-list">
          {services.map(s => (
            <a className="svc-row" href="Leviyet Contact.html" key={s.n}>
              <div className="svc-num">— {s.n}</div>
              <div className="svc-title">{s.t}</div>
              <div className="svc-desc">{s.d}</div>
              <div className="svc-meta">
                <div>timeline · <span>{s.timeline}</span></div>
              </div>
              <div className="svc-arrow">→</div>
            </a>
          ))}
        </div>

        <div style={{marginTop:'80px',padding:'40px 32px',background:'#ede5d6',borderRadius:'18px',display:'grid',gridTemplateColumns:'auto 1fr',gap:'28px',alignItems:'center'}}>
          <div style={{fontFamily:"'Instrument Serif', serif",fontSize:'72px',lineHeight:1,color:'#c8542a',fontStyle:'italic'}}>?</div>
          <div>
            <div style={{fontFamily:"'JetBrains Mono', monospace",fontSize:'11px',color:'#c8542a',letterSpacing:'0.15em',textTransform:'uppercase',marginBottom:'10px'}}>// principle 01</div>
            <h3 style={{fontFamily:"'Instrument Serif', serif",fontSize:'30px',lineHeight:1.15,letterSpacing:'-0.015em',margin:'0 0 8px',fontWeight:400}}>Sometimes the answer isn't AI. We'll tell you when.</h3>
            <p style={{fontSize:'15px',lineHeight:1.55,color:'#4a3f33',margin:0,maxWidth:'720px'}}>A clearer process, a one-page dashboard, or one good hire often beats a clever model. We've turned down work where the right answer was simpler — and we'll do the same for you. <a href="Leviyet FAQ.html" style={{color:'#c8542a',textDecoration:'underline',textUnderlineOffset:'3px'}}>Read the FAQ →</a></p>
          </div>
        </div>
      </section>

      <section className="svc-cta">
        <div className="svc-cta-card">
          <div>
            <h2 className="svc-cta-h">Not sure where to <em>start?</em></h2>
            <p className="svc-cta-p">Take the 60-second AI opportunity quiz on the homepage, or book a 30-minute intro call. No deck, no pitch.</p>
          </div>
          <a className="svc-cta-btn" href="Leviyet Contact.html">Book the call →</a>
        </div>
      </section>

      <window.WeFooter />
    </>
  );
};

window.Services = Services;