/* Contact CTA block (used inline) + standalone Contact page */

const CONTACT_EMAIL = "coach_ad@londonlogicbasketball.com";
const CALENDLY_URL = "https://calendly.com/coach_ad";

/* ------------------------------------------------------------
   ContactCTA — drop-in block with the two primary actions
   + email fallback. Use inline on any page.
   ------------------------------------------------------------ */
function ContactCTA({ variant = "light", title, eyebrow = "More info?" }) {
  const dark = variant === "dark";
  const bg = dark ? "#0a0a0a" : "var(--c-paper)";
  const ink = dark ? "#ffffff" : "var(--c-ink)";
  const soft = dark ? "rgba(255,255,255,0.7)" : "var(--c-ink-soft)";
  const line = dark ? "rgba(255,255,255,0.14)" : "var(--c-line)";

  return (
    <section style={{ padding: "20px 0 40px" }}>
      <div className="container">
        <div style={{
          background: bg, color: ink,
          border: `1px solid ${line}`,
          borderRadius: "var(--radius-card)",
          overflow: "hidden",
        }}>
          {/* Header row */}
          <div style={{
            padding: "36px 40px 28px",
            borderBottom: `1px solid ${line}`,
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            gap: 16, flexWrap: "wrap",
          }}>
            <div>
              <Eyebrow color="var(--c-red)">{eyebrow}</Eyebrow>
              <h2 className="display" style={{
                margin: "12px 0 0",
                fontSize: "clamp(32px, 4.4vw, 56px)",
                lineHeight: 0.96, color: ink,
              }}>
                {title || <span>Contact <span style={{ color: "var(--c-red)" }}>us.</span></span>}
              </h2>
            </div>
            <p style={{
              margin: 0, maxWidth: "40ch",
              fontSize: 15, lineHeight: 1.55, color: soft,
            }}>
              Two ways in — book a call with Coach AD, or have the full information
              package sent to your inbox.
            </p>
          </div>

          {/* Two action cards */}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
          }} className="contact-actions">
            <ActionCard
              n="01"
              title="Set up an information call with the founder"
              body="A 20-minute conversation with Coach AD. Bring your athlete, bring your questions. Walk away with a clear sense of fit."
              ctaLabel="Book a call"
              href={CALENDLY_URL}
              external
              ink={ink} soft={soft} line={line}
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
              }
            />
            <ActionCard
              n="02"
              title="Receive a full information package"
              body="The 12-page family guide: program philosophy, division structure, August camp schedule, pricing, scholarship details, and Coach AD's bio."
              ctaLabel="Email me the package"
              href={`mailto:info@londonlogicbasketball.com?subject=${encodeURIComponent("Information package request")}&body=${encodeURIComponent("Hi,\n\nPlease send the London LOGIC Basketball information package to this address.\n\nAthlete name:\nGrade entering Sept 2026:\n\nThanks!")}`}
              ink={ink} soft={soft} line={line}
              borderLeft
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
                  <path d="m22 6-10 7L2 6" />
                </svg>
              }
            />
          </div>

          {/* Email strip */}
          <a href={`mailto:${CONTACT_EMAIL}`} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 16, flexWrap: "wrap",
            padding: "20px 40px",
            borderTop: `1px solid ${line}`,
            background: dark ? "#15110d" : "var(--c-warm)",
            color: ink, textDecoration: "none",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <span className="mono" style={{ color: "var(--c-red)" }}>Quick questions? Email us</span>
              <span className="display" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "0.01em", color: ink }}>
                <span style={{ color: "var(--c-red)", marginRight: 8 }}>@</span>
                {CONTACT_EMAIL}
              </span>
            </div>
            <span className="mono" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              color: ink,
            }}>
              Copy address <Arrow />
            </span>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .contact-actions { grid-template-columns: 1fr !important; }
          .contact-actions > .action-card.bl { border-left: none !important; border-top: 1px solid ${line.replace(/`/g, "")} !important; }
        }
      `}</style>
    </section>
  );
}

function ActionCard({ n, title, body, ctaLabel, href, icon, ink, soft, line, borderLeft, external }) {
  return (
    <a className={`action-card${borderLeft ? " bl" : ""}`}
      href={href}
      {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
      style={{
        padding: "36px 40px",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        gap: 32, minHeight: 260,
        color: ink, textDecoration: "none",
        borderLeft: borderLeft ? `1px solid ${line}` : "none",
        transition: "background 200ms ease",
        position: "relative",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = "color-mix(in oklab, var(--c-red) 6%, transparent)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = "transparent";
      }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
        <div style={{
          flex: "0 0 auto",
          width: 52, height: 52, borderRadius: 12,
          background: "var(--c-red)", color: "#fff",
          display: "grid", placeItems: "center",
        }}>
          {icon}
        </div>
        <div style={{ flex: 1 }}>
          <div className="mono" style={{ color: "var(--c-red)" }}>{n}</div>
          <h3 className="display" style={{
            margin: "10px 0 0", fontSize: 28, lineHeight: 1.05, color: ink,
            textTransform: "uppercase",
          }}>{title}</h3>
          <p style={{
            margin: "12px 0 0", fontSize: 14.5, lineHeight: 1.55, color: soft,
            maxWidth: "44ch",
          }}>{body}</p>
        </div>
      </div>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        fontFamily: "var(--font-mono)", fontSize: 12,
        letterSpacing: "0.08em", textTransform: "uppercase",
        color: ink,
      }}>
        <span style={{
          padding: "10px 16px", borderRadius: 999,
          background: "var(--c-red)", color: "#fff",
        }}>{ctaLabel}</span>
        <Arrow />
      </div>
    </a>
  );
}

/* ------------------------------------------------------------
   ContactPage — standalone page at #contact
   ------------------------------------------------------------ */
function ContactPage() {
  return (
    <div data-screen-label="09 Contact" style={{ padding: "60px 0 40px" }}>
      <div className="container">
        <SectionHead
          eyebrow="Contact"
          title={<span>Let's talk <span style={{ color: "var(--c-red)" }}>basketball.</span></span>}
          kicker="Two doors in: a 20-minute call with Coach AD, or the full information package emailed to you."
        />
      </div>

      <ContactCTA variant="light" eyebrow="Take the next step" title={<span>How to reach <span style={{ color: "var(--c-red)" }}>us.</span></span>} />

      {/* What to expect — three columns */}
      <section style={{ padding: "20px 0 40px" }}>
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
          }} className="contact-expect">
            {[
              ["Response time", "Within 48 hours", "We're a small team — but a fast one. Every email gets a real reply."],
              ["Where we're based", "London, Ontario", "All programming, calls, and camps run out of London-area gyms."],
              ["Best time to reach us", "Mon–Fri · 4 – 8 PM ET", "After-school hours work best for parent calls. Weekends by request."],
            ].map(([k, v, b]) => (
              <div key={k} style={{
                background: "var(--c-paper)", border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)", padding: 26,
              }}>
                <div className="mono" style={{ color: "var(--c-ink-soft)" }}>{k}</div>
                <div className="display" style={{ marginTop: 8, fontSize: 28, lineHeight: 1.05, color: "var(--c-red)" }}>{v}</div>
                <div style={{ marginTop: 12, fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.5 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .contact-expect { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* FAQ hint */}
      <section style={{ padding: "20px 0 80px" }}>
        <div className="container">
          <div style={{
            background: "var(--c-warm)", border: "1px solid var(--c-line)",
            borderRadius: "var(--radius-card)",
            padding: "32px 36px",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 20, flexWrap: "wrap",
          }}>
            <div>
              <Eyebrow>Before you ask</Eyebrow>
              <div className="display" style={{ marginTop: 10, fontSize: 28, lineHeight: 1.05 }}>
                Your answer might already be in the <span style={{ color: "var(--c-red)" }}>FAQ.</span>
              </div>
            </div>
            <Btn to="faq" kind="primary">Read the FAQ</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ContactCTA = ContactCTA;
window.ContactPage = ContactPage;