/* global React */
const { useState } = React;

// ============================================================
// Marketing UI kit components for Elite Med Rep
// ============================================================

// Kajabi handoff config — single source of truth.
// Update when offer URLs change in Kajabi admin (Sales → Offers → Get Link).
const KAJABI = {
  base:    "https://john-hicks.mykajabi.com",
  login:   "https://john-hicks.mykajabi.com/library",
  // $10,000 Elite Med Rep — Cohort #1 (live offer, Kajabi Payments).
  cohort:  "https://john-hicks.mykajabi.com/offers/nGxWgE2d",
  // Lead-capture POST endpoint (Kajabi Form action URL — build in Kajabi → Marketing → Forms → Embed).
  // Until set, the form falls back to mailto.
  formAction: "mailto:admin@elitemedrep.com?subject=Elite Med Rep — interested",
};

// Cohort cadence — drives urgency strips + pricing copy.
// Update when the next cohort date moves.
const COHORT = {
  startsLabel: "Monday, May 11",
  startsLong:  "Monday, May 11, 2026",
  applyDeadlineLabel: "Sunday, May 10",
  price: "$10,000",
  duration: "12 weeks",
};

// Per-module Kajabi preview URLs. Mark a lesson as "preview" in Kajabi
// (Products → course → Lesson → toggle Preview enabled), then paste the
// public lesson URL here. Empty string hides the "Watch preview" button.
// Once filled, the button opens a modal that embeds the Kajabi player.
const MODULE_PREVIEWS = {
  1: "", // MODULE 1 — Hospital & OR Survival 101
  2: "", // MODULE 2 — Surgeon Relationship Management
  3: "", // MODULE 3 — From Territory Chaos to Control
  4: "", // MODULE 4 — First 90 Days Ramp-Up Mastery
  5: "", // MODULE 5 — Execution Era: Doing the Job
  6: "", // MODULE 6 — Mastering the Job
};

const Icon = ({ name, size = 18, color = "currentColor", strokeWidth = 1.5 }) => {
  const paths = {
    arrow:    <><path d="M5 12h14M13 5l7 7-7 7"/></>,
    arrowDown:<><path d="M12 5v14M5 12l7 7 7-7"/></>,
    check:    <><path d="M5 12l5 5 9-11"/></>,
    star:     <><path d="M12 2l3 7h7l-5.5 4.5 2 7-6.5-4-6.5 4 2-7L2 9h7z"/></>,
    play:     <><path d="M6 4l14 8-14 8z"/></>,
    user:     <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>,
    trophy:   <><path d="M4 4h16v5a8 8 0 0 1-16 0z"/><path d="M9 22h6M12 18v4"/></>,
    chart:    <><path d="M3 21l4-9 5 4 4-7 5 5"/><path d="M3 21h18"/></>,
    network:  <><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2.5"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><path d="M14 19c0-2 2-4 4-4s3 2 3 4"/></>,
    shield:   <><path d="M12 3l9 4v5c0 5-4 8-9 9-5-1-9-4-9-9V7z"/></>,
    quote:    <><path d="M6 9c0-2 1.5-4 4-4M6 9v6h4V9zM14 9c0-2 1.5-4 4-4M14 9v6h4V9z"/></>,
    menu:     <><path d="M3 6h18M3 12h18M3 18h18"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
};

const Bracketed = ({ children, size = 64 }) => (
  <div style={{
    position: "relative", width: size, height: size,
    display: "flex", alignItems: "center", justifyContent: "center",
  }}>
    <span style={{position:"absolute",top:0,left:0,width:14,height:14,borderTop:"1px solid var(--accent)",borderLeft:"1px solid var(--accent)"}}/>
    <span style={{position:"absolute",top:0,right:0,width:14,height:14,borderTop:"1px solid var(--accent)",borderRight:"1px solid var(--accent)"}}/>
    <span style={{position:"absolute",bottom:0,left:0,width:14,height:14,borderBottom:"1px solid var(--accent)",borderLeft:"1px solid var(--accent)"}}/>
    <span style={{position:"absolute",bottom:0,right:0,width:14,height:14,borderBottom:"1px solid var(--accent)",borderRight:"1px solid var(--accent)"}}/>
    {children}
  </div>
);

const Eyebrow = ({ children, color }) => (
  <div style={{
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 11,
    letterSpacing: "0.28em", textTransform: "uppercase",
    color: color || "var(--accent)",
  }}>{children}</div>
);

const Tagline = ({ children }) => (
  <div style={{
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 13,
    letterSpacing: "0.22em", textTransform: "uppercase",
    color: "var(--fg)",
  }}>{children}</div>
);

const Button = ({ variant = "primary", children, size = "md", icon, onClick, href }) => {
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);

  const base = {
    fontFamily: "var(--font-display)", fontWeight: 600,
    letterSpacing: "0.18em", textTransform: "uppercase",
    border: "none", cursor: "pointer", borderRadius: 4,
    display: "inline-flex", alignItems: "center", gap: 10,
    transition: "all 220ms cubic-bezier(.2,0,0,1)",
    fontSize: size === "lg" ? 13 : 11,
    padding: size === "lg" ? "16px 28px" : "12px 22px",
    textDecoration: "none",
  };

  const variants = {
    primary: {
      default: {
        background: "var(--accent)", color: "var(--accent-ink)",
        boxShadow: "0 0 0 1px rgba(201,155,79,0.35), 0 8px 24px rgba(201,155,79,0.20)",
      },
      hover: {
        background: "var(--accent-hover)", color: "var(--accent-ink)",
        boxShadow: "0 0 0 1px rgba(220,184,115,0.55), 0 10px 28px rgba(201,155,79,0.30)",
        transform: "translateY(-1px)",
      },
      press: {
        background: "var(--accent-press)", color: "var(--accent-ink)",
        boxShadow: "0 0 0 1px rgba(201,155,79,0.35), 0 4px 12px rgba(201,155,79,0.18)",
        transform: "translateY(0)", opacity: 0.95,
      },
    },
    secondary: {
      default: {
        background: "transparent", color: "var(--fg)",
        border: "1px solid var(--border-strong)",
      },
      hover: {
        background: "transparent", color: "var(--accent-hover)",
        border: "1px solid var(--border-gold)",
      },
      press: {
        background: "rgba(201,155,79,0.06)", color: "var(--accent-press)",
        border: "1px solid var(--border-gold)",
      },
    },
    ghost: {
      default: { background: "transparent", color: "var(--fg-muted)" },
      hover: { background: "var(--emr-graphite)", color: "var(--fg)" },
      press: { background: "var(--emr-slate)", color: "var(--fg)" },
    },
  };

  const state = press ? "press" : (hover ? "hover" : "default");
  const style = { ...base, ...variants[variant][state] };

  const handlers = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => { setHover(false); setPress(false); },
    onMouseDown: () => setPress(true),
    onMouseUp: () => setPress(false),
    onTouchStart: () => setPress(true),
    onTouchEnd: () => setPress(false),
    onClick,
  };

  const inner = (<>{children}{icon !== false && <Icon name={icon || "arrow"} size={14}/>}</>);

  // Render as <a> when href is provided (so nav can hand off Apply button to a real URL),
  // otherwise <button> for form-style click handlers.
  return href
    ? (<a href={href} style={style} {...handlers}>{inner}</a>)
    : (<button style={style} {...handlers}>{inner}</button>);
};

const FooterLink = ({ href, children }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
         fontFamily:"var(--font-body)", fontSize:13,
         color: hover ? "var(--accent)" : "var(--fg-muted)",
         textDecoration:"none", cursor:"pointer",
         transition:"color 180ms cubic-bezier(.2,0,0,1)",
       }}>{children}</a>
  );
};

const NavLink = ({ href, active, children, onClick }) => {
  const [hover, setHover] = React.useState(false);
  const color = (active || hover) ? "var(--accent)" : "var(--fg-muted)";
  return (
    <a href={href} onClick={onClick}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
         fontFamily:"var(--font-display)", fontWeight:500, fontSize:11,
         letterSpacing:"0.20em", textTransform:"uppercase",
         color, cursor:"pointer", textDecoration:"none",
         transition:"color 180ms cubic-bezier(.2,0,0,1)",
       }}>{children}</a>
  );
};

const Hamburger = ({ open, onClick }) => (
  <button
    onClick={onClick}
    aria-label={open ? "Close menu" : "Open menu"}
    aria-expanded={open}
    className="emr-hamburger"
    style={{
      background:"transparent", border:"none", cursor:"pointer",
      padding:8, marginLeft:-8, display:"flex", flexDirection:"column",
      gap:5, width:32, height:32, alignItems:"center", justifyContent:"center",
    }}>
    <span style={{display:"block", width:20, height:1.5, background:"var(--fg)", transition:"all 220ms cubic-bezier(.2,0,0,1)", transform: open ? "translateY(6.5px) rotate(45deg)" : "none"}}/>
    <span style={{display:"block", width:20, height:1.5, background:"var(--fg)", transition:"all 220ms cubic-bezier(.2,0,0,1)", opacity: open ? 0 : 1}}/>
    <span style={{display:"block", width:20, height:1.5, background:"var(--fg)", transition:"all 220ms cubic-bezier(.2,0,0,1)", transform: open ? "translateY(-6.5px) rotate(-45deg)" : "none"}}/>
  </button>
);

const MobileMenu = ({ open, items, onClose }) => {
  React.useEffect(() => {
    if (open) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  return (
    <div className="emr-mobile-menu" style={{
      position:"fixed", top:58, left:0, right:0, bottom:0, zIndex:49,
      background:"#0A0E14", padding:"32px 28px",
      display:"flex", flexDirection:"column", gap:0,
      animation:"emrFadeIn 220ms cubic-bezier(.2,0,0,1)",
    }}>
      {items.map((item, i) => (
        <a key={item.label} href={item.href} onClick={onClose}
           style={{
             fontFamily:"var(--font-display)", fontWeight:400,
             fontSize:20, letterSpacing:"0.16em", textTransform:"uppercase",
             color:"var(--fg)", textDecoration:"none",
             padding:"22px 0",
             borderBottom: i === items.length - 1 ? "none" : "1px solid var(--border)",
           }}>{item.label}</a>
      ))}
      <div style={{height:24}}/>
      <Button variant="primary" size="lg" href={KAJABI.cohort} onClick={onClose}>Apply for Cohort</Button>
      <div style={{height:12}}/>
      <Button variant="secondary" size="md" icon={false} href={KAJABI.login} onClick={onClose}>Member Login</Button>
    </div>
  );
};

const Nav = ({ activeTab = "Curriculum", onTab }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const items = [
    { label: "Curriculum", href: "#curriculum" },
    { label: "Coaching",   href: "#pillars"   },
    { label: "Community",  href: "#pillars"   },
    { label: "Pricing",    href: "#pricing"   },
    { label: "Stories",    href: "#stories"   },
  ];
  return (
    <>
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "18px 48px",
      background: "rgba(10,14,20,0.72)",
      backdropFilter: "blur(20px) saturate(180%)",
      WebkitBackdropFilter: "blur(20px) saturate(180%)",
      borderBottom: "1px solid var(--border)",
      display: "flex", alignItems: "center", gap: 16,
    }}>
      <Hamburger open={menuOpen} onClick={() => setMenuOpen(o => !o)}/>
      <a href="#" className="emr-wordmark" style={{
        display:"flex", alignItems:"baseline", gap:8,
        textDecoration:"none", lineHeight:1,
        fontFamily:"var(--font-display)", fontWeight:500,
        letterSpacing:"0.18em", textTransform:"uppercase",
        marginLeft:8,
      }}>
        <span style={{
          fontSize:24,
          background:"linear-gradient(180deg, #EDD49A 0%, #C99B4F 100%)",
          WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
          backgroundClip:"text",
        }}>Elite</span>
        <span style={{
          fontSize:11, letterSpacing:"0.32em",
          color:"var(--fg-muted)", fontWeight:400,
        }}>Med Rep</span>
      </a>
      <div style={{display:"flex",gap:28,flex:1,marginLeft:24}}>
        {items.map(item => (
          <NavLink key={item.label} href={item.href}
                   active={activeTab === item.label}
                   onClick={() => onTab && onTab(item.label)}>
            {item.label}
          </NavLink>
        ))}
      </div>
      <Button variant="secondary" icon={false} href={KAJABI.login}>Member Login</Button>
      <Button variant="primary" href={KAJABI.cohort}>Apply</Button>
    </nav>
    <MobileMenu open={menuOpen} items={items} onClose={() => setMenuOpen(false)}/>
    </>
  );
};

const Hero = () => (
  <section style={{
    position: "relative", padding: "120px 48px 140px",
    background: "radial-gradient(ellipse at top, #1A2230 0%, #0A0E14 70%)",
    textAlign: "center", overflow: "hidden",
  }}>
    {/* faint grain */}
    <div style={{
      position:"absolute", inset:0,
      backgroundImage:`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>")`,
      opacity: 0.04, pointerEvents:"none",
    }}/>
    <div style={{maxWidth:980, margin:"0 auto", position:"relative"}}>
      <Eyebrow>Building the top 1% of med reps</Eyebrow>
      <h1 style={{
        fontFamily:"var(--font-display)", fontWeight:300,
        fontSize:88, lineHeight:1.05, letterSpacing:"0.04em",
        textTransform:"uppercase", margin:"24px 0 18px",
        color:"var(--fg)",
      }}>
        Elite isn't a title.<br/>
        <span style={{
          background:"linear-gradient(180deg, #EDD49A 0%, #C99B4F 100%)",
          WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
          backgroundClip:"text",
        }}>It's a standard.</span>
      </h1>
      <p style={{
        fontFamily:"var(--font-editorial)", fontStyle:"italic",
        fontSize:24, lineHeight:1.5, color:"var(--fg-muted)",
        margin:"0 auto 40px", maxWidth:680,
      }}>
        The playbook for medical device reps who plan to win President's Club —
        not just survive the year.
      </p>
      <div style={{display:"flex",gap:16,justifyContent:"center"}}>
        <Button size="lg" variant="primary" href={KAJABI.cohort}>Apply for Cohort</Button>
        <Button size="lg" variant="secondary" href="#curriculum">View Curriculum</Button>
      </div>
      {/* Cohort urgency strip */}
      <div style={{
        marginTop: 36, display: "inline-flex", alignItems: "center", gap: 12,
        padding: "10px 18px", border: "1px solid var(--border-gold)",
        borderRadius: 999, background: "rgba(201,155,79,0.06)",
      }}>
        <span style={{
          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 10,
          letterSpacing: "0.28em", textTransform: "uppercase",
          color: "var(--accent)",
        }}>Next Cohort</span>
        <span style={{
          width: 4, height: 4, borderRadius: "50%", background: "var(--accent)",
        }}/>
        <span style={{
          fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500,
          color: "var(--fg)",
        }}>{COHORT.startsLong}</span>
      </div>
      {/* Hairline divider with label */}
      <div style={{display:"flex",alignItems:"center",gap:16,margin:"56px auto 0",maxWidth:520}}>
        <div style={{flex:1,height:1,background:"var(--border-gold)"}}/>
        <Tagline>Coach · Connect · Elevate</Tagline>
        <div style={{flex:1,height:1,background:"var(--border-gold)"}}/>
      </div>
    </div>
  </section>
);

const Pillars = () => {
  const items = [
    { name: "Coach",   icon: "chart",   desc: "Direct guidance from reps who have already done the thing — not coaches who read books." },
    { name: "Connect", icon: "network", desc: "Closed cohorts of high performers. The room you wished you were in your first year." },
    { name: "Elevate", icon: "trophy",  desc: "Frameworks, drills, and pre-call playbooks engineered for capital cycles." },
  ];
  return (
    <section id="pillars" style={{padding:"96px 48px", background:"var(--emr-obsidian)"}}>
      <div style={{maxWidth:1200, margin:"0 auto"}}>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:48}}>
          {items.map(it => (
            <div key={it.name} style={{display:"flex",flexDirection:"column",gap:18}}>
              <Bracketed size={64}><Icon name={it.icon} size={28} color="var(--accent)"/></Bracketed>
              <div style={{
                fontFamily:"var(--font-display)", fontWeight:600, fontSize:14,
                letterSpacing:"0.24em", textTransform:"uppercase", color:"var(--fg)",
              }}>{it.name}</div>
              <div style={{fontFamily:"var(--font-body)", fontSize:15, lineHeight:1.7, color:"var(--fg-muted)", maxWidth:300}}>
                {it.desc}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Modal video player — opens when Watch preview is clicked; closes on backdrop tap or X.
const PreviewModal = ({ url, title, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position:"fixed", inset:0, zIndex:100,
      background:"rgba(5,8,12,0.85)", backdropFilter:"blur(6px)", WebkitBackdropFilter:"blur(6px)",
      display:"flex", alignItems:"center", justifyContent:"center",
      padding:"24px",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position:"relative", width:"100%", maxWidth:960,
        background:"var(--emr-obsidian)", border:"1px solid var(--border-gold)", borderRadius:12,
        overflow:"hidden",
      }}>
        <div style={{
          padding:"14px 20px", display:"flex", justifyContent:"space-between", alignItems:"center",
          borderBottom:"1px solid var(--border)",
        }}>
          <div>
            <div style={{
              fontFamily:"var(--font-display)", fontWeight:600, fontSize:9,
              letterSpacing:"0.28em", textTransform:"uppercase", color:"var(--accent)",
            }}>Preview</div>
            <div style={{
              fontFamily:"var(--font-display)", fontWeight:500, fontSize:14,
              color:"var(--fg)", marginTop:2, letterSpacing:"0.04em",
            }}>{title}</div>
          </div>
          <button onClick={onClose} aria-label="Close preview" style={{
            background:"transparent", border:"1px solid var(--border-strong)", color:"var(--fg)",
            width:32, height:32, borderRadius:"50%", cursor:"pointer",
            display:"grid", placeItems:"center",
            fontSize:16, fontFamily:"var(--font-body)",
          }}>×</button>
        </div>
        <div style={{position:"relative", paddingBottom:"56.25%", height:0}}>
          <iframe
            src={url}
            title={title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
            allowFullScreen
            style={{position:"absolute", inset:0, width:"100%", height:"100%", border:0}}
          />
        </div>
      </div>
    </div>
  );
};

const Curriculum = () => {
  const modules = [
    { n:"01", id:1, t:"Hospital & OR Survival 101",      d:"How to walk into a hospital and an OR without getting flagged in week one." },
    { n:"02", id:2, t:"Surgeon Relationship Management", d:"Find a champion. Build trust. Become the rep they ask for by name." },
    { n:"03", id:3, t:"From Territory Chaos to Control", d:"Turn a mess of accounts, surgeons, and meetings into a system that ships forecast." },
    { n:"04", id:4, t:"First 90 Days Ramp-Up Mastery",   d:"What to do when you've been thrown into a territory and a quota." },
    { n:"05", id:5, t:"Execution Era: Doing the Job",    d:"Pre-call discipline, in-service mastery, deal-cycle muscle. Where reps stop being new." },
    { n:"06", id:6, t:"Mastering the Job",               d:"President's Club rhythm. Week-to-week patterns the top 1% live by." },
  ];
  const [openModule, setOpenModule] = useState(null);
  const opened = openModule != null ? modules.find(m => m.id === openModule) : null;
  return (
    <section id="curriculum" style={{padding:"96px 48px", background:"var(--emr-midnight)"}}>
      <div style={{maxWidth:1080, margin:"0 auto"}}>
        <Eyebrow>The Playbook</Eyebrow>
        <h2 style={{
          fontFamily:"var(--font-display)", fontWeight:300, fontSize:48,
          letterSpacing:"0.04em", textTransform:"uppercase",
          margin:"16px 0 56px", color:"var(--fg)",
        }}>6 modules. Self-paced. <em style={{
          fontFamily:"var(--font-editorial)", fontStyle:"italic", fontWeight:400,
          textTransform:"none", letterSpacing:"-0.01em",
        }}>Zero filler.</em></h2>
        <div style={{display:"grid",gap:1,background:"var(--border)",border:"1px solid var(--border)"}}>
          {modules.map(m => {
            const previewUrl = MODULE_PREVIEWS[m.id];
            const hasPreview = previewUrl && previewUrl.length > 0;
            return (
            <div key={m.n} style={{
              display:"grid", gridTemplateColumns:"100px 1fr auto",
              alignItems:"center", padding:"28px 32px",
              background:"var(--emr-midnight)", gap:24,
            }}
            onMouseEnter={e => e.currentTarget.style.background="var(--emr-graphite)"}
            onMouseLeave={e => e.currentTarget.style.background="var(--emr-midnight)"}
            >
              <div style={{
                fontFamily:"var(--font-display)", fontWeight:300, fontSize:32,
                color:"var(--accent)", letterSpacing:"0.04em",
              }}>{m.n}</div>
              <div>
                <div style={{
                  fontFamily:"var(--font-display)", fontWeight:500, fontSize:20,
                  color:"var(--fg)", marginBottom:6,
                }}>{m.t}</div>
                <div style={{fontFamily:"var(--font-body)", fontSize:14, color:"var(--fg-muted)"}}>{m.d}</div>
              </div>
              {hasPreview ? (
                <button
                  onClick={() => setOpenModule(m.id)}
                  style={{
                    display:"inline-flex", alignItems:"center", gap:8,
                    background:"transparent", border:"1px solid var(--border-gold)",
                    color:"var(--accent)", cursor:"pointer", borderRadius:999,
                    padding:"8px 14px",
                    fontFamily:"var(--font-display)", fontWeight:600, fontSize:10,
                    letterSpacing:"0.20em", textTransform:"uppercase",
                    transition:"all 180ms cubic-bezier(.2,0,0,1)",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(201,155,79,0.10)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
                >
                  <Icon name="play" size={11} color="var(--accent)"/>
                  Watch preview
                </button>
              ) : (
                <Icon name="arrow" size={18} color="var(--fg-subtle)"/>
              )}
            </div>
          );})}
        </div>
      </div>
      {opened && (
        <PreviewModal
          url={MODULE_PREVIEWS[opened.id]}
          title={`Module ${opened.id} — ${opened.t}`}
          onClose={() => setOpenModule(null)}
        />
      )}
    </section>
  );
};

const Quote = () => (
  <section id="stories" style={{padding:"120px 48px", background:"var(--emr-obsidian)"}}>
    <div style={{maxWidth:880, margin:"0 auto", textAlign:"center"}}>
      <div style={{width:48,height:1,background:"var(--accent)",margin:"0 auto 32px",opacity:.6}}/>
      <blockquote style={{
        fontFamily:"var(--font-editorial)", fontStyle:"italic", fontWeight:400,
        fontSize:42, lineHeight:1.3, letterSpacing:"-0.005em",
        color:"var(--fg)", margin:0,
      }}>
        "Most reps lose the deal in the parking lot — <span style={{color:"var(--accent)"}}>before they ever walk in.</span> 
        EMR gave me the pre-call discipline I should have had in year one."
      </blockquote>
      <div style={{
        marginTop:32,
        fontFamily:"var(--font-display)", fontWeight:500, fontSize:11,
        letterSpacing:"0.22em", textTransform:"uppercase", color:"var(--fg-subtle)",
      }}>— J. Reyes · Capital Sales · Cardiovascular · 2× President's Club</div>
    </div>
  </section>
);

const Stats = () => (
  <section style={{padding:"72px 48px", background:"var(--emr-midnight)", borderTop:"1px solid var(--border-gold)", borderBottom:"1px solid var(--border-gold)"}}>
    <div style={{maxWidth:1200, margin:"0 auto", display:"grid", gridTemplateColumns:"repeat(4,1fr)"}}>
      {[
        ["1%","The Standard","Top tier of med reps"],
        ["12 wk","Per Cohort","Closed group · live coaching"],
        ["6","Modules","Hospital to mastery"],
        ["∞","Access","Lifetime, post-cohort"],
      ].map(([n,l,s], i) => (
        <div key={i} style={{padding:"0 24px", borderLeft: i===0 ? "none" : "1px solid var(--border-strong)"}}>
          <div style={{
            fontFamily:"var(--font-display)", fontWeight:300, fontSize:48,
            color:"var(--accent)", lineHeight:1, fontVariantNumeric:"tabular-nums",
          }}>{n}</div>
          <div style={{
            fontFamily:"var(--font-display)", fontWeight:500, fontSize:11,
            letterSpacing:"0.22em", textTransform:"uppercase",
            color:"var(--fg-subtle)", marginTop:14,
          }}>{l}</div>
          <div style={{fontFamily:"var(--font-body)", fontSize:13, color:"var(--fg-muted)", marginTop:6}}>{s}</div>
        </div>
      ))}
    </div>
  </section>
);

const Pricing = () => {
  const features = [
    "All 6 modules · self-paced + live",
    "Weekly live coaching sessions",
    "1:1 calls — 4 per cohort",
    "Cohort review of your active deals",
    "Pre-call templates + playbooks",
    "Closed community of high performers",
    "Demo day with hiring managers",
  ];
  return (
    <section id="pricing" style={{padding:"96px 48px", background:"var(--emr-obsidian)"}}>
      <div style={{maxWidth:760, margin:"0 auto"}}>
        <div style={{textAlign:"center", marginBottom:48}}>
          <Eyebrow>Membership</Eyebrow>
          <h2 style={{
            fontFamily:"var(--font-display)", fontWeight:300, fontSize:48,
            letterSpacing:"0.04em", textTransform:"uppercase",
            margin:"16px 0 12px", color:"var(--fg)",
          }}>One way in.</h2>
          <p style={{
            fontFamily:"var(--font-editorial)", fontStyle:"italic", fontSize:18,
            color:"var(--fg-muted)", margin:"0 auto", maxWidth:520, lineHeight:1.5,
          }}>Closed cohorts. Application-required. The room you wished you were in your first year.</p>
        </div>

        <div style={{
          padding:"40px 36px", borderRadius:12,
          background:"var(--emr-midnight)",
          border:"1px solid rgba(201,155,79,0.40)",
          boxShadow:"0 0 0 1px rgba(201,155,79,0.18), 0 24px 60px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset",
          position:"relative",
        }}>
          <div style={{
            position:"absolute", top:-1, left:"50%", transform:"translateX(-50%)",
            fontFamily:"var(--font-display)", fontWeight:600, fontSize:9,
            letterSpacing:"0.28em", textTransform:"uppercase",
            color:"var(--emr-obsidian)", background:"var(--accent)",
            padding:"5px 14px", borderRadius:"0 0 4px 4px",
            whiteSpace:"nowrap",
          }}>Cohort #1 · Spring 2026</div>

          <div style={{textAlign:"center", marginTop:8}}>
            <Tagline>The Cohort</Tagline>
            <div style={{
              fontFamily:"var(--font-display)", fontWeight:300, fontSize:64,
              color:"var(--fg)", margin:"14px 0 6px", lineHeight:1,
            }}>{COHORT.price}</div>
            <div style={{fontFamily:"var(--font-body)", fontSize:13, color:"var(--fg-subtle)"}}>
              {COHORT.duration} · application required
            </div>
          </div>

          {/* Cohort schedule callout */}
          <div style={{
            marginTop:28, padding:"16px 20px",
            background:"var(--emr-graphite)",
            border:"1px solid var(--border-gold)",
            borderRadius:8,
            display:"grid", gridTemplateColumns:"1fr 1fr", gap:24,
          }}>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:9, letterSpacing:"0.24em", textTransform:"uppercase", color:"var(--accent)"}}>Next cohort starts</div>
              <div style={{fontFamily:"var(--font-display)", fontWeight:500, fontSize:18, color:"var(--fg)", marginTop:6}}>{COHORT.startsLabel}</div>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:9, letterSpacing:"0.24em", textTransform:"uppercase", color:"var(--accent)"}}>Applications close</div>
              <div style={{fontFamily:"var(--font-display)", fontWeight:500, fontSize:18, color:"var(--fg)", marginTop:6}}>{COHORT.applyDeadlineLabel}</div>
            </div>
          </div>

          <div style={{height:1, background:"var(--border)", margin:"28px 0"}}/>

          <div style={{display:"grid", gap:12}}>
            {features.map(f => (
              <div key={f} style={{display:"flex", gap:12, alignItems:"flex-start"}}>
                <Icon name="check" size={15} color="var(--accent)"/>
                <span style={{fontFamily:"var(--font-body)", fontSize:14, color:"var(--fg-muted)"}}>{f}</span>
              </div>
            ))}
          </div>

          <div style={{marginTop:36, textAlign:"center"}}>
            <Button variant="primary" size="lg" href={KAJABI.cohort}>Apply for the Cohort</Button>
            <p style={{
              fontFamily:"var(--font-body)", fontSize:12, color:"var(--fg-subtle)",
              margin:"16px 0 0", lineHeight:1.5,
            }}>
              We review every application personally. Most decisions within 48 hours.
            </p>
          </div>
        </div>

        <p style={{
          fontFamily:"var(--font-body)", fontSize:13, color:"var(--fg-muted)",
          textAlign:"center", margin:"32px auto 0", maxWidth:520, lineHeight:1.6,
        }}>
          Hiring a team? <a href={`mailto:admin@elitemedrep.com?subject=EMR — team training inquiry`} style={{color:"var(--accent)", textDecoration:"none"}}>Talk to us about volume licensing →</a>
        </p>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer style={{padding:"72px 48px 40px", background:"var(--emr-obsidian)", borderTop:"1px solid var(--border)"}}>
    <div style={{maxWidth:1200, margin:"0 auto"}}>
      <div style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr 1fr",gap:48,marginBottom:48}}>
        <div>
          <div style={{display:"flex",alignItems:"baseline",gap:10,marginBottom:18,fontFamily:"var(--font-display)",letterSpacing:"0.18em",textTransform:"uppercase",lineHeight:1}}>
            <span style={{fontSize:32,fontWeight:500,background:"linear-gradient(180deg, #EDD49A 0%, #C99B4F 100%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"}}>Elite</span>
            <span style={{fontSize:13,letterSpacing:"0.32em",color:"var(--fg-muted)"}}>Med Rep</span>
          </div>
          <p style={{fontFamily:"var(--font-body)", fontSize:13, color:"var(--fg-muted)", lineHeight:1.7, maxWidth:320, marginTop:0}}>
            Building the top 1% of med reps. Coach. Connect. Elevate.
          </p>
        </div>
        {[
          ["Curriculum", [
            ["Modules",     "#curriculum"],
            ["Coaching",    "#pillars"],
            ["Cohorts",     "#pricing"],
            ["Enterprise",  "#pricing"],
          ]],
          ["Company", [
            ["About",         "#stories"],
            ["Founder Story", "#stories"],
            ["Careers",       "mailto:admin@elitemedrep.com"],
            ["Press",         "mailto:admin@elitemedrep.com"],
          ]],
          ["Resources", [
            ["Blog",                "#"],
            ["Pre-call Templates",  "#pricing"],
            ["Free Lesson",         "#pricing"],
            ["Contact",             "mailto:admin@elitemedrep.com"],
          ]],
        ].map(([h, items]) => (
          <div key={h}>
            <Tagline>{h}</Tagline>
            <div style={{marginTop:18,display:"grid",gap:10}}>
              {items.map(([label, href]) => (
                <FooterLink key={label} href={href}>{label}</FooterLink>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{height:1, background:"var(--border-gold)", margin:"32px 0 24px"}}/>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
        <div style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--fg-subtle)"}}>© 2026 Elite Med Rep — Coach. Connect. Elevate.</div>
        <Tagline>Top 1%</Tagline>
      </div>
    </div>
  </footer>
);

// Lead-capture form — sits above pricing. POSTs to KAJABI.formAction (Kajabi Form
// embed action URL when configured; mailto fallback otherwise).
const LeadCapture = () => {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [focus, setFocus] = useState(false);

  const isMailto = KAJABI.formAction.startsWith("mailto:");

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    if (isMailto) {
      // mailto fallback — open the user's mail client with the address pre-filled
      const url = KAJABI.formAction + (KAJABI.formAction.includes("?") ? "&" : "?") +
        "body=" + encodeURIComponent("Email: " + email);
      window.location.href = url;
    } else {
      // Real Kajabi Form: POST as form-encoded
      const fd = new FormData();
      fd.append("email", email);
      fetch(KAJABI.formAction, { method: "POST", body: fd, mode: "no-cors" })
        .catch(() => {});
    }
    setSubmitted(true);
  };

  return (
    <section id="lead-capture" style={{
      padding:"72px 48px",
      background:"var(--emr-midnight)",
      borderTop:"1px solid var(--border)",
      borderBottom:"1px solid var(--border)",
    }}>
      <div style={{maxWidth:720, margin:"0 auto", textAlign:"center"}}>
        <Eyebrow>Free Pre-call Playbook</Eyebrow>
        <h2 style={{
          fontFamily:"var(--font-display)", fontWeight:300, fontSize:36,
          letterSpacing:"0.04em", textTransform:"uppercase",
          margin:"16px 0 12px", color:"var(--fg)",
        }}>Drop your email. <em style={{
          fontFamily:"var(--font-editorial)", fontStyle:"italic", fontWeight:400,
          textTransform:"none", letterSpacing:"-0.01em",
        }}>Get the playbook.</em></h2>
        <p style={{
          fontFamily:"var(--font-body)", fontSize:14, color:"var(--fg-muted)",
          margin:"0 0 32px", lineHeight:1.6,
        }}>
          The pre-call discipline our top 1% reps use before every surgeon meeting.
          One PDF. Zero spam. Unsubscribe whenever.
        </p>
        {submitted ? (
          <div style={{
            display:"inline-flex", alignItems:"center", gap:10,
            fontFamily:"var(--font-display)", fontWeight:500, fontSize:13,
            letterSpacing:"0.18em", textTransform:"uppercase",
            color:"var(--accent)", padding:"16px 28px",
            border:"1px solid var(--border-gold)", borderRadius:4,
          }}>
            <Icon name="check" size={16} color="var(--accent)"/>
            On its way. Check your inbox.
          </div>
        ) : (
          <form onSubmit={onSubmit} style={{
            display:"flex", gap:8, justifyContent:"center", flexWrap:"wrap",
            maxWidth:520, margin:"0 auto",
          }}>
            <input
              type="email" required value={email}
              onChange={(e) => setEmail(e.target.value)}
              onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
              placeholder="you@yourwork.com"
              style={{
                flex:"1 1 280px", minWidth:0,
                padding:"14px 18px", borderRadius:4,
                background:"var(--emr-graphite)",
                border: focus ? "1px solid var(--border-gold)" : "1px solid var(--border-strong)",
                color:"var(--fg)", fontFamily:"var(--font-body)", fontSize:15,
                outline:"none", transition:"border-color 180ms cubic-bezier(.2,0,0,1)",
              }}
            />
            <Button variant="primary" size="md" icon={false}>Send it</Button>
          </form>
        )}
      </div>
    </section>
  );
};

window.MarketingComponents = { Nav, Hero, Pillars, Curriculum, Quote, Stats, LeadCapture, Pricing, Footer, Button, NavLink, FooterLink, Eyebrow, Tagline, Icon, Bracketed };
