/* stories.jsx — testimonials, pricing, blog, FAQ, newsletter, footer */

function Testimonials() {
  const items = [
    {
      photo: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/kamala_promod.jpg?fit=900&ssl=1",
      quote: "We both lived in different parts of the U.S. and wouldn't have met if it weren't for Lahmee.",
      names: "Kamala & Promod",
      place: "Nepalgunj → Texas · Married 2022",
    },
    {
      photo: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/reecha_bishesh.png?fit=900&ssl=1",
      quote: "I found my soulmate. Thanks to the team that walked with us through every step.",
      names: "Reecha & Bishesh",
      place: "Nepalgunj · Married 2023",
    },
    {
      photo: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/Smirti_Prassana.jpeg?fit=900&ssl=1",
      quote: "We talked for a year before meeting. When we finally did, it felt like coming home.",
      names: "Smriti & Prasanna",
      place: "Dang → California · Married 2023",
    },
  ];

  return (
    <section id="stories" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Real stories"
          title={<>Real couples,<br/>real marriages.</>}
          lead="Real couples who met through Lahmee (and our previous brand, NepaliLami). No paid testimonials, no staged photos — shared with their permission."
        />
        <div className="testimonials">
          {items.map((t, i) => (
            <article key={i} className="tcard reveal is-in" style={{ animationDelay: `${i * 80}ms` }}>
              <div className="tcard__photo" style={{ backgroundImage: `url(${t.photo})` }} />
              <div className="tcard__body">
                <div className="tcard__q">"{t.quote}"</div>
                <div className="tcard__a">
                  <div>
                    <div className="names">{t.names}</div>
                    <div>{t.place}</div>
                  </div>
                  <Icon.Heart size={18} />
                </div>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 40, textAlign: "center" }}>
          <a href="#" className="btn btn--ghost">Read more success stories <Icon.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

/* Pricing */
function Pricing() {
  const [billing, setBilling] = React.useState("yearly"); // "monthly" | "yearly"
  const vip = billing === "yearly"
    ? { usd: 20, npr: "2,000", period: "yr", note: "Just $1.67/month — billed yearly" }
    : { usd: 10, npr: "1,000", period: "mo", note: "Billed monthly · cancel any time" };

  return (
    <section id="pricing" className="section section--alt">
      <div className="container">
        <SectionHead
          align="center"
          eyebrow="Pricing"
          title={<>Free to start. <span style={{ fontStyle: "italic", color: "var(--primary)" }}>Premium</span> when you're serious.</>}
          lead="No paywalls in the way of meeting someone. Premium VIP is for when you want to move faster."
        />

        {/* Billing toggle */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
          <div className="billing-toggle">
            <button
              className={"bt__opt" + (billing === "monthly" ? " is-active" : "")}
              onClick={() => setBilling("monthly")}
            >Monthly</button>
            <button
              className={"bt__opt" + (billing === "yearly" ? " is-active" : "")}
              onClick={() => setBilling("yearly")}
            >
              Yearly <span className="bt__save">Save 83%</span>
            </button>
          </div>
        </div>

        <div className="pricing">
          <div className="plan reveal is-in">
            <div className="plan__name">Free</div>
            <div className="plan__price">
              <span className="v">$0</span>
              <span className="u">/ forever</span>
            </div>
            <p style={{ color: "var(--muted)", fontSize: 14.5 }}>Everything you need to find someone you actually like.</p>
            <ul>
              <li><span style={{ color: "var(--primary)" }}><Icon.Check /></span> Verified profile + 1 alias</li>
              <li><span style={{ color: "var(--primary)" }}><Icon.Check /></span> Daily curated matches (5/day)</li>
              <li><span style={{ color: "var(--primary)" }}><Icon.Check /></span> Photo blur + privacy controls</li>
              <li><span style={{ color: "var(--primary)" }}><Icon.Check /></span> In-app chat with mutual matches</li>
              <li><span style={{ color: "var(--primary)" }}><Icon.Check /></span> Horoscope match (basic)</li>
            </ul>
            <div className="plan__cta">
              <a href="#" className="btn btn--ghost" style={{ width: "100%", justifyContent: "center" }}>Create free profile</a>
            </div>
          </div>

          <div className="plan plan--vip reveal is-in" style={{ animationDelay: "120ms" }}>
            <div className="plan__tag">Most chosen</div>
            <div className="plan__name" style={{ color: "var(--blush)" }}>Premium VIP</div>
            <div className="plan__price">
              <span className="v">${vip.usd}</span>
              <span className="u">/ {vip.period}</span>
            </div>
            <div style={{ fontSize: 13, color: "#C9B8A8", marginTop: -10 }}>
              or NRS {vip.npr} · {vip.note}
            </div>
            <p style={{ color: "#C9B8A8", fontSize: 14.5, marginTop: 4 }}>For when you want first access, family support, and zero limits.</p>
            <ul style={{ color: "#E9DDC8" }}>
              <li><Icon.Check /> Everything in Free, plus —</li>
              <li><Icon.Check /> Unlimited daily matches + priority placement</li>
              <li><Icon.Check /> Request contact info & private photos</li>
              <li><Icon.Check /> Full horoscope: gun milan + dosha analysis</li>
              <li><Icon.Check /> See who liked you, no limits on interest</li>
              <li><Icon.Check /> Priority human support, 24-hour response</li>
            </ul>
            <div className="plan__cta">
              <a href="#" className="btn" style={{ background: "var(--blush)", color: "var(--ink)", width: "100%", justifyContent: "center" }}>Go Premium <Icon.Arrow /></a>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 28, textAlign: "center", fontSize: 13, color: "var(--muted)" }}>
          Pay with eSewa, Khalti, Stripe, or Apple Pay · Cancel any time
        </div>
      </div>
    </section>
  );
}

/* Blog */
function Blog() {
  const posts = [
    {
      cat: "Stories",
      title: "Welcome to Lahmee: uniting Nepali hearts worldwide.",
      desc: "Why we built a matrimony app that puts privacy and family first.",
      img: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/nilu_nirendra.png?fit=1200&ssl=1",
    },
    {
      cat: "Advice",
      title: "Finding your perfect match: 5 tips for the Nepali diaspora.",
      desc: "Long-distance, culture, and family — how to navigate it with grace.",
      img: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/shristi_biresh.jpg?fit=1200&ssl=1",
    },
    {
      cat: "Culture",
      title: "A modern take on horoscope matching.",
      desc: "Why we built it into the app — and why you can turn it off in one tap.",
      img: "https://i0.wp.com/nepalilami.com/wp-content/uploads/2021/11/ring.png?fit=1200&ssl=1",
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Journal"
          title={<>Reading for the road<br/>to a wedding.</>}
          lead="Stories, advice and small essays from matchmakers, sociologists, and members. Updated weekly."
        />
        <div className="blog">
          {posts.map((p, i) => (
            <a key={i} className="bcard reveal is-in" style={{ animationDelay: `${i * 80}ms` }} href="#">
              <div className="bcard__img" style={{ backgroundImage: `url(${p.img})` }} />
              <div className="bcard__body">
                <div className="bcard__cat">{p.cat}</div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* FAQ */
function FAQ() {
  const items = [
    {
      q: "How do I get verified?",
      a: "After signing up, request verification from your profile. Our team reviews your photo, ID, and a short video selfie within 12–24 hours. Once verified, a small check mark appears on your profile and you can be seen by everyone else.",
    },
    {
      q: "What can a free member do?",
      a: "Free members get a verified profile, up to 5 curated matches a day, photo blur and alias controls, in-app chat with mutual matches, and basic horoscope matching. Most people find their partner without ever upgrading.",
    },
    {
      q: "What do VIP members get?",
      a: "Unlimited daily matches, priority placement, the ability to request contact info and private photos, the full horoscope suite (gun milan + dosha), see-who-liked-you, and 24-hour priority support.",
    },
    {
      q: "Is my data safe?",
      a: "Profile data is encrypted at rest and in transit. We never sell data. Photos are stored separately from identity data, and you can delete everything in one tap from settings.",
    },
    {
      q: "Do I have to be Nepali?",
      a: "Lahmee is built for the global Nepali community — but if you are seriously interested in marrying within it and respect the culture, you are welcome. Our verification team will confirm intent during onboarding.",
    },
    {
      q: "Can my parents help me set this up?",
      a: "Yes. A parent or sibling can co-manage your profile with a separate login. You stay in control of who sees what — they help curate the shortlist.",
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section section--paper">
      <div className="container">
        <SectionHead
          eyebrow="Common questions"
          title={<>If you're still wondering,<br/>start here.</>}
        />
        <div className="faq">
          <div>
            <p style={{ color: "var(--muted)", maxWidth: "32ch" }}>
              Can't find what you need? Email <a href="mailto:support@lahmee.com" style={{ color: "var(--primary)", textDecoration: "underline" }}>support@lahmee.com</a> — we read every message, usually within a day.
            </p>
            <a href="#" className="btn btn--ghost" style={{ marginTop: 24 }}>Visit help center <Icon.Arrow /></a>
          </div>
          <div className="faq__list">
            {items.map((it, i) => (
              <div key={i} className={"faq__item" + (open === i ? " is-open" : "")}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="sign">+</span>
                </button>
                <div className="faq__a">
                  <p style={{ maxWidth: "62ch" }}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Newsletter */
function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section className="section--tight" style={{ padding: "40px 0 80px" }}>
      <div className="container">
        <div className="newsletter reveal is-in">
          <div style={{ position: "relative", zIndex: 2 }}>
            <div className="eyebrow" style={{ color: "var(--blush)" }}><span className="dot" style={{ background: "var(--gold-2)" }}></span>The Lahmee letter</div>
            <h2 style={{ marginTop: 18 }}>
              A short note,<br/>once a month.
            </h2>
            <p>
              A success story, a single useful tip from our matchmakers, and one thing we're improving in the app. No spam, no growth hacking.
            </p>
          </div>
          <div style={{ position: "relative", zIndex: 2 }}>
            <form className="nl-form" onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}>
              <input type="email" required placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
              <button type="submit">{sent ? "Subscribed ✓" : "Subscribe"}</button>
            </form>
            <p style={{ fontSize: 12, color: "rgba(246,239,227,.6)", marginTop: 12 }}>
              We'll never share your address. Unsubscribe in one click.
            </p>
          </div>

          {/* ornament */}
          <svg style={{ position: "absolute", right: -80, top: -80, width: 320, height: 320, opacity: .15, pointerEvents: "none" }} viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="48" fill="none" stroke="#D9A48B" strokeWidth=".4"/>
            <circle cx="50" cy="50" r="40" fill="none" stroke="#D9A48B" strokeWidth=".4" strokeDasharray="1 3"/>
            <circle cx="50" cy="50" r="30" fill="none" stroke="#D9A48B" strokeWidth=".4"/>
            <circle cx="50" cy="50" r="20" fill="none" stroke="#D9A48B" strokeWidth=".4" strokeDasharray="1 3"/>
          </svg>
        </div>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <a href="#" aria-label="Lahmee" style={{ display: "inline-block" }}>
              <img
                src="https://lahmee.com/wp-content/uploads/2024/11/Final-Logo-2023-V2.png"
                alt="Lahmee"
                style={{ height: 44, width: "auto", display: "block" }}
              />
            </a>
            <p>The privacy-first matrimony app for the global Nepali community — formerly known as NepaliLami. Made with care in Atlanta, GA and Kathmandu.</p>
            <div style={{ display: "flex", gap: 12, marginTop: 22 }}>
              <a href="https://www.instagram.com/lahmee.nepal" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background .2s, color .2s, border-color .2s" }} onMouseEnter={(e) => { e.currentTarget.style.background = "var(--primary)"; e.currentTarget.style.color = "var(--paper)"; e.currentTarget.style.borderColor = "var(--primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = ""; e.currentTarget.style.color = ""; e.currentTarget.style.borderColor = "var(--line)"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              </a>
              <a href="https://www.facebook.com/Lahmee.Nepal/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" style={{ width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background .2s, color .2s, border-color .2s" }} onMouseEnter={(e) => { e.currentTarget.style.background = "var(--primary)"; e.currentTarget.style.color = "var(--paper)"; e.currentTarget.style.borderColor = "var(--primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = ""; e.currentTarget.style.color = ""; e.currentTarget.style.borderColor = "var(--line)"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-9h3l1-4h-4V6c0-1 .3-2 2-2h2V0h-3c-3 0-5 2-5 5v4H6v4h3v9h4z"/></svg>
              </a>
              <a href="https://www.tiktok.com/@lahmee.com" target="_blank" rel="noopener noreferrer" aria-label="TikTok" style={{ width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background .2s, color .2s, border-color .2s" }} onMouseEnter={(e) => { e.currentTarget.style.background = "var(--primary)"; e.currentTarget.style.color = "var(--paper)"; e.currentTarget.style.borderColor = "var(--primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = ""; e.currentTarget.style.color = ""; e.currentTarget.style.borderColor = "var(--line)"; }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M19.6 7.2a5.7 5.7 0 0 1-3.4-1.1 5.6 5.6 0 0 1-2.2-3.5h-3.4v13.7a2.6 2.6 0 1 1-2.6-2.6c.3 0 .6 0 .8.1V10.4a6.1 6.1 0 1 0 5.2 6V9.8a8.9 8.9 0 0 0 5.6 1.9V7.2z"/></svg>
              </a>
              <a href="https://www.youtube.com/@lahmee" target="_blank" rel="noopener noreferrer" aria-label="YouTube" style={{ width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background .2s, color .2s, border-color .2s" }} onMouseEnter={(e) => { e.currentTarget.style.background = "var(--primary)"; e.currentTarget.style.color = "var(--paper)"; e.currentTarget.style.borderColor = "var(--primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = ""; e.currentTarget.style.color = ""; e.currentTarget.style.borderColor = "var(--line)"; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 5 12 5 12 5s-4 0-7.2.1c-.4 0-1.2 0-2 .9C2.2 6.6 2 8 2 8S1.8 9.6 1.8 11.2v1.6C1.8 14.4 2 16 2 16s.2 1.4.8 2c.8.8 1.8.8 2.3.9 1.6.2 7 .2 7 .2s4 0 7.2-.1c.4 0 1.2 0 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.2v-1.6C22.2 9.6 22 8 22 8zM10 14V9l4 2.5L10 14z"/></svg>
              </a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Product</h4>
            <ul>
              <li><a href="#features">Privacy controls</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#">Concierge service</a></li>
              <li><a href="#">App</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">About us</a></li>
              <li><a href="#stories">Success stories</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Help</h4>
            <ul>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Safety center</a></li>
              <li><a href="#">Community guidelines</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Legal</h4>
            <ul>
              <li><a href="terms.html">Terms</a></li>
              <li><a href="privacy.html">Privacy</a></li>
              <li><a href="privacy.html#delete">Data deletion</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bot">
          <div>© 2026 Lahmee LLC (formerly NepaliLami) · Atlanta, GA + Kathmandu, NP</div>
          <div style={{ display: "flex", gap: 18 }}>
            <span>+1 (404) 500-6980</span>
            <span>support@lahmee.com</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, Pricing, Blog, FAQ, Newsletter, Footer });