// Karavi Studio · Contact & FAQ page (motion-refreshed)
const Contact = () => {
  const { useState } = React;
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });
  const [sent, setSent] = useState(false);
  const [openFaq, setOpenFaq] = useState(null);

  const handleSubmit = (e) => { e.preventDefault(); setSent(true); };

  const faqs = [
    { q: "How long does shipping take?",       a: "Most pieces ship within 5–7 working days from our Jaipur studio. Hand-knotted rugs and made-to-order items may take 10–14 days. We will always write to you with a dispatch date before shipping." },
    { q: "Do you ship internationally?",       a: "Yes. We ship to most countries via FedEx International Priority. Shipping is calculated at checkout. International orders may be subject to customs duties, which are the buyer's responsibility." },
    { q: "What is your return policy?",        a: "We accept returns within 21 days of delivery, provided the piece is in its original condition. Rugs, lighting, and personalised items are non-returnable. Please write to us before returning anything." },
    { q: "Can I visit the studio?",            a: "We welcome studio visits in Jaipur on Tuesday mornings when the dye yard is running. Please write to us at least a week in advance. We cannot guarantee visits during our peak production months of October and February." },
    { q: "Are your dyes natural?",             a: "For the most part, yes. Our cotton and wool pieces are dyed with natural plant and mineral dyes in our own dye yard. Some structural colours (very bright or very dark) use low-impact synthetic dyes, which we declare on the product page." },
    { q: "How do I care for a tufted rug?",    a: "Vacuum gently with the brush off. Rotate every six months for even wear. Spot-clean with cool water and mild soap. We recommend professional cleaning every 12–18 months. Avoid direct sunlight and always use a pad underneath." },
    { q: "Do you have a trade programme?",     a: "Yes. We work with interior designers and architects on a project-by-project basis. Write to us with your project brief and we will arrange a studio call." },
    { q: "What sizes do your rugs come in?",   a: "Rugs are available in standard sizes as listed on each product page. We also accept custom sizes for orders of 3 or more. Custom sizes carry a 15% premium and a lead time of 6–8 weeks." },
  ];

  return (
    <main>
      {/* ── HEADER ──────────────────────────── */}
      <Section style={{ paddingTop: 72, paddingBottom: 48, borderBottom: "1px solid var(--line-soft)" }}>
        <Reveal>
          <Eyebrow>Get in touch</Eyebrow>
        </Reveal>
        <Reveal delay={0.1}>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1,
            letterSpacing: "-0.015em", marginTop: 10,
          }}>Contact &amp; FAQ</h1>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{ maxWidth: 500, marginTop: 16, fontSize: 16, lineHeight: 1.65, color: "var(--fg-2)" }}>
            We read every message. If it's urgent, mark it as such — otherwise expect a reply within two working days from Jaipur.
          </p>
        </Reveal>
      </Section>

      {/* ── TWO COLUMNS ──────────────────── */}
      <Section className="k-2col-layout" style={{ marginTop: 72, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>

        {/* Contact form */}
        <div>
          <Reveal>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(26px, 2.8vw, 36px)", marginTop: 0, marginBottom: 32,
            }}>Write to us</h2>
          </Reveal>

          <AnimatePresence mode="wait">
            {sent ? (
              <motion.div
                key="sent"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0 }}
                transition={springs.gentle}
                style={{ padding: "48px 0" }}
              >
                <Eyebrow>Message received</Eyebrow>
                <div style={{
                  fontFamily: "var(--font-display)", fontStyle: "italic",
                  fontSize: 28, marginTop: 14, lineHeight: 1.3, color: "var(--fg-display)",
                }}>
                  We'll be in touch<br/>within two days.
                </div>
                <motion.button
                  onClick={() => setSent(false)}
                  whileHover={{ x: 2 }}
                  style={{
                    marginTop: 28, background: "none", border: 0, cursor: "pointer",
                    fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase",
                    color: "var(--fg-2)", borderBottom: "1px solid var(--fg-2)", padding: "2px 0",
                  }}
                >Send another message</motion.button>
              </motion.div>
            ) : (
              <motion.form
                key="form"
                initial="hidden"
                animate="show"
                exit={{ opacity: 0 }}
                variants={{
                  hidden: { opacity: 1 },
                  show: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
                }}
                onSubmit={handleSubmit}
                style={{ display: "flex", flexDirection: "column", gap: 24 }}
              >
                <motion.div
                  variants={variants.staggerChild}
                  style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}
                >
                  <Field label="Name" type="text" required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="Your name"/>
                  <Field label="Email" type="email" required value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} placeholder="your@email.com"/>
                </motion.div>
                <motion.div variants={variants.staggerChild}>
                  <Field label="Subject" type="text" value={form.subject} onChange={e => setForm(f => ({ ...f, subject: e.target.value }))} placeholder="Order inquiry, sizing, trade..."/>
                </motion.div>
                <motion.div variants={variants.staggerChild}>
                  <Field label="Message" textarea required value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} placeholder="Tell us about your inquiry..."/>
                </motion.div>
                <motion.div variants={variants.staggerChild} style={{ marginTop: 8 }}>
                  <Button type="submit" magnetic style={{ width: "auto" }}>Send message →</Button>
                </motion.div>
              </motion.form>
            )}
          </AnimatePresence>

          {/* Studio address */}
          <Reveal delay={0.2}>
            <div style={{ marginTop: 56, paddingTop: 36, borderTop: "1px solid var(--line-soft)" }}>
              <Eyebrow>The studio</Eyebrow>
              <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--fg-display)" }}>Karavi Studio</div>
                <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--fg-2)" }}>
                  12, Old Merchant's Lane<br/>
                  Johri Bazaar, Jaipur 302003<br/>
                  Rajasthan, India
                </div>
                <div style={{ marginTop: 10, fontSize: 14, color: "var(--fg-2)" }}>
                  <a href="mailto:studio@karavi.in" style={{ border: 0, color: "inherit", borderBottom: "1px solid var(--line-medium)" }}>
                    studio@karavi.in
                  </a>
                </div>
                <div style={{ marginTop: 4, fontSize: 13, color: "var(--fg-3)" }}>
                  Studio visits: Tuesday mornings, by appointment
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* FAQ accordion */}
        <div>
          <Reveal>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(26px, 2.8vw, 36px)", marginTop: 0, marginBottom: 32,
            }}>Frequently asked</h2>
          </Reveal>

          <Stagger style={{ display: "flex", flexDirection: "column" }} staggerChildren={0.05}>
            {faqs.map((faq, i) => (
              <StaggerItem key={i} style={{ borderBottom: "1px solid var(--line-soft)" }}>
                <motion.button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  aria-expanded={openFaq === i}
                  whileHover={{ x: 2 }}
                  transition={{ duration: 0.15 }}
                  style={{
                    width: "100%", background: "none", border: 0, cursor: "pointer",
                    textAlign: "left", padding: "20px 0",
                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                    fontSize: 15, fontWeight: 500, color: "var(--fg-display)", lineHeight: 1.4,
                    minHeight: 64,
                  }}
                >
                  {faq.q}
                  <motion.div
                    animate={{ rotate: openFaq === i ? 180 : 0 }}
                    transition={{ duration: 0.25, ease: [0.22, 0.61, 0.36, 1] }}
                    style={{ flexShrink: 0, color: "var(--fg-3)" }}
                  >
                    <Icon name="chevron" size={16}/>
                  </motion.div>
                </motion.button>
                <AnimatePresence initial={false}>
                  {openFaq === i && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.32, ease: [0.22, 0.61, 0.36, 1] }}
                      style={{ overflow: "hidden" }}
                    >
                      <p style={{ margin: "0 0 18px 0", fontSize: 14, lineHeight: 1.75, color: "var(--fg-2)" }}>
                        {faq.a}
                      </p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </StaggerItem>
            ))}
          </Stagger>

          <Reveal delay={0.2}>
            <div style={{
              marginTop: 40, padding: "28px 32px",
              background: "var(--karavi-bone)", borderRadius: 14,
            }}>
              <Eyebrow>Care guides</Eyebrow>
              <p style={{ margin: "12px 0 0", fontSize: 14, lineHeight: 1.65, color: "var(--fg-1)" }}>
                Full care instructions are included with every piece and printed on a cotton card. Digital versions are on each product page under the Care tab.
              </p>
            </div>
          </Reveal>
        </div>
      </Section>
    </main>
  );
};
window.Contact = Contact;