/* global React */
const { useState: useState2, useRef: useRef2, useEffect: useEffect2 } = React;

/* ---------- TEAM ---------- */
function Team() {
  const team = [
    { name: "Aakash R.",   role: "Creative Director", quote: "Argues with pixels.",       emoji: "🦁", bg: "var(--pink)",  sticker: "BOSS",      rot: "-3deg" },
    { name: "Pooja S.",    role: "Design Lead",       quote: "Translator of vibes.",       emoji: "🦊", bg: "var(--acid)",  sticker: "★ ★ ★",     rot: "2deg" },
    { name: "Rishab M.",   role: "Engineering",       quote: "Makes the impossible loadable.", emoji: "🦝", bg: "var(--blue)",  sticker: "DEV",       rot: "-2deg" },
    { name: "Tanvi K.",    role: "Strategy",          quote: "Asks why until it hurts.",   emoji: "🐯", bg: "var(--mint)",  sticker: "STRATEGY",  rot: "3deg" },
  ];
  return (
    <section className="team noise rules" id="team">
      <window.Furniture num="06" label="THE TEAM" ghost="humans." position="left" />
      <div className="wrap">
        <div className="team__head" style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20 }}>
          <div>
            <span className="eyebrow">The team · 04 humans</span>
            <h2 className="mega" style={{ marginTop: 16 }}>Small studio,<br /><span className="t-serif">huge mouth.</span></h2>
          </div>
          <p style={{ maxWidth: 360 }}>Four of us. No interns doing your strategy deck at 2am. The people you meet are the people who do the work.</p>
        </div>

        <div className="team-grid">
          {team.map((p, i) => (
            <div key={i} className="polaroid" style={{ "--rot": p.rot }}>
              <span className="polaroid__sticker">{p.sticker}</span>
              <div className="polaroid__photo" style={{ background: p.bg }}>
                <span>{p.emoji}</span>
              </div>
              <div className="polaroid__name">{p.name}</div>
              <div className="polaroid__role">{p.role}</div>
              <div className="polaroid__quote">"{p.quote}"</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  return (
    <section className="testimonials noise">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20 }}>
          <div>
            <span className="eyebrow">Receipts · 50+ shipped</span>
            <h2 className="mega" style={{ marginTop: 16 }}>People <span className="t-serif">say</span> things.</h2>
          </div>
          <div className="t-mono" style={{ fontSize: 13, opacity: 0.7 }}>↓ scroll for more</div>
        </div>

        <div className="testi-grid">
          <div className="testi testi--big">
            <div className="testi__stars">★ ★ ★ ★ ★</div>
            <p className="testi__quote">"Briefing them felt like therapy. The output felt like a heist."</p>
            <div className="testi__author">— Mira D., Brand Lead at Mango Mango</div>
          </div>

          <div className="testi testi--acid">
            <div className="testi__stars">★ ★ ★ ★ ★</div>
            <p className="testi__quote">"They redesigned us in 6 weeks and tripled our conversion."</p>
            <div className="testi__author">— Aanya R., CEO of Fold</div>
          </div>

          <div className="testi">
            <div className="testi__stars">★ ★ ★ ★ ★</div>
            <p className="testi__quote">"We came in with a logo. We left with a religion."</p>
            <div className="testi__author">— Karthik V., Founder, Halo</div>
          </div>

          <div className="testi testi--pink">
            <div className="testi__stars">★ ★ ★ ★ ★</div>
            <p className="testi__quote">"I have never been roasted so kindly about my old website."</p>
            <div className="testi__author">— Devansh P., COO, Bolt Coffee</div>
          </div>

          <div className="testi">
            <div className="testi__stars">★ ★ ★ ★ ★</div>
            <p className="testi__quote">"Half the cost of a London studio. Twice the spine."</p>
            <div className="testi__author">— Lena O., Founder, Pilot Studios</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- LOGO MARQUEE ---------- */
function Logos() {
  const logos = [
    <span><em>Mango</em> Mango</span>,
    "FOLD",
    <span>halo<em>.</em></span>,
    "BOLT⚡",
    "PILOT",
    <span>noon<em>/</em></span>,
    "NORTHSTAR",
    <span><em>Lumen</em></span>,
    "PARALLEL",
    "ATLAS·CO",
    <span>orbit<em>×</em></span>,
    "MARGIN",
  ];
  const content = [...logos, ...logos];
  return (
    <section className="logos">
      <div className="logos__track">
        {content.map((l, i) => <span key={i} className="logos__item">{l} <span style={{ opacity: 0.3 }}>✦</span></span>)}
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    { q: <>How <em>long</em> does a project take?</>, a: "Brand: 4–6 weeks. Website: 6–10 weeks. Product UX engagements run 8–16 weeks depending on scope. We give you a calendar with dated milestones before you sign anything." },
    { q: <>Do you do <em>development</em> too?</>, a: "Yes — Framer, Webflow, Next.js, and Shopify. We can hand off to your team or ship the build ourselves. For complex products, we partner with our in-house engineers." },
    { q: <>We're <em>early-stage</em>. Too small?</>, a: "Nope. We work with pre-seed founders all the way to Series C. We have a stripped-down 3-week 'starter brand' engagement specifically for founders going from zero to one." },
    { q: <>Will you sign an <em>NDA?</em></>, a: "Always. We can also set up private project rooms in Notion / Slack and use named-user access for figma files." },
    { q: <>Where are you <em>based</em>?</>, a: "Studio in Koramangala, Bengaluru. We work with clients across India, the US, the UK, and Singapore. Mostly remote, occasionally on-site." },
  ];
  const [open, setOpen] = useState2(0);
  return (
    <section className="faq noise grid-paper" id="faq">
      <window.Furniture num="08" label="FAQ" ghost="questions." position="right" />
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 20, alignItems: "end" }}>
          <div>
            <span className="eyebrow">FAQ · the awkward ones</span>
            <h2 className="mega" style={{ marginTop: 16 }}>The <span className="t-serif">questions</span> you actually have.</h2>
          </div>
          <p style={{ maxWidth: 320 }}>If yours isn't here, mail us at <a href="mailto:hello@viralinbound.in" className="uline" data-cursor="hot" data-label="MAIL">hello@viralinbound.in</a> and we'll answer fast.</p>
        </div>
        <div className="faq__list">
          {items.map((it, i) => (
            <div key={i} className={`faq__item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)} data-cursor="hot" data-label={open === i ? "CLOSE" : "OPEN"}>
              <div className="faq__q">
                <span>{it.q}</span>
                <span className="faq__toggle">+</span>
              </div>
              <div className="faq__a"><div><p style={{ paddingTop: 10 }}>{it.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CONTACT ---------- */
function Contact() {
  const [formData, setFormData] = useState2({
    name: "",
    email: "",
    phone: "",
    service: "Branding",
    budget: "$5k - $15k",
    message: ""
  });
  const [status, setStatus] = useState2("idle"); // idle, sending, success, error

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSelectService = (service) => {
    setFormData((prev) => ({ ...prev, service }));
  };

  const handleSelectBudget = (budget) => {
    setFormData((prev) => ({ ...prev, budget }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setStatus("sending");
    fetch("submit-lead.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(formData)
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.status === "success") {
          setStatus("success");
          setFormData({
            name: "",
            email: "",
            phone: "",
            service: "Branding",
            budget: "$5k - $15k",
            message: ""
          });
        } else {
          setStatus("error");
        }
      })
      .catch((err) => {
        console.error(err);
        setStatus("error");
      });
  };

  return (
    <section className="contact noise" id="contact">
      <div className="wrap">
        <span className="eyebrow" style={{ color: "var(--paper)" }}>Step one · say hi</span>
        <h2 className="mega" style={{ marginTop: 16 }}>
          You bring <span className="t-serif" style={{ color: "var(--pink)" }}>the ambition.</span><br />
          We bring <span className="t-serif" style={{ color: "var(--acid)" }}>the noise.</span>
        </h2>

        <div className="email-mega-wrap" style={{ position: "relative", display: "inline-block" }}>
          {/* Eye-catching floating, rotating badge */}
          <span className="form-sticker floaty">
            ✦ SECURE BRIEF BUILDER ⚡
          </span>

          <a 
            href="mailto:hello@viralinbound.in" 
            className="email-mega uline" 
            data-cursor="hot" 
            data-label="EMAIL US"
          >
            hello@viralinbound.in
          </a>
        </div>

        {/* Expanding Neobrutalist Form Section - Permanently Visible */}
        <div className="contact__form-panel is-open" id="brief-form">
          <div className="contact__form-inner">
            {status === "success" ? (
              <div className="form-success-message">
                <span style={{ fontSize: "56px" }}>⚡🚀⚡</span>
                <h3>BRIEF RECEIVED!</h3>
                <p>We've captured your details in our secure vault. Your phone will probably buzz in a few minutes, because we're loud like that.</p>
                <button className="cta cta--acid" onClick={() => setStatus("idle")}>SEND ANOTHER BRIEF</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="brief-form">
                <div className="form-grid">
                  <div className="form-group">
                    <label className="form-label">YOUR NAME *</label>
                    <input 
                      type="text" 
                      name="name" 
                      value={formData.name} 
                      onChange={handleInputChange} 
                      placeholder="WHO ARE YOU?" 
                      className="form-input" 
                      required 
                    />
                  </div>

                  <div className="form-group">
                    <label className="form-label">EMAIL ADDRESS *</label>
                    <input 
                      type="email" 
                      name="email" 
                      value={formData.email} 
                      onChange={handleInputChange} 
                      placeholder="WHERE DO WE REPLY?" 
                      className="form-input" 
                      required 
                    />
                  </div>

                  <div className="form-group">
                    <label className="form-label">PHONE NUMBER</label>
                    <input 
                      type="tel" 
                      name="phone" 
                      value={formData.phone} 
                      onChange={handleInputChange} 
                      placeholder="FOR INSTANT WHATSAPP CHAT" 
                      className="form-input" 
                    />
                  </div>
                </div>

                <div className="form-group" style={{ marginTop: "24px" }}>
                  <label className="form-label">WHAT SERVICE DO YOU NEED?</label>
                  <div className="pill-group">
                    {["Branding", "UI / UX", "Website", "Full Stack"].map((svc) => (
                      <button 
                        key={svc} 
                        type="button" 
                        className={`pill-btn ${formData.service === svc ? "active" : ""}`}
                        onClick={() => handleSelectService(svc)}
                      >
                        {svc.toUpperCase()}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-group" style={{ marginTop: "24px" }}>
                  <label className="form-label">ESTIMATED BUDGET RANGE</label>
                  <div className="pill-group">
                    {["< $5k", "$5k - $15k", "$15k - $30k", "$30k+"].map((bud) => (
                      <button 
                        key={bud} 
                        type="button" 
                        className={`pill-btn ${formData.budget === bud ? "active" : ""}`}
                        onClick={() => handleSelectBudget(bud)}
                      >
                        {bud}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-group" style={{ marginTop: "24px" }}>
                  <label className="form-label">ABOUT THE MISSION</label>
                  <textarea 
                    name="message" 
                    value={formData.message} 
                    onChange={handleInputChange} 
                    placeholder="TELL US ABOUT YOUR PROJECT, INTENTIONS, OR JUST A WILD IDEA..." 
                    className="form-textarea" 
                    rows="4"
                  />
                </div>

                {status === "error" && (
                  <p className="form-error-text">❌ SOMETHING WENT WRONG. PLEASE RE-CHECK DETAILS AND RETRY.</p>
                )}

                <button 
                  type="submit" 
                  className="cta cta--acid submit-btn" 
                  disabled={status === "sending"}
                  style={{ marginTop: "32px", width: "100%", textAlign: "center", justifyContent: "center" }}
                >
                  {status === "sending" ? "TRANSMITTING BRIEF..." : "LAUNCH BRIEF 🚀"}
                </button>
              </form>
            )}
          </div>
        </div>

        <div className="contact__grid" style={{ marginTop: "40px" }}>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a 
              href="#brief-form" 
              className="cta cta--acid" 
              data-cursor="hot" 
              data-label="BOOK"
            >
              Book a 30-min intro call <span className="cta__arrow">↗</span>
            </a>
            <a href="tel:+918968430834" className="cta cta--pink" data-cursor="hot" data-label="CALL">
              Or call us <span className="cta__arrow">↗</span>
            </a>
          </div>

          <div className="contact__info">
            <div>
              <div className="label">Phone</div>
              <a href="tel:+918968430834" className="uline" data-cursor="hot" data-label="CALL">+91 89684 30834</a>
            </div>
            <div>
              <div className="label">Studio</div>
              <p>Indiranagar, Bengaluru</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="foot">
      <div className="wrap foot__inner">
        <span>
          <span style={{ fontFamily: "var(--f-display)", fontWeight: 900, letterSpacing: "-0.02em" }}>VIRAL</span>
          <span style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--acid)", textTransform: "lowercase", marginLeft: 2 }}>inbound.</span>
          {" "}© {year}
        </span>
        <span>Made in BLR · with too much coffee</span>
        <span>
          <a href="#top" className="uline" data-cursor="hot" data-label="UP">back to top ↑</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Team, Testimonials, Logos, FAQ, Contact, Footer });