// pages/static.jsx — about, contact, team, clients, policies (Ambady Pebbles Garden)

function StaticPage() {
  const route = useRoute();
  const slug = route.params.slug;
  switch (slug) {
    case 'about': return <AboutPage />;
    case 'contact': return <ContactPage />;
    case 'our-team': return <TeamPage />;
    case 'our-clients': return <ClientsPage />;
    case 'shipping': return <PolicyPage title="Shipping Policy" body={POLICY.shipping} />;
    case 'refunds': return <PolicyPage title="Refunds & Cancellation" body={POLICY.refunds} />;
    case 'privacy': return <PolicyPage title="Privacy Policy" body={POLICY.privacy} />;
    case 'terms': return <PolicyPage title="Terms & Conditions" body={POLICY.terms} />;
    default: return <PolicyPage title="Page" body={[['', 'This page is being written. Check back soon.']]} />;
  }
}

function AboutPage() {
  return (
    <main>
      <section style={{ background: 'var(--forest)', color: 'var(--paper)', paddingBlock: 'clamp(56px, 8vw, 120px)' }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <span className="eyebrow" style={{ color: 'var(--sage)' }}>Our story</span>
          <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 0.98, marginTop: 12 }}>
            From a small yard<br/>in Mannuthy.
          </h1>
          <p style={{ fontSize: '1.15rem', color: 'rgba(255,255,255,0.78)', marginTop: 20, maxWidth: 640 }}>
            Ambady Pebbles Garden began with a simple love of stones — and a belief that the right pebble can transform an ordinary pot, path or corner into something you actually want to look at.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="about-split">
            <div style={{ aspectRatio: '4/5', borderRadius: 20, overflow: 'hidden', background: 'var(--cream)' }}>
              <img src="images/poster-colours.jpeg" alt="Our pebble colours" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div>
              <span className="eyebrow">What we believe</span>
              <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8 }}>Honest stones, fairly priced.</h2>
              <p style={{ color: 'var(--ink-2)', marginTop: 16 }}>
                Every order is cleaned, graded and weighed before it leaves us, then double-bagged and boxed so it arrives intact. What you see in the photo is what lands on your doorstep.
              </p>
              <p style={{ color: 'var(--ink-2)', marginTop: 12 }}>
                From a single bag of coloured pebbles for a houseplant to a truckload for a resort, we treat every order the same — and we're always one WhatsApp away for styling ideas.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="about-stats">
            {[['12+', 'pebble colours'], ['All-India', 'delivery'], ['Bulk', '& retail'], ['Thrissur', 'on-site service']].map(([n, l]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div className="serif" style={{ fontSize: 'clamp(2rem, 4.5vw, 3.4rem)', color: 'var(--forest)', lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: '.8rem', color: 'var(--muted)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '.08em' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
          <span className="eyebrow">Visit us</span>
          <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginBlock: 12 }}>Come say hello.</h2>
          <p style={{ color: 'var(--ink-2)' }}>
            Our store is at Madakkathara, near Vellanikkara in Mannuthy, Thrissur. Drop by to see the full colour range in person.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 24, flexWrap: 'wrap' }}>
            <a className="btn btn--primary" href="#/pages/contact">Get directions</a>
            <a className="btn btn--secondary" href="#/services">Our services</a>
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 880px) { .about-stats { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .about-split { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

function ContactPage() {
  const [done, setDone] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', reason: 'general_enquiry', body: '' });
  const reasonMap = {
    order_issue: 'Order help',
    general_enquiry: 'Product / colour question',
    bulk_quote: 'Bulk & wholesale',
    delivery_issue: 'On-site service',
    other: 'Something else',
  };
  const submit = (e) => {
    e.preventDefault();
    setErr('');
    const category = form.reason === 'other' ? 'general_enquiry' : form.reason;
    const subject = 'Contact: ' + (reasonMap[form.reason] || 'Enquiry');
    const res = window.CustomerForms.openPublicTicket({
      customerName: form.name,
      customerEmail: form.email,
      customerPhone: form.phone,
      category: category,
      subject: subject,
      body: form.body + (form.reason === 'other' ? '\n\n(Reason: something else)' : ''),
    });
    if (!res.ok) {
      setErr(res.message || 'Could not send');
      return;
    }
    setDone(res.ticket);
    HAPStore.notify('Message sent · ticket ' + res.ticket.id);
  };
  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <div className="crumb" style={{ marginBottom: 16 }}><a href="#/">Home</a><span className="sep">/</span><span className="here">Contact</span></div>
      <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1, marginBottom: 12 }}>Get in touch</h1>
      <p style={{ color: 'var(--ink-2)', maxWidth: 560, marginBottom: 40 }}>
        Questions about an order, a colour, or a bulk quote? We answer fastest on WhatsApp — usually within a couple of hours during the day.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 'clamp(24px, 4vw, 56px)' }} className="contact-grid">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <ContactCard i="whatsapp" t="WhatsApp" v="+91 7559 907 176" href="https://wa.me/917559907176" />
          <ContactCard i="phone" t="Call us" v="+91 7559 907 176 · +91 9447 526 862" href="tel:+917559907176" />
          <ContactCard i="mail" t="Email" v="ambadypebblesgarden@gmail.com" href="mailto:ambadypebblesgarden@gmail.com" />
          <ContactCard i="map" t="Store" v="Karikkanthra Building, Madakkathara P.O, Vellanikkara, Mannuthy, Thrissur 680651, Kerala" />
          <div style={{ background: 'var(--cream)', borderRadius: 16, padding: 20 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Opening hours</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: '.9rem' }}>
              <div className="spread"><span>Mon – Sat</span><span>9:00 – 19:00</span></div>
              <div className="spread"><span>Sunday</span><span>10:00 – 17:00</span></div>
            </div>
          </div>
        </div>
        <div>
          {done ? (
            <div style={{ background: 'var(--cream)', borderRadius: 16, padding: 40, textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--success)', color: 'var(--paper)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><Icon name="check" size={24} /></div>
              <h3 className="serif" style={{ fontSize: '1.6rem' }}>Message sent!</h3>
              <p style={{ color: 'var(--muted)', marginTop: 8 }}>Ticket <b>{done.id}</b> is in our Support inbox. We'll get back within one working day.</p>
            </div>
          ) : (
            <form onSubmit={submit}
                  style={{ background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 16, padding: 'clamp(20px, 3vw, 36px)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <h3 className="serif" style={{ fontSize: '1.4rem', gridColumn: 'span 2' }}>Send us a message</h3>
              {err && <div style={{ gridColumn: 'span 2', color: 'var(--terra)', fontSize: '.88rem' }}>{err}</div>}
              <input className="input input--lg" placeholder="Your name" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
              <input className="input input--lg" placeholder="Phone" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
              <input className="input input--lg" type="email" placeholder="Email" required style={{ gridColumn: 'span 2' }} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              <select className="select input--lg" style={{ gridColumn: 'span 2' }} value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}>
                <option value="order_issue">Reason · Order help</option>
                <option value="general_enquiry">Reason · Product / colour question</option>
                <option value="bulk_quote">Reason · Bulk & wholesale</option>
                <option value="delivery_issue">Reason · On-site service</option>
                <option value="other">Reason · Something else</option>
              </select>
              <textarea className="textarea" placeholder="How can we help?" rows="5" required style={{ gridColumn: 'span 2' }} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })}></textarea>
              <button type="submit" className="btn btn--primary btn--lg" style={{ gridColumn: 'span 2' }}>Send message</button>
            </form>
          )}
        </div>
      </div>

      <div style={{ marginTop: 48, borderRadius: 16, overflow: 'hidden', height: 360, background: 'var(--sage-2)', position: 'relative' }}>
        <img src="images/poster-home-decor.jpeg" alt="Ambady Pebbles Garden store" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', left: 24, bottom: 24, background: 'var(--paper)', padding: '16px 20px', borderRadius: 12, boxShadow: 'var(--shadow-2)', maxWidth: 300 }}>
          <div className="serif" style={{ fontSize: '1.1rem' }}>Ambady Pebbles Garden</div>
          <div style={{ fontSize: '.82rem', color: 'var(--muted)', marginTop: 4 }}>Madakkathara P.O, Vellanikkara, Mannuthy, Thrissur 680651, Kerala</div>
          <a href="https://maps.google.com/?q=Madakkathara+Vellanikkara+Thrissur" target="_blank" rel="noreferrer" className="btn btn--secondary btn--sm" style={{ marginTop: 10 }}>Open in Maps <Icon name="arrow-up-right" size={12} /></a>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

function ContactCard({ i, t, v, href }) {
  const inner = (
    <div style={{ display: 'flex', gap: 14, alignItems: 'center', background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
      <div style={{ width: 44, height: 44, borderRadius: 999, background: 'var(--cream)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)', flexShrink: 0 }}>
        <Icon name={i} size={20} />
      </div>
      <div>
        <div className="eyebrow">{t}</div>
        <div style={{ fontSize: '.95rem', marginTop: 2 }}>{v}</div>
      </div>
    </div>
  );
  return href ? <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noreferrer">{inner}</a> : inner;
}

function TeamPage() {
  const team = [
    { name: 'Founder', role: 'Owner & Buyer', bio: 'Sources every batch of stone and keeps the colour range fresh.' },
    { name: 'Store Team', role: 'Sales & Styling', bio: 'Helps you match pebbles to your pots and plants in-store.' },
    { name: 'Packing Team', role: 'Despatch', bio: 'Weighs, double-bags and boxes every order before it ships.' },
    { name: 'Field Team', role: 'On-site Service', bio: 'Lays pathways and styles gardens around Thrissur.' },
    { name: 'Logistics', role: 'Bulk & Freight', bio: 'Coordinates truckload supply across India.' },
    { name: 'Support', role: 'Customer Care', bio: 'The voice on the WhatsApp helpline.' }
  ];
  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <div className="crumb" style={{ marginBottom: 16 }}><a href="#/">Home</a><span className="sep">/</span><span className="here">Our team</span></div>
      <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1, marginBottom: 12 }}>The people behind the pebbles</h1>
      <p style={{ color: 'var(--ink-2)', maxWidth: 540, marginBottom: 40 }}>A small, hands-on team in Mannuthy, Thrissur.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="team-grid">
        {team.map((m, i) => (
          <div key={m.name}>
            <div style={{ aspectRatio: '1', borderRadius: 16, overflow: 'hidden', background: 'var(--cream)', marginBottom: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={['user','spark','package','map','truck','phone'][i]} size={48} style={{ color: 'var(--moss)' }} />
            </div>
            <h3 className="serif" style={{ fontSize: '1.3rem' }}>{m.name}</h3>
            <div className="eyebrow" style={{ marginTop: 4 }}>{m.role}</div>
            <p style={{ color: 'var(--muted)', fontSize: '.88rem', marginTop: 8 }}>{m.bio}</p>
          </div>
        ))}
      </div>
      <style>{`@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 520px) { .team-grid { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

function ClientsPage() {
  const clients = ['Resorts in Munnar', 'Villas in Thrissur', 'Kochi apartments', 'Temple landscaping', 'Nursery partners', 'Cafe & restaurant decor', 'Builder projects', 'Event stylists', 'Interior designers', 'Hotel lobbies', 'School gardens', 'Office terraces'];
  const testimonials = [
    { author: 'Meera Krishnan', place: 'Thrissur villa', body: 'They laid a leaf-stone path across our lawn and filled the gaps with white pebbles. Two years on it still looks brand new.' },
    { author: 'Anand Varma', place: 'Kochi apartment', body: 'Ordered coloured pebbles for all my indoor pots. Arrived clean, glossy and exactly as pictured. Now a repeat customer.' },
    { author: 'Facilities, Munnar resort', place: 'Bulk supply', body: 'We buy pebbles by the truckload for our landscaping. Consistent grading, fair pricing and reliable delivery every time.' }
  ];
  return (
    <main>
      <section className="container" style={{ paddingBlock: 48 }}>
        <div className="crumb" style={{ marginBottom: 16 }}><a href="#/">Home</a><span className="sep">/</span><span className="here">Clients</span></div>
        <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1, marginBottom: 12 }}>Projects we've supplied</h1>
        <p style={{ color: 'var(--ink-2)', maxWidth: 560, marginBottom: 40 }}>From resort landscapes to family gardens, here's a sense of where our stones end up.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 14, marginBottom: 56 }}>
          {clients.map(c => (
            <div key={c} style={{ background: 'var(--cream)', padding: 28, borderRadius: 12, textAlign: 'center', fontFamily: 'var(--serif)', fontSize: '1.1rem', color: 'var(--ink-2)' }}>{c}</div>
          ))}
        </div>
      </section>
      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <span className="eyebrow">In their words</span>
          <h2 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 8, marginBottom: 32 }}>What customers say.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="testi-grid">
            {testimonials.map(t => (
              <figure key={t.author} style={{ background: 'var(--paper)', borderRadius: 16, padding: 28, margin: 0 }}>
                <div style={{ color: 'var(--gold)', display: 'flex', gap: 2, marginBottom: 12 }}>
                  {[1,2,3,4,5].map(i => <Icon key={i} name="star" size={16} />)}
                </div>
                <blockquote style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: '1.15rem', lineHeight: 1.4, color: 'var(--ink)' }}>"{t.body}"</blockquote>
                <figcaption style={{ marginTop: 16, fontSize: '.85rem' }}>
                  <span style={{ fontWeight: 600 }}>{t.author}</span>
                  <span style={{ color: 'var(--muted)' }}> · {t.place}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 880px) { .testi-grid { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

function PolicyPage({ title, body }) {
  return (
    <main className="container" style={{ paddingBlock: 48, maxWidth: 820 }}>
      <div className="crumb" style={{ marginBottom: 16 }}><a href="#/">Home</a><span className="sep">/</span><span className="here">{title}</span></div>
      <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1, marginBottom: 8 }}>{title}</h1>
      <p style={{ color: 'var(--muted)', marginBottom: 40 }}>Last updated 30 May 2026</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {body.map(([h, p], i) => (
          <section key={i}>
            {h && <h2 className="serif" style={{ fontSize: '1.5rem', marginBottom: 10 }}>{h}</h2>}
            <p style={{ color: 'var(--ink-2)', lineHeight: 1.7 }}>{p}</p>
          </section>
        ))}
      </div>
      <div style={{ marginTop: 48, padding: 24, background: 'var(--cream)', borderRadius: 16 }}>
        <p style={{ color: 'var(--ink-2)' }}>Questions about this policy? <a href="#/pages/contact" style={{ color: 'var(--forest)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Get in touch</a> — we're happy to help.</p>
      </div>
    </main>
  );
}

const POLICY = {
  shipping: [
    ['Where we ship', 'We deliver across India. Most pincodes are serviceable by courier; bulk and truckload orders are shipped by freight, quoted separately.'],
    ['Charges & timelines', 'Shipping is free on orders above ₹999. Below that, a flat ₹79 applies. Standard delivery takes 3–7 business days; express tracked is 2–4 days for ₹149. Around Thrissur, same/next-day local delivery is available.'],
    ['Packing', 'Pebbles and stones are weighed, double-bagged and boxed to arrive intact. Statues and pots are wrapped with extra cushioning.'],
    ['Tracking', 'You\'ll receive a tracking link by SMS and email once your order is handed to the courier.']
  ],
  refunds: [
    ['Damaged in transit', 'If an item arrives broken or damaged, send us a photo within 48 hours of delivery and we\'ll replace it or refund you.'],
    ['Returns', 'Unopened products can be returned within 7 days of delivery in their original packaging. Return shipping is free for our error; otherwise borne by the customer.'],
    ['Cancellations', 'Orders can be cancelled free of charge any time before despatch. Once handed to the courier, an order can no longer be cancelled.'],
    ['Bulk & custom orders', 'Bulk, truckload and custom-mixed orders are final and non-returnable except for transit damage.'],
    ['Refund timeline', 'Approved refunds are processed to the original payment method within 5–7 business days.']
  ],
  privacy: [
    ['What we collect', 'We collect the information you give us at checkout and sign-up — name, contact details, delivery address — and basic usage data to improve the store. We do not sell your data.'],
    ['How we use it', 'To fulfil orders, provide support, and (only with your consent) send occasional offers. You can unsubscribe at any time.'],
    ['Payment data', 'Card payments are processed by our PCI-compliant payment partner. We never store full card numbers on our own servers.'],
    ['Your rights', 'You can request a copy of your data, or ask us to delete your account, by emailing ambadypebblesgarden@gmail.com.']
  ],
  terms: [
    ['Agreement', 'By using this website and placing an order, you agree to these terms. They\'re written in plain language on purpose.'],
    ['Products', 'Pebbles and stones are natural materials — colour, size and shape vary between batches, and photos are representative rather than exact. We describe sizes honestly and will tell you if a substitution is needed.'],
    ['Pricing', 'Prices are in Indian Rupees and inclusive of applicable taxes unless stated. We reserve the right to correct pricing errors before despatch.'],
    ['Liability', 'Our liability for any order is limited to the value of that order.']
  ]
};

window.StaticPage = StaticPage;