// Process + Stack + Pricing + Testimonials + CTA + Footer
const { Icons: BI, SectionHead: BHead } = window;

function Process() {
  const steps = [
    { n: '01', t: 'Discover', d: 'Two 60-min calls. We dig into your customer, your back-office, your past launches. No NDA dance — we sign yours.' },
    { n: '02', t: 'Architect', d: 'Theme architecture, section library, integrations map, redirects sheet. Approve before we touch a line of Liquid.' },
    { n: '03', t: 'Build', d: 'Weekly Loom walkthroughs on a staging store. You comment in Figma; we ship by Friday.' },
    { n: '04', t: 'Launch & tune', d: 'Soft launch on a Tuesday. Two weeks of post-launch tuning included — bug fixes, speed, conversion patches.' },
  ];
  return (
    <section className="block" style={{ padding: 0 }}>
      <div className="process-section">
        <div className="container">
          <BHead
            num="03"
            eyebrow="How we work"
            title="Four steps."
            accent="No surprises"
            after="."
            sub="Every engagement runs the same playbook so deadlines stay deadlines. The only thing we improvise is how we make it good."
          />
          <div className="steps">
            {steps.map(s => (
              <div key={s.n} className="step-card">
                <div className="n">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Stack() {
  const items = [
    { name: 'Shopify',     cat: 'Platform',     g: 'S' },
    { name: 'Hydrogen',    cat: 'Headless',     g: 'H' },
    { name: 'Liquid',      cat: 'Templating',   g: 'Lq' },
    { name: 'Klaviyo',     cat: 'Email · SMS',  g: 'K' },
    { name: 'Recharge',    cat: 'Subscriptions',g: 'Rc' },
    { name: 'Yotpo',       cat: 'Reviews',      g: 'Y' },
    { name: 'Gorgias',     cat: 'Support',      g: 'G' },
    { name: 'Algolia',     cat: 'Search',       g: 'Al' },
    { name: 'Sanity',      cat: 'Headless CMS', g: 'Sn' },
    { name: 'Stripe',      cat: 'Payments',     g: 'St' },
    { name: 'GA4',         cat: 'Analytics',    g: 'GA' },
    { name: 'Triple Whale',cat: 'Attribution',  g: 'Tw' },
  ];
  return (
    <section className="block" id="stack">
      <div className="container">
        <BHead
          num="04"
          eyebrow="Stack & integrations"
          title="The tools"
          accent="we plug in"
          after="."
          sub="We're integration-agnostic. If you already pay for it, we'll integrate it. If you don't, we'll tell you whether you should."
        />
        <div className="stack">
          {items.map(it => (
            <div key={it.name} className="stack-item">
              <div className="ico">{it.g}</div>
              <div>
                <div className="name">{it.name}</div>
                <div className="cat">{it.cat}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const plans = [
    {
      name: 'Audit',
      price: '₹49k',
      per: '/ one-off',
      desc: 'A 30-page diagnostic for an existing store. Speed, UX, code, conversion, SEO — scored and ranked.',
      feats: ['30-page written audit', 'Loom walkthrough (60 min)', 'Prioritised fix list', '2-week turnaround'],
      cta: 'Start an audit',
      featured: false,
    },
    {
      name: 'Studio',
      price: '₹2.8L',
      per: '/ project',
      desc: 'Fixed-scope builds. Figma → Shopify, migrations, theme dev, B2B setup. Most clients live here.',
      feats: ['Custom Shopify 2.0 theme', 'Up to 12 page templates', 'Klaviyo + analytics setup', '2 weeks post-launch support', 'Async via Loom + Slack'],
      cta: 'Book a discovery call',
      featured: true,
      tag: 'Most popular',
    },
    {
      name: 'Retainer',
      price: '₹1.2L',
      per: '/ month',
      desc: 'For Plus brands and DTCs over ₹5 Cr ARR. Dedicated dev hours, sprint planning, on-call.',
      feats: ['Dedicated lead dev', '60 dev hrs / month', 'Weekly sprint reviews', 'Roadmap planning', '4-hour response SLA'],
      cta: 'Talk retainer',
      featured: false,
    },
  ];
  return (
    <section className="block" id="pricing" style={{ background: 'var(--cream-2)' }}>
      <div className="container">
        <BHead
          num="05"
          eyebrow="Engagement models"
          title="Three ways"
          accent="to work with us"
          after="."
          sub="Fixed scope, fixed price. Retainers if you need ongoing development. No hourly billing surprises, ever."
        />
        <div className="pricing">
          {plans.map(p => (
            <div key={p.name} className={`plan${p.featured ? ' featured' : ''}`}>
              {p.tag && <span className="tag">{p.tag}</span>}
              <div>
                <h3>{p.name}</h3>
              </div>
              <div>
                <div className="price">{p.price}<small> {p.per}</small></div>
                <p className="desc">{p.desc}</p>
              </div>
              <ul>
                {p.feats.map(f => (
                  <li key={f}><BI.Check /> <span>{f}</span></li>
                ))}
              </ul>
              <a href="#contact" className={`btn ${p.featured ? 'btn-lime' : 'btn-ghost'} btn-arrow`}>
                {p.cta} <BI.Arrow size={14} />
              </a>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 32, textAlign: 'center', color: 'var(--mute)', fontSize: 14 }}>
          Pricing shown in INR. Quotes available in USD, GBP, AED. Plus engagements scoped on request.
        </p>
      </div>
    </section>
  );
}

function Testimonials() {
  const t = [
    {
      tone: '',
      q: "We'd been quoted six figures by a London agency for what MaximiseTeck shipped in five weeks. The store outperforms our old one by 3.1× on conversion.",
      n: 'Priya Sharma', r: 'Head of Ecom, DTC apparel brand', i: 'PS',
    },
    {
      tone: 'forest',
      q: "Our Magento → Shopify Plus migration was the part of the year I was most afraid of. They de-risked it. Zero downtime, zero SEO drop, every redirect mapped.",
      n: 'Daniel Boateng', r: 'CTO, UK skincare DTC', i: 'DB',
    },
    {
      tone: 'lime',
      q: "I'd hire them again on a handshake. The async working style — Loom walkthroughs every Friday — is the only thing that's let me stay sane through two launches.",
      n: 'Aarav Mehta', r: 'Founder, Mumbai-based coffee brand', i: 'AM',
    },
  ];
  return (
    <section className="block" id="testimonials">
      <div className="container">
        <BHead
          num="06"
          eyebrow="What clients say"
          title="Not the kind of"
          accent="testimonials"
          after=" you scroll past."
          sub="Real names, real brands, real outcomes. We'll put you on a call with any of them before you sign."
        />
        <div className="testimonials">
          {t.map((x, i) => (
            <article key={i} className={`testimonial ${x.tone}`}>
              <div className="quote-mark">"</div>
              <blockquote>{x.q}</blockquote>
              <div className="who">
                <div className="av">{x.i}</div>
                <div>
                  <div className="name">{x.n}</div>
                  <div className="role">{x.r}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="block" id="contact" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="cta-block">
          <div>
            <span className="pill" style={{ marginBottom: 24 }}><span className="dot"></span> 2 build slots open · June 2026</span>
            <h2>Got a Shopify problem<br/>worth solving?</h2>
          </div>
          <div>
            <p>30-minute discovery call. We come prepared — share your URL when you book and we'll have a punch list ready.</p>
            <div className="stack-btns">
              <a href="#" className="btn btn-primary btn-arrow" style={{ background: 'var(--forest)', color: 'var(--cream)' }}>
                Book a discovery call <BI.Arrow size={16}/>
              </a>
              <a href="#" className="btn" style={{ background: 'transparent', color: 'var(--forest)', border: '1.5px solid var(--forest)' }}>
                <BI.Whatsapp size={16}/> WhatsApp the studio
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const subs = [
    { url: 'shopify.maximiseteck.com', title: 'Shopify Studio', here: true },
    { url: 'build.maximiseteck.com',   title: 'Web & SaaS' },
    { url: 'studio.maximiseteck.com',  title: 'Content Creation' },
    { url: 'grow.maximiseteck.com',    title: 'Performance & Growth' },
  ];
  return (
    <footer>
      <div className="container">
        <div className="sub-domains">
          {subs.map(s => (
            <a key={s.url} className="sub-domain" href="#" style={{ opacity: s.here ? 1 : .8 }}>
              <span className="url">{s.url}{s.here && ' ●'}</span>
              <span className="title">{s.title}</span>
            </a>
          ))}
        </div>
        <div className="grid">
          <div className="brand">
            <img src="../assets/logo.png" alt="MaximiseTeck" />
            <p>Shopify Studio — a focused arm of MaximiseTeck. We design, build and tune Shopify stores from Mumbai, London and Dubai.</p>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="#">Custom Shopify builds</a></li>
              <li><a href="#">Figma → Shopify</a></li>
              <li><a href="#">Platform migrations</a></li>
              <li><a href="#">Shopify Plus</a></li>
              <li><a href="#">Audit & CRO</a></li>
              <li><a href="#">Speed optimization</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href="#">Selected work</a></li>
              <li><a href="#">Process</a></li>
              <li><a href="#">Pricing</a></li>
              <li><a href="#">Insights</a></li>
              <li><a href="#">Careers · we're hiring</a></li>
            </ul>
          </div>
          <div>
            <h4>Get in touch</h4>
            <ul>
              <li><a href="#">hello@maximiseteck.com</a></li>
              <li><a href="#">WhatsApp · +91 98765 43210</a></li>
              <li><a href="#">Mumbai · London · Dubai</a></li>
              <li><a href="#">Book a discovery call →</a></li>
            </ul>
          </div>
        </div>
        <div className="meta">
          <span>© 2026 MaximiseTeck Pvt Ltd. All rights reserved.</span>
          <span>Shopify Partner · Built in Mumbai · v2026.05</span>
        </div>
      </div>
    </footer>
  );
}

window.Process = Process;
window.Stack = Stack;
window.Pricing = Pricing;
window.Testimonials = Testimonials;
window.CTA = CTA;
window.Footer = Footer;