// FooterAndExtras.jsx — membership pricing + footer (i18n)

const TIER_IDS = ["basic", "pro", "premium"];

const Membership = ({ t }) => {
  const [loadingIdx, setLoadingIdx] = React.useState(null);
  const [memError, setMemError] = React.useState(null);

  const subscribe = async (idx) => {
    const tierId = TIER_IDS[idx];
    setLoadingIdx(idx);
    setMemError(null);
    try {
      const res = await fetch("/api/create-subscription", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tierId }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error(err.error || `Subscription failed (${res.status})`);
      }
      const { url } = await res.json();
      if (!url) throw new Error("No checkout URL returned");
      window.location.href = url;
    } catch (e) {
      setLoadingIdx(null);
      setMemError(e.message || "Something went wrong. Please try again.");
    }
  };

  return (
    <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="mem-head" style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="font-mono" style={{ fontSize: 12, color: "var(--terracotta)", marginBottom: 16, letterSpacing: "0.1em" }}>
            {t.mem_eyebrow}
          </div>
          <h2 className="font-display mem-title" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.035em", margin: "0 auto 18px", fontWeight: 600, maxWidth: 760 }}>
            {t.mem_title_1}<br/> {t.mem_title_2} <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.mem_title_word}</span>{t.mem_title_3}
          </h2>
          <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: 540, margin: "0 auto", lineHeight: 1.55 }}>
            {t.mem_blurb}
          </p>
        </div>
        <div className="membership-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {t.tiers.map((tier, i) => {
            const highlight = i === 1;
            return (
              <div key={i} className="membership-tier" style={{
                padding: 32,
                borderRadius: 20,
                background: highlight ? "var(--cocoa)" : "var(--paper)",
                color: highlight ? "var(--cream)" : "var(--cocoa)",
                border: highlight ? "1px solid var(--cocoa)" : "1px solid var(--line-strong)",
                position: "relative",
                transform: highlight ? "translateY(-12px)" : "none",
                boxShadow: highlight ? "0 30px 60px -20px rgba(42,31,24,0.4)" : "none",
              }}>
                {highlight && (
                  <div style={{ position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)", padding: "5px 12px", background: "var(--terracotta)", color: "var(--cream)", borderRadius: 999, fontFamily: "'Geist Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: "0.05em" }}>
                    {t.mem_popular}
                  </div>
                )}
                <div className="font-display" style={{ fontSize: 24, fontWeight: 600, marginBottom: 6 }}>{tier.name}</div>
                <div style={{ fontSize: 13, color: highlight ? "rgba(245,239,230,0.6)" : "var(--muted)", marginBottom: 24, minHeight: 36 }}>{tier.desc}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginBottom: 24, paddingBottom: 24, borderBottom: highlight ? "1px solid rgba(245,239,230,0.15)" : "1px solid var(--line)" }}>
                  <span className="font-display tier-price" style={{ fontSize: 56, fontWeight: 600, lineHeight: 1, letterSpacing: "-0.03em" }}>${tier.price}</span>
                  <span className="font-mono" style={{ fontSize: 13, color: highlight ? "rgba(245,239,230,0.6)" : "var(--muted)" }}>/ {t.mem_per}</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 10 }}>
                  {tier.features.map(f => (
                    <li key={f} style={{ fontSize: 14, display: "flex", gap: 10, alignItems: "start", color: highlight ? "rgba(245,239,230,0.9)" : "var(--cocoa)" }}>
                      <span style={{ color: highlight ? "#E68A5C" : "var(--terracotta)", marginTop: 2 }}>✓</span> {f}
                    </li>
                  ))}
                </ul>
                <button
                  className={highlight ? "btn btn-primary" : "btn btn-ghost"}
                  style={{ width: "100%", justifyContent: "center", opacity: loadingIdx !== null && loadingIdx !== i ? 0.5 : 1 }}
                  disabled={loadingIdx !== null}
                  onClick={() => subscribe(i)}
                >
                  {loadingIdx === i ? "Redirecting…" : `${t.mem_choose} ${tier.name}`}
                </button>
              </div>
            );
          })}
        </div>
        {memError && (
          <div style={{ marginTop: 24, textAlign: "center", padding: "12px 16px", background: "rgba(196,80,60,0.08)", border: "1px solid rgba(196,80,60,0.3)", borderRadius: 10, color: "var(--terracotta)", fontSize: 13, maxWidth: 480, marginLeft: "auto", marginRight: "auto" }}>
            {memError}
          </div>
        )}
      </div>
    </section>
  );
};

const Rules = ({ t }) => {
  const groups = [
    { h: t.rules_yes_h, items: t.rules_yes_items, glyph: "✓", tone: "good" },
    { h: t.rules_no_h, items: t.rules_no_items, glyph: "✕", tone: "bad" },
    { h: t.rules_extra_h, items: t.rules_extra_items, glyph: "◆", tone: "neutral" },
  ];
  const toneColor = (tone) =>
    tone === "good" ? "var(--sage)" :
    tone === "bad" ? "var(--terracotta)" :
    "#C99A4A";

  return (
    <section id="rules" className="section" style={{ background: "var(--cream)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "end", marginBottom: 48 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 12, color: "var(--terracotta)", marginBottom: 16, letterSpacing: "0.1em" }}>
              {t.rules_eyebrow}
            </div>
            <h2 className="font-display section-title" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.035em", margin: 0, fontWeight: 600 }}>
              {t.rules_title_1}<br/>
              <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.rules_title_word}</span>{t.rules_title_2}
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--muted)", maxWidth: 520, justifySelf: "end", margin: 0 }}>
            {t.rules_blurb}
          </p>
        </div>

        <div className="rules-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {groups.map((g, i) => (
            <div key={i} className="card" style={{
              padding: 28,
              background: "var(--paper)",
              border: "1px solid var(--line-strong)",
              position: "relative",
              overflow: "hidden",
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: toneColor(g.tone),
                color: "var(--cream)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 18, fontWeight: 700, marginBottom: 18,
              }}>{g.glyph}</div>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: toneColor(g.tone), marginBottom: 14 }}>
                {g.h}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {g.items.map(it => (
                  <li key={it} style={{ fontSize: 15, lineHeight: 1.45, color: "var(--cocoa)", display: "flex", gap: 10, alignItems: "start" }}>
                    <span style={{ color: toneColor(g.tone), marginTop: 2, fontWeight: 600 }}>—</span> {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ t }) => (
  <footer className="grain site-footer" style={{ background: "var(--cocoa-2)", color: "var(--cream)", padding: "72px 0 32px", borderRadius: "32px 32px 0 0", marginTop: 32 }}>
    <div className="container">
      <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48, marginBottom: 56 }}>
        <div>
          <Logo variant="default" size={42} color="var(--cream)" accent="#E68A5C"/>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: "rgba(245,239,230,0.65)", margin: "20px 0 24px", maxWidth: 320 }}>
            {t.foot_blurb}
          </p>
          <div className="font-mono" style={{ fontSize: 11, color: "rgba(245,239,230,0.5)", lineHeight: 1.7 }}>
            {t.foot_addr.map((line, i) => <div key={i}>{line}</div>)}
          </div>
        </div>
        <div>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "#E68A5C", marginBottom: 16 }}>{t.foot_services_h}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
            {[t.svc_plumbing, t.svc_electrical, t.svc_carpentry, t.svc_exterior].map(x => (
              <li key={x}><a href="#services" style={{ color: "rgba(245,239,230,0.8)", textDecoration: "none" }}>{x}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "#E68A5C", marginBottom: 16 }}>{t.foot_company_h}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
            {t.foot_company_items.map(x => (
              <li key={x}><a href="#" style={{ color: "rgba(245,239,230,0.8)", textDecoration: "none" }}>{x}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "#E68A5C", marginBottom: 16 }}>{t.foot_hello_h}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
            <li><a href="tel:3055551042" style={{ color: "rgba(245,239,230,0.8)", textDecoration: "none" }}>(305) 555-1042</a></li>
            <li><a href="mailto:hola@fixmycasa.com" style={{ color: "rgba(245,239,230,0.8)", textDecoration: "none" }}>hola@fixmycasa.com</a></li>
            <li style={{ color: "rgba(245,239,230,0.8)" }}>{t.foot_hours}</li>
            <li style={{ color: "#E68A5C", marginTop: 8 }}>{t.foot_emergencies}</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "24px 0", borderTop: "1px solid rgba(245,239,230,0.12)", fontSize: 12, color: "rgba(245,239,230,0.5)", fontFamily: "'Geist Mono', monospace" }}>
        <span>{t.foot_copyright}</span>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>{t.foot_terms}</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>{t.foot_privacy}</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>{t.foot_sitemap}</a>
        </div>
      </div>
    </div>
  </footer>
);

window.Membership = Membership;
window.Rules = Rules;
window.Footer = Footer;