// Marquee + Services + Cases
const { Icons: SI } = window;

function Marquee() {
  const items = [
    'Beardo', 'Mokobara', 'Sleepy Owl', 'Boat', 'Wild Stone',
    'The Souled Store', 'Plix', 'Mamaearth', 'Snitch', 'Bewakoof',
    'Wakefit', 'Pilgrim',
  ];
  const row = (
    <div className="marquee">
      {[...items, ...items].map((b, i) => (
        <div key={i} className="marquee-item">
          <span className="dot"></span> {b}
        </div>
      ))}
    </div>
  );
  return (
    <section className="marquee-section" aria-label="Trusted by">
      {row}
    </section>
  );
}

function SectionHead({ num, eyebrow, title, accent, after, sub }) {
  return (
    <div className="section-head">
      <div>
        <div className="section-eyebrow">
          <span className="line"></span>
          <span className="num">{num} — {eyebrow}</span>
        </div>
        <h2>
          {title}
          {accent && <em> {accent}</em>}
          {after}
        </h2>
      </div>
      <p>{sub}</p>
    </div>
  );
}

function Services() {
  const items = [
    {
      tone: 'featured',
      ico: <SI.Store />,
      title: 'Build New Shopify Store',
      desc: "Custom-built Shopify stores designed to convert from day one. No templates — everything tailored to your brand.",
      meta: 'Flagship · 4–8 wks',
      href: 'shopify-store.html',
    },
    {
      tone: '',
      ico: <SI.Figma />,
      title: 'Figma to Shopify',
      desc: 'Pixel-perfect Figma designs converted into clean, performant Shopify themes. Hand-coded, not auto-generated.',
      meta: '2–3 wks',
      href: 'figma-to-shopify.html',
    },
    {
      tone: 'lime',
      ico: <SI.Gauge />,
      title: 'Shopify Audit',
      desc: "In-depth UX, performance, and conversion audit. We find what's broken and give you a clear roadmap to fix it.",
      meta: '1–2 wks',
      href: 'page-audits.html',
    },
    {
      tone: '',
      ico: <SI.Migrate />,
      title: 'Platform Migration',
      desc: 'Seamless migration from Magento, WooCommerce, BigCommerce, or any platform to Shopify. Zero downtime.',
      meta: '3–5 wks',
      href: 'migrate.html',
    },
    {
      tone: '',
      ico: <SI.Boxes />,
      title: 'B2B & Wholesale',
      desc: 'Shopify Plus B2B solutions with custom pricing, bulk ordering, and wholesale portals built for scale.',
      meta: '3–4 wks',
      href: 'contact.html',
    },
    {
      tone: '',
      ico: <SI.Code />,
      title: 'Custom App Development',
      desc: "Bespoke Shopify apps that extend your store's functionality. Built exactly for your business needs.",
      meta: '4–10 wks',
      href: 'contact.html',
    },
  ];

  return (
    <section className="block" id="services">
      <div className="container">
        <SectionHead
          num="01"
          eyebrow="What we do"
          title="Everything Shopify."
          accent="Nothing else."
          sub="A focused studio with six core offerings — every one of them sharpened on Shopify and Shopify Plus."
        />
        <div className="services-grid services-grid-6">
          {items.map((it) => (
            <a key={it.title} href={it.href} className={`svc ${it.tone}`}>
              <div className="ico">{it.ico}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <div className="meta">
                <span>{it.meta}</span>
                <SI.ArrowUR size={16} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Cases() {
  const cases = [
    {
      col: 7, label: 'Hero shot · DTC skincare',
      tone: 'green',
      tag: 'Plix', tags: ['Headless', 'Subscriptions', 'Plus'],
      title: 'Headless Shopify rebuild that cut load time by 71%',
      kpis: [['+184%', 'AOV'], ['1.2s', 'LCP'], ['+62%', 'Conv. rate']],
    },
    {
      col: 5, label: 'PDP detail · Luggage',
      tone: '',
      tag: 'Mokobara', tags: ['Custom theme', 'CRO'],
      title: 'A luggage PDP built like a configurator',
      kpis: [['+47%', 'Add-to-cart'], ['+22%', 'AOV'], ['9 wks', 'Build']],
    },
    {
      col: 5, label: 'Cart drawer · Coffee',
      tone: 'lime',
      tag: 'Sleepy Owl', tags: ['Migration', 'Subscriptions'],
      title: 'Magento → Shopify Plus, with 0 SEO bleed',
      kpis: [['+38%', 'Organic'], ['100%', 'Retain'], ['6 wks', 'Migrate']],
    },
    {
      col: 7, label: 'Editorial · Apparel',
      tone: '',
      tag: 'Snitch', tags: ['Shopify Plus', 'B2B', 'Plus'],
      title: 'B2B wholesale storefront for a 100k-SKU apparel brand',
      kpis: [['+3.2×', 'B2B GMV'], ['12k', 'Trade accts'], ['Plus', 'Tier']],
    },
  ];

  return (
    <section className="block" id="work" style={{ background: 'var(--cream-2)' }}>
      <div className="container">
        <SectionHead
          num="02"
          eyebrow="Selected work"
          title="Stores we've"
          accent="shipped"
          after="."
          sub="A few recent builds. We can walk you through the spreadsheets, the redesigns we killed, and the months we don't show on the case study."
        />
        <div className="cases">
          {cases.map((c, i) => (
            <article key={i} className={`case col-${c.col}`}>
              <div className={`thumb ${c.tone}`} data-label={c.label.toUpperCase()}></div>
              <div className="body">
                <div className="tags">
                  <span className="tag" style={{ background: 'var(--lime)', color: 'var(--forest)' }}>{c.tag}</span>
                  {c.tags.map(t => <span key={t} className="tag">{t}</span>)}
                </div>
                <h3>{c.title}</h3>
                <div className="kpis">
                  {c.kpis.map(([v, l], j) => (
                    <div key={j} className="kpi">
                      <div className="v">{v}</div>
                      <div className="l">{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <a href="case-study.html" className="btn btn-ghost btn-arrow">View all 32 case studies <SI.Arrow size={16}/></a>
        </div>
      </div>
    </section>
  );
}

window.Marquee = Marquee;
window.SectionHead = SectionHead;
window.Services = Services;
window.Cases = Cases;