// sections-bottom.jsx — Pricing, Testimonials, FAQ, FinalCTA, Footer

/* ── Pricing ─────────────────────────────────────────────────── */
function PricingSection() {
  const plans = [
    {
      name: "Launch",
      price: "$499",
      unit: "one-time",
      desc: "A complete, sales-focused website to start generating leads.",
      features: [
        "Up to 5 pages",
        "Sales-focused copy & messaging",
        "Mobile-responsive design",
        "Contact forms & CTAs",
        "Google Analytics setup",
        "1 round of revisions",
        "Launched in 1–2 weeks",
      ],
      accent: false,
    },
    {
      name: "Growth",
      price: "$999",
      unit: "/month",
      desc: "Ongoing marketing, optimization, and lead generation support.",
      badge: "Most popular",
      features: [
        "Everything in Launch",
        "Monthly performance reports",
        "Ongoing SEO optimization",
        "Content & copy updates",
        "Conversion rate optimization",
        "Priority support",
        "Dedicated account manager",
      ],
      accent: true,
    },
  ];
  return (
    <section id="pricing" className="section">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <Reveal>
            <Eyebrow>Pricing</Eyebrow>
            <h2 className="display h2" style={{ marginTop: 20, maxWidth: "14ch" }}>
              Simple pricing. <span className="serif-it">Real</span> results.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lead" style={{ maxWidth: "32ch" }}>
              No hidden fees. No long-term contracts. Pricing that matches your needs.
            </p>
          </Reveal>
        </div>

        <div className="price-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 16,
        }}>
          {plans.map((p, i) => (
            <Reveal key={i} delay={i * 100}>
              <article style={{
                padding: 36,
                borderRadius: "var(--r-lg)",
                border: p.accent ? "1px solid var(--accent)" : "1px solid var(--border)",
                background: p.accent ? "linear-gradient(180deg, rgba(43,163,232,0.10), rgba(43,163,232,0.02))" : "var(--bg-2)",
                position: "relative",
                height: "100%",
                display: "flex", flexDirection: "column",
                overflow: "hidden",
              }}>
                {p.accent && (
                  <div aria-hidden style={{
                    position: "absolute", top: -100, right: -100,
                    width: 280, height: 280,
                    borderRadius: "50%",
                    background: "radial-gradient(circle, rgba(43,163,232,0.22), transparent 70%)",
                    pointerEvents: "none",
                  }} />
                )}

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, position: "relative" }}>
                  <h3 className="display" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{p.name}</h3>
                  {p.badge && <Pill accent>{p.badge}</Pill>}
                </div>

                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 16, position: "relative" }}>
                  <span className="display" style={{ fontSize: 64, fontWeight: 500, letterSpacing: "-0.04em", color: p.accent ? "var(--accent)" : "var(--fg)" }}>{p.price}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{p.unit}</span>
                </div>

                <p className="mute" style={{ fontSize: 14.5, lineHeight: 1.55, marginBottom: 28, maxWidth: "44ch" }}>{p.desc}</p>

                <ul style={{ listStyle: "none", padding: 0, margin: "0 0 32px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  {p.features.map((f) => (
                    <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 12, fontSize: 14.5 }}>
                      <span style={{
                        width: 18, height: 18,
                        borderRadius: "50%",
                        background: p.accent ? "var(--accent)" : "var(--bg-3)",
                        color: p.accent ? "var(--accent-ink)" : "var(--accent)",
                        display: "grid", placeItems: "center",
                        flexShrink: 0,
                        marginTop: 2,
                      }}><Icon.check /></span>
                      <span style={{ color: "var(--fg)", lineHeight: 1.5 }}>{f}</span>
                    </li>
                  ))}
                </ul>

                <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer"
                  className={`btn ${p.accent ? "btn--primary" : "btn--ghost"}`}
                  style={{ justifyContent: "center", padding: "16px 22px" }}>
                  Get started <span className="arr"><Icon.arrUR /></span>
                </a>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300}>
          <div style={{ marginTop: 32, display: "flex", justifyContent: "center" }}>
            <Pill>
              <span className="blink" style={{ color: "var(--amber)" }}>●</span>
              Only 3 spots available this month
            </Pill>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .price-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ── Testimonials ────────────────────────────────────────────── */
function TestimonialsSection() {
  const items = [
    {
      name: "Tony Rader",
      title: "Gold Standard Mortgage",
      photo: "assets/clients/tony-rader.jpeg",
      q: "This system is amazing! I've been a mortgage broker for 8 years and have tried a lot of different lead generators but nothing ever really produced leads. From the word go, they were generating leads, and sometimes it's hard to keep up with them. If you're looking for a lead generating platform, don't look any further.",
    },
    {
      name: "David Scholar",
      title: "CEO, Build Effective",
      photo: "assets/clients/david-scholar.jpeg",
      q: "Working with Yuvraj and his team transformed our marketing approach. Their creativity and deep understanding of the construction industry helped us attract qualified leads and increase visibility significantly. Highly recommended for results-driven marketing.",
    },
    {
      name: "Ed Personius",
      title: "Business Owner",
      photo: "assets/clients/ed-personius.jpg",
      q: "Yukaa Media has been a very good digital marketing partner. They keep their word, and have provided proven results from the beginning. Their initiative and responsiveness have proven critical to the success of my campaign. I recommend them.",
    },
    {
      name: "Steve Solanki",
      title: "CEO, Intuition Softech",
      photo: "assets/clients/steve-solanki.jpeg",
      q: "We were looking for a reliable system to bring in high-quality leads and book appointments effortlessly. This was exactly what we needed. The process is seamless, and the results have been outstanding.",
    },
  ];
  return (
    <section className="section section--alt">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <Reveal><Eyebrow>What clients say</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="display h2" style={{ marginTop: 20, maxWidth: "20ch" }}>
              Real words from real clients. <span className="serif-it">No scripts.</span>
            </h2>
          </Reveal>
        </div>

        <div className="testi-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 16,
        }}>
          {items.map((t, i) => (
            <Reveal key={i} delay={i * 80}>
              <article className="card" style={{
                padding: 32,
                height: "100%",
                display: "flex", flexDirection: "column",
                background: "var(--bg)",
              }}>
                <div style={{ marginBottom: 20, color: "var(--accent)", opacity: 0.55 }}>
                  <Icon.quote />
                </div>
                <p className="display" style={{
                  fontSize: 18,
                  fontWeight: 400,
                  letterSpacing: "-0.01em",
                  lineHeight: 1.5,
                  color: "var(--fg)",
                  marginBottom: 28,
                  flex: 1,
                  textWrap: "pretty",
                }}>
                  "{t.q}"
                </p>
                <div style={{
                  display: "flex", alignItems: "center", gap: 14,
                  paddingTop: 20,
                  borderTop: "1px solid var(--border)",
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: "50%",
                    background: "linear-gradient(135deg, var(--accent-2), var(--accent-deep))",
                    display: "grid", placeItems: "center",
                    color: "#fff",
                    fontFamily: "var(--font-display)",
                    fontWeight: 600,
                    fontSize: 16,
                    boxShadow: "0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(43,163,232,0.25)",
                    overflow: "hidden",
                    flexShrink: 0,
                  }}>
                    {t.photo
                      ? <img src={t.photo} alt={t.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                      : t.name.charAt(0)}
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 15, fontWeight: 500 }}>{t.name}</div>
                    <div className="mono" style={{ fontSize: 11.5, color: "var(--fg-mute)", letterSpacing: "0.04em", marginTop: 2 }}>{t.title}</div>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .testi-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ── FAQ ─────────────────────────────────────────────────────── */
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{
      borderBottom: "1px solid var(--border)",
    }}>
      <button onClick={onToggle} style={{
        width: "100%",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24,
        padding: "26px 0",
        textAlign: "left",
        color: "var(--fg)",
      }}>
        <span className="display" style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.015em" }}>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: "50%",
          border: "1px solid var(--border-2)",
          display: "grid", placeItems: "center",
          color: "var(--fg)",
          transition: "background 200ms, color 200ms",
          background: open ? "var(--accent)" : "transparent",
          color: open ? "var(--accent-ink)" : "var(--fg)",
          flexShrink: 0,
        }}>{open ? <Icon.minus /> : <Icon.plus />}</span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0,
        opacity: open ? 1 : 0,
        overflow: "hidden",
        transition: "max-height 400ms ease, opacity 300ms ease, padding 300ms ease",
        paddingBottom: open ? 28 : 0,
      }}>
        <p className="mute" style={{ fontSize: 15.5, lineHeight: 1.6, maxWidth: "70ch" }}>{a}</p>
      </div>
    </div>
  );
}

function FAQSection() {
  const [openIdx, setOpenIdx] = React.useState(0);
  const faqs = [
    { q: "How much does it cost to get started?", a: "Our Launch plan starts at $499 for a complete, sales-focused website with up to 5 pages. For businesses that need ongoing marketing support, our Growth plan starts at $999/month. Every project is scoped after a short discovery call so pricing matches your exact needs." },
    { q: "How long does it take to launch my website?", a: "Most projects launch in 1–2 weeks. We move fast because we've built a system around it. You'll get a timeline on our discovery call before you commit to anything." },
    { q: "Do I need to provide content and copy?", a: "No. We handle the messaging and sales copy as part of every project. We'll ask you questions about your business and customers, and we write content designed to convert visitors into leads." },
    { q: "What industries do you work with?", a: "We specialize in service-based businesses — home improvement, mortgage and finance, healthcare, consulting, and professional services. If your business relies on leads and consultations to grow, we're a good fit." },
    { q: "What if I already have a website?", a: "Most of our clients do. If your current site isn't generating leads, we'll rebuild it from scratch with conversion-focused design, clear messaging, and proper tracking. No templates. No patches on top of what's broken." },
    { q: "Do you offer support after launch?", a: "Yes. Every project includes post-launch support to make sure everything runs smoothly. Our Growth plan includes ongoing optimization, reporting, and marketing management on a monthly basis." },
  ];
  return (
    <section id="faq" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)", gap: 64, alignItems: "start" }} className="two-col">
          <div style={{ position: "sticky", top: 100 }}>
            <Reveal><Eyebrow>FAQ</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 className="display h2" style={{ marginTop: 20, maxWidth: "12ch" }}>
                Got <span className="serif-it">questions?</span><br />
                The ones we hear most.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead" style={{ marginTop: 24, maxWidth: "30ch", fontSize: 15.5 }}>
                Still have something to ask? Hop on a 15-min call — no pitch.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div style={{ marginTop: 20 }}>
                <PrimaryButton>Book a call</PrimaryButton>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <div style={{ borderTop: "1px solid var(--border)" }}>
              {faqs.map((f, i) => (
                <FAQItem
                  key={i}
                  q={f.q}
                  a={f.a}
                  open={openIdx === i}
                  onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
                />
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA ───────────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section id="cta" style={{
      position: "relative",
      padding: "140px 0 120px",
      overflow: "hidden",
      background: "var(--bg)",
    }}>
      <div className="grid-bg" style={{ opacity: 0.4 }}></div>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 60% at 50% 50%, rgba(43,163,232,0.16), transparent 70%)",
        pointerEvents: "none",
      }}></div>

      <div className="container" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
        <Reveal>
          <Pill>Let's build yours next</Pill>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="display" style={{
            fontSize: "clamp(48px, 9vw, 144px)",
            fontWeight: 500,
            letterSpacing: "-0.045em",
            lineHeight: 0.95,
            marginTop: 28,
            maxWidth: "16ch",
            marginInline: "auto",
          }}>
            Your website should<br />
            <span className="serif-it accent-gradient">bring in business.</span>
          </h2>
        </Reveal>

        <Reveal delay={200}>
          <p className="lead" style={{ marginTop: 28, marginInline: "auto", textAlign: "center" }}>
            Let's make that happen. 15-minute call, no pressure, just clarity.
          </p>
        </Reveal>

        <Reveal delay={300}>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            <PrimaryButton large>Book a free 15-min call</PrimaryButton>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div style={{
            marginTop: 56,
            display: "grid",
            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
            maxWidth: 720,
            margin: "56px auto 0",
            border: "1px solid var(--border)",
            borderRadius: "var(--r-lg)",
            background: "var(--bg-2)",
          }} className="cta-stats">
            {[
              { v: 90, s: "+", l: "Businesses served" },
              { v: 1.5, s: "wk", l: "Avg. turnaround" },
              { v: 100, s: "%", l: "Built to convert" },
            ].map((st, i) => (
              <div key={i} style={{
                padding: "24px 16px",
                borderRight: i < 2 ? "1px solid var(--border)" : "none",
                textAlign: "center",
              }}>
                <div className="display" style={{ fontSize: 40, fontWeight: 500, color: "var(--accent)", letterSpacing: "-0.03em" }}>
                  <CountUp end={st.v} suffix={st.s} />
                </div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 6 }}>
                  {st.l}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .cta-stats { grid-template-columns: 1fr !important; }
          .cta-stats > div { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
          .cta-stats > div:last-child { border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ── Footer ──────────────────────────────────────────────────── */
function FooterSection() {
  const cols = [
    { h: "Services", l: [
      { l: "Web design", a: "#services" },
      { l: "SEO", a: "#services" },
      { l: "Branding", a: "#services" },
    ]},
    { h: "Company", l: [
      { l: "Process", a: "#process" },
      { l: "Work", a: "#results" },
      { l: "Pricing", a: "#pricing" },
      { l: "FAQ", a: "#faq" },
    ]},
    { h: "Get in touch", l: [
      { l: "Book a call ↗", a: CALENDLY_URL, ext: true },
      { l: "info@yukaamedia.com", a: "mailto:info@yukaamedia.com", ext: true },
    ]},
  ];
  const socials = [
    { name: "Instagram", url: "https://www.instagram.com/yukaa.media/", icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.7"/>
        <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7"/>
        <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor"/>
      </svg>
    )},
    { name: "Facebook", url: "https://www.facebook.com/yukaamedia", icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
        <path d="M14 22V13h3l.5-4H14V6.5c0-1.1.4-1.9 2-1.9h1.5V1.1C17 1 16 .9 14.7.9 11.9.9 10 2.6 10 5.9V9H7v4h3v9h4z" fill="currentColor"/>
      </svg>
    )},
    { name: "LinkedIn", url: "https://www.linkedin.com/company/yukaamedia", icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="1.7"/>
        <rect x="6.5" y="10" width="2.2" height="8" fill="currentColor"/>
        <circle cx="7.6" cy="7.4" r="1.4" fill="currentColor"/>
        <path d="M11.5 18v-8h2.1v1.1c.6-.8 1.5-1.3 2.7-1.3 2 0 3.2 1.3 3.2 3.7V18h-2.2v-4.2c0-1.2-.5-1.9-1.6-1.9-1 0-1.6.7-1.6 1.9V18h-2.6z" fill="currentColor"/>
      </svg>
    )},
  ];
  return (
    <footer style={{ padding: "80px 0 40px", borderTop: "1px solid var(--border)", background: "var(--bg)" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.6fr) repeat(3, minmax(0, 1fr))",
          gap: 48,
          paddingBottom: 64,
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <img src="assets/yukaa-logo.png" alt="Yukaa Media" style={{
                height: 36, width: "auto",
                filter: "drop-shadow(0 0 16px rgba(43,163,232,0.35))",
              }} />
              <span className="display" style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.02em" }}>Yukaa Media</span>
            </div>
            <p className="mute" style={{ fontSize: 14.5, lineHeight: 1.55, maxWidth: "32ch" }}>
              Websites that bring in business — for service businesses that want to grow.
            </p>
            <p className="serif-it accent-gradient" style={{ fontSize: 28, marginTop: 28, letterSpacing: "-0.01em" }}>
              Let's build →
            </p>

            <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
              {socials.map((s) => (
                <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer"
                  aria-label={s.name}
                  style={{
                    width: 38, height: 38,
                    border: "1px solid var(--border-2)",
                    borderRadius: "50%",
                    display: "grid", placeItems: "center",
                    color: "var(--fg)",
                    transition: "background 200ms ease, color 200ms ease, border-color 200ms ease",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = "var(--accent)";
                    e.currentTarget.style.color = "var(--accent-ink)";
                    e.currentTarget.style.borderColor = "var(--accent)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = "transparent";
                    e.currentTarget.style.color = "var(--fg)";
                    e.currentTarget.style.borderColor = "var(--border-2)";
                  }}>
                  {s.icon}
                </a>
              ))}
            </div>
          </div>

          {cols.map((c, i) => (
            <div key={i}>
              <h4 className="mono" style={{ fontSize: 11, color: "var(--fg-dim)", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 18, fontWeight: 500 }}>{c.h}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.l.map((it, j) => (
                  <li key={j}>
                    <a href={it.a} {...(it.ext ? { target: "_blank", rel: "noopener noreferrer" } : {})} style={{ fontSize: 14.5, color: "var(--fg)" }}>{it.l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 28,
          borderTop: "1px solid var(--border)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, alignItems: "center",
        }}>
          <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-dim)", letterSpacing: "0.04em" }}>
            © 2026 Yukaa Media. All rights reserved.
          </span>
          <span className="mono" style={{ fontSize: 11.5, color: "var(--fg-dim)", letterSpacing: "0.04em" }}>
            Designed in-house. Built to convert.
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { PricingSection, TestimonialsSection, FAQSection, FinalCTA, FooterSection });