// pages/services.jsx — Ambady Pebbles Garden services

function ServicesIndexPage() {
  return (
    <main>
      <section style={{ background: 'var(--forest)', color: 'var(--paper)', paddingBlock: 'clamp(60px, 8vw, 120px)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center' }} className="svc-hero">
            <div>
              <span className="eyebrow" style={{ color: 'var(--sage)' }}>Services</span>
              <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 0.98, marginTop: 12 }}>
                More than<br/>a pebble shop.
              </h1>
              <p style={{ color: 'rgba(255,255,255,0.75)', maxWidth: 520, marginTop: 18, fontSize: '1.05rem' }}>
                We supply pebbles in bulk across India, and around Thrissur we'll style your pots, lay your pathways
                and dress your garden corners on site.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <a href="#/services/bulk-supply" className="btn btn--terra btn--lg">Wholesale enquiry</a>
                <a href="https://wa.me/917559907176" target="_blank" rel="noreferrer" className="btn btn--ghost btn--lg" style={{ color: 'var(--paper)', border: '1px solid rgba(255,255,255,0.18)' }}>
                  <Icon name="whatsapp" size={16}/> WhatsApp us
                </a>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', borderRadius: 24, overflow: 'hidden', background: 'var(--moss)' }}>
              <img src="images/poster-path-stones.jpeg" alt="Pebble pathway project" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="spread" style={{ marginBottom: 32, alignItems: 'flex-end' }}>
            <div>
              <span className="eyebrow">What we offer</span>
              <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8 }}>Four ways we help.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
            {HAP.SERVICES.map(s => (
              <a key={s.slug} href={'#/services/' + s.slug}
                 style={{ background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 12, transition: 'transform 200ms, box-shadow 200ms' }}
                 onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
                <div style={{ aspectRatio: '5/3', background: 'var(--cream)', borderRadius: 12, overflow: 'hidden' }}>
                  <img src={SVC_IMG[s.slug]} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div className="eyebrow">{s.region}</div>
                <h3 className="serif" style={{ fontSize: '1.3rem', lineHeight: 1.2 }}>{s.name}</h3>
                <p style={{ color: 'var(--muted)', fontSize: '.9rem' }}>{s.tagline}</p>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--forest)', fontSize: '.88rem', fontWeight: 500 }}>
                  Learn more <Icon name="arrow-right" size={14} />
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <ProcessStrip />

      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <span className="eyebrow">Trusted by</span>
          <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8, marginBottom: 32 }}>Some of the projects we've supplied.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
            {['Resorts in Munnar', 'Villas in Thrissur', 'Kochi apartments', 'Temple landscaping', 'Nursery partners', 'Cafe & restaurant decor', 'Builder projects', 'Event stylists'].map(n => (
              <div key={n} style={{ background: 'var(--paper)', padding: 24, borderRadius: 12, textAlign: 'center', fontFamily: 'var(--serif)', fontSize: '1.05rem', color: 'var(--ink-2)' }}>{n}</div>
            ))}
          </div>
        </div>
      </section>

      <style>{`@media (max-width: 980px) { .svc-hero { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

const SVC_IMG = {
  'bulk-supply': 'images/pebble-mixed-river.jpg',
  'pot-styling': 'images/poster-pot-styling.jpeg',
  'pathway-design': 'images/poster-leaf-stones.jpeg',
  'garden-decor': 'images/poster-home-decor.jpeg'
};

function ProcessStrip() {
  const steps = [
    { n: '01', t: 'Tell us', b: 'Share photos, a sketch or just a quantity. We reply within a day, in Malayalam or English.' },
    { n: '02', t: 'Quote', b: 'A transparent price by weight or by project — freight quoted separately for bulk.' },
    { n: '03', t: 'Despatch / visit', b: 'We weigh and box for delivery, or schedule an on-site visit around Thrissur.' },
    { n: '04', t: 'Finish', b: 'Pebbles laid, pots styled, path set. A quick clean-up and you\'re done.' }
  ];
  return (
    <section className="section-sm" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <span className="eyebrow">How we work</span>
        <h2 className="serif" style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', marginTop: 8, marginBottom: 28 }}>Simple, from enquiry to finish.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="process-grid">
          {steps.map(s => (
            <div key={s.n} style={{ background: 'var(--shell)', borderRadius: 12, padding: 24, borderTop: '2px solid var(--forest)' }}>
              <div className="serif" style={{ fontSize: '2rem', color: 'var(--terra)' }}>{s.n}</div>
              <div className="serif" style={{ fontSize: '1.2rem', marginTop: 4 }}>{s.t}</div>
              <p style={{ color: 'var(--muted)', fontSize: '.88rem', marginTop: 8, lineHeight: 1.5 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .process-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>
  );
}

function ServiceDetailPage() {
  const route = useRoute();
  const slug = route.params.slug;
  const s = HAP.SERVICES.find(x => x.slug === slug);
  if (!s) return <main className="container section"><h1 className="serif">Service not found</h1><a className="btn btn--primary" href="#/services">Back to services</a></main>;

  const config = serviceConfig(slug);

  return (
    <main>
      <section style={{ background: config.heroBg, color: config.heroFg, paddingBlock: 'clamp(48px, 6vw, 96px)' }}>
        <div className="container">
          <div className="crumb" style={{ marginBottom: 16, color: config.heroFg, opacity: 0.7 }}>
            <a href="#/" style={{ color: 'inherit' }}>Home</a><span className="sep">/</span>
            <a href="#/services" style={{ color: 'inherit' }}>Services</a><span className="sep">/</span>
            <span className="here" style={{ color: 'inherit' }}>{s.name}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'end' }} className="svc-detail-hero">
            <div>
              <span className="eyebrow" style={{ color: config.eyebrow }}>{s.region}</span>
              <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 0.98, marginTop: 12 }}>{s.name}</h1>
              <p style={{ maxWidth: 540, marginTop: 16, fontSize: '1.05rem', opacity: 0.85 }}>{config.intro}</p>
              <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                <button className="btn btn--terra btn--lg">Get a free quote</button>
                <a href="https://wa.me/917559907176" target="_blank" rel="noreferrer" className="btn btn--secondary btn--lg">
                  <Icon name="whatsapp" size={16}/> WhatsApp us
                </a>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', background: 'rgba(255,255,255,0.08)', borderRadius: 24, overflow: 'hidden' }}>
              <img src={SVC_IMG[slug] || 'images/poster-home-decor.jpeg'} alt={`${s.name}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48 }} className="svc-includes">
            <div>
              <span className="eyebrow">What's included</span>
              <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8 }}>{config.headline}</h2>
              <p style={{ color: 'var(--ink-2)', marginTop: 16 }}>{config.body}</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {config.features.map((f, i) => (
                <div key={i} style={{ background: 'var(--cream)', padding: 20, borderRadius: 12 }}>
                  <Icon name={f.i} size={20} style={{ color: 'var(--forest)' }} />
                  <div className="serif" style={{ fontSize: '1.05rem', marginTop: 8 }}>{f.t}</div>
                  <div style={{ fontSize: '.85rem', color: 'var(--muted)', marginTop: 4 }}>{f.b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {config.plans && (
        <section className="section-sm" style={{ background: 'var(--paper-2)' }}>
          <div className="container">
            <span className="eyebrow">Pricing</span>
            <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8, marginBottom: 24 }}>Indicative pricing.</h2>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${config.plans.length}, 1fr)`, gap: 16 }} className="plan-grid">
              {config.plans.map((p) => (
                <div key={p.name} style={{
                  background: 'var(--shell)', borderRadius: 16, padding: 28,
                  border: p.featured ? '2px solid var(--forest)' : '1px solid var(--line)',
                  position: 'relative'
                }}>
                  {p.featured && <span style={{ position: 'absolute', top: -12, left: 24, background: 'var(--forest)', color: 'var(--paper)', padding: '4px 10px', borderRadius: 999, fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.08em' }}>Most chosen</span>}
                  <div className="eyebrow">{p.tier}</div>
                  <h3 className="serif" style={{ fontSize: '1.6rem', marginTop: 4 }}>{p.name}</h3>
                  <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span className="serif" style={{ fontSize: '2.4rem', color: 'var(--forest)' }}>{p.price}</span>
                    <span style={{ color: 'var(--muted)', fontSize: '.85rem' }}>{p.unit}</span>
                  </div>
                  <ul style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {p.features.map(f => (
                      <li key={f} style={{ display: 'flex', gap: 8, fontSize: '.9rem', color: 'var(--ink-2)' }}>
                        <Icon name="check" size={14} style={{ color: 'var(--forest)', marginTop: 4, flexShrink: 0 }} /> {f}
                      </li>
                    ))}
                  </ul>
                  <button className={'btn btn--full ' + (p.featured ? 'btn--primary' : 'btn--secondary')} style={{ marginTop: 20 }}>
                    {p.cta || 'Enquire'}
                  </button>
                </div>
              ))}
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .plan-grid { grid-template-columns: 1fr !important; } }`}</style>
        </section>
      )}

      <section className="section">
        <div className="container">
          <div className="spread" style={{ marginBottom: 24, alignItems: 'flex-end' }}>
            <div>
              <span className="eyebrow">Recent work</span>
              <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8 }}>A few favourites.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="port-grid">
            {PORTFOLIO.map((img, i) => (
              <div key={i} style={{ aspectRatio: i === 0 ? '4/5' : '1', borderRadius: 12, overflow: 'hidden', background: 'var(--cream)', gridRow: i === 0 ? 'span 2' : 'auto' }}>
                <img src={'images/' + img} alt={`${s.name} project ${i+1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 720px) { .port-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </section>

      <section className="section" style={{ background: 'var(--forest)', color: 'var(--paper)' }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <span className="eyebrow" style={{ color: 'var(--sage)' }}>Start a project</span>
            <h2 className="serif" style={{ fontSize: 'clamp(2rem, 4vw, 3.2rem)', marginTop: 8 }}>Tell us what you need.</h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', marginTop: 12, maxWidth: 540, marginInline: 'auto' }}>A quick form below — we'll come back with photos of similar work and an indicative quote.</p>
          </div>
          <EnquiryForm dark />
        </div>
      </section>
    </main>
  );
}

const PORTFOLIO = ['poster-pot-styling.jpeg', 'pebble-white-polished.jpg', 'poster-leaf-stones.jpeg', 'buddha-cream-dhyana.jpg', 'pebble-multicolour.jpg', 'planter-white-large.jpg'];

function EnquiryForm({ dark }) {
  const [done, setDone] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', projectType: 'Bulk / wholesale pebbles', message: '' });
  const submit = (e) => {
    e.preventDefault();
    setErr('');
    const ticketRes = window.CustomerForms.openPublicTicket({
      customerName: form.name,
      customerEmail: form.email,
      customerPhone: form.phone,
      category: 'bulk_quote',
      subject: 'Service enquiry · ' + form.projectType,
      body: form.message || ('Project type: ' + form.projectType),
    });
    if (!ticketRes.ok) {
      setErr(ticketRes.message || 'Could not send enquiry');
      return;
    }
    const leadRes = window.CustomerForms.saveLead({
      name: form.name,
      phone: form.phone,
      email: form.email,
      projectType: form.projectType,
      message: form.message,
      source: 'service_enquiry',
      ticketId: ticketRes.ticket.id,
    });
    setDone({ ticket: ticketRes.ticket, lead: leadRes.ok ? leadRes.lead : null });
    HAPStore.notify('Enquiry sent · ' + ticketRes.ticket.id);
  };
  if (done) return (
    <div style={{ textAlign: 'center', padding: 32, background: dark ? 'rgba(255,255,255,0.06)' : 'var(--cream)', borderRadius: 16 }}>
      <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
        <Icon name="check" size={24} />
      </div>
      <h3 className="serif" style={{ fontSize: '1.6rem' }}>Thanks! We'll be in touch.</h3>
      <p style={{ marginTop: 8, opacity: 0.7 }}>
        Ticket <b>{done.ticket.id}</b>
        {done.lead ? <> · Lead <b>{done.lead.id}</b></> : null}
        {' '}· usually within one working day.
      </p>
    </div>
  );
  return (
    <form onSubmit={submit}
          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="enq-form">
      {err && <div style={{ gridColumn: 'span 2', color: 'var(--terra)', fontSize: '.88rem' }}>{err}</div>}
      <input className="input input--lg" placeholder="Your name" required style={dark ? darkInput : undefined} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
      <input className="input input--lg" placeholder="Phone (with WhatsApp)" required style={dark ? darkInput : undefined} value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
      <input className="input input--lg" placeholder="Email" type="email" style={{ gridColumn: 'span 2', ...(dark ? darkInput : {}) }} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
      <select className="select input--lg" style={{ gridColumn: 'span 2', ...(dark ? darkInput : {}) }} value={form.projectType} onChange={(e) => setForm({ ...form, projectType: e.target.value })}>
        <option>Bulk / wholesale pebbles</option>
        <option>Pot styling</option>
        <option>Pathway design</option>
        <option>Garden decor setup</option>
      </select>
      <textarea className="textarea" placeholder="Tell us about your project or quantity" rows="4" required style={{ gridColumn: 'span 2', ...(dark ? darkInput : {}) }} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}></textarea>
      <button type="submit" className="btn btn--terra btn--lg" style={{ gridColumn: 'span 2' }}>Send enquiry</button>
    </form>
  );
}
const darkInput = { background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.14)', color: 'var(--paper)' };

function serviceConfig(slug) {
  const base = { heroBg: 'var(--cream)', heroFg: 'var(--ink)', eyebrow: 'var(--moss)' };
  const configs = {
    'bulk-supply': {
      ...base, heroBg: 'var(--forest)', heroFg: 'var(--paper)', eyebrow: 'var(--sage)',
      intro: 'Bulk and wholesale pebble supply for builders, resorts, landscapers and nurseries — by the bag or the truckload, delivered across India.',
      headline: 'Pebbles by the truckload.',
      body: 'We supply decorative pebbles, marble chips, gravel and sand in bulk to the trade. Pricing scales with volume, and we can ship pan-India by freight. Tell us the colour, size and quantity, and we\'ll quote material plus transport separately.',
      features: [
        { i: 'truck', t: 'Pan-India freight', b: 'From a few bags to full truckloads' },
        { i: 'tag', t: 'Volume pricing', b: 'Better rates the more you order' },
        { i: 'package', t: 'Consistent grading', b: 'Cleaned, sized and weighed' },
        { i: 'shield', t: 'Trade terms', b: 'Invoicing for registered businesses' }
      ],
      plans: [
        { tier: 'Retail', name: 'By the bag', price: '₹79', unit: '/ kg onward', features: ['Any colour or type', 'Small-quantity orders', 'Courier delivery', 'Free above ₹999'] },
        { featured: true, tier: 'Trade', name: 'Bulk pallet', price: 'On quote', unit: '/ order', features: ['100 kg and above', 'Volume discount', 'Freight quoted separately', 'Dedicated contact'] },
        { tier: 'Project', name: 'Truckload', price: 'Custom', unit: '/ project', features: ['Full-truck supply', 'Best per-kg pricing', 'Scheduled despatch', 'Pan-India delivery'] }
      ]
    },
    'pot-styling': {
      ...base, heroBg: 'var(--sage-2)', heroFg: 'var(--ink)', eyebrow: 'var(--forest)',
      intro: 'Bring us your pots — or we\'ll come to you around Thrissur — and we\'ll top-dress them with the right pebbles, chips and accents for a finished, designer look.',
      headline: 'The right pebble for every pot.',
      body: 'A small service we love: matching pebble colour and size to your plants and pots. We do it in-store for free with any pebble purchase, or on-site for homes and offices around Thrissur for a small visit charge.',
      features: [
        { i: 'spark', t: 'Colour matching', b: 'Pebbles picked for your plants & pots' },
        { i: 'leaf', t: 'Top-dressing', b: 'Clean, professional pot finish' },
        { i: 'truck', t: 'On-site option', b: 'We bring options to you' },
        { i: 'refresh', t: 'Refresh service', b: 'Rinse & re-style anytime' }
      ]
    },
    'pathway-design': {
      ...base, heroBg: 'var(--moss)', heroFg: 'var(--paper)', eyebrow: 'var(--sage-2)',
      intro: 'Stepping-stone and pebble pathways for gardens, villas and resorts. We set the stones, fill the gaps with pebbles, and leave you a clean, slip-resistant path.',
      headline: 'Paths that lead somewhere lovely.',
      body: 'From a short garden walk to a resort approach, we design and lay stepping-stone and pebble pathways. We handle the stones, the pebble fill and the edging — and finish with a clean-up.',
      features: [
        { i: 'map', t: 'Path layout', b: 'Designed to your garden' },
        { i: 'package', t: 'Stone + pebble fill', b: 'Supplied and set' },
        { i: 'shield', t: 'Slip-resistant', b: 'Textured, weatherproof finish' },
        { i: 'spark', t: 'Edging & borders', b: 'Tidy, defined edges' }
      ],
      plans: [
        { tier: 'Garden', name: 'Short path', price: 'On quote', unit: '/ project', features: ['Stepping stones supplied', 'Pebble gap fill', 'Edging included', 'Around Thrissur'] },
        { featured: true, tier: 'Villa', name: 'Full pathway', price: 'Custom', unit: '/ project', features: ['Design + layout', 'Stones & pebbles', 'Edging + clean-up', 'Kerala-wide'] }
      ]
    },
    'garden-decor': {
      ...base, heroBg: 'var(--ink-2)', heroFg: 'var(--paper)', eyebrow: 'var(--sage)',
      intro: 'On-site garden decor around Thrissur — pebbles, Buddha statues, planters and ground cover arranged into a calm, finished corner.',
      headline: 'A finished garden corner.',
      body: 'Tell us the spot — a balcony, an entrance, a courtyard nook — and we\'ll bring pebbles, a statue or two, planters and ground cover, and arrange it all on site for a calm, photo-ready finish.',
      features: [
        { i: 'spark', t: 'Styled on site', b: 'We arrange, you approve' },
        { i: 'package', t: 'Statues & planters', b: 'Buddha, pots, fillers' },
        { i: 'leaf', t: 'Ground cover', b: 'Live grass & low plants' },
        { i: 'refresh', t: 'Refresh visit', b: 'One free tidy-up at 30 days' }
      ]
    }
  };
  return configs[slug] || { ...base, intro: 'Service details coming soon.', headline: '', body: '', features: [] };
}

window.ServicesIndexPage = ServicesIndexPage;
window.ServiceDetailPage = ServiceDetailPage;