// franchising.jsx — Lemon-AID franchise opportunity (inner page)
// Reuses SiteChrome / DB_PAL / dbStyles from direction-b.jsx (window globals).

const FP = DB_PAL;
const fps = dbStyles;

function FP_Hero({ status }) {
  return (
    <section style={{ padding: "72px 48px 56px" }}>
      <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>
        FRANCHISE OPPORTUNITY / CONFIDENTIAL-ISH
      </div>
      <h1 style={{ ...fps.display, fontSize: 132, margin: "0 0 28px", lineHeight: .92 }}>
        Own a corner.<br/>
        <span style={{ background: FP.accent, padding: "4px 12px", display: "inline-block" }}>Not this one.</span>
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 620, color: FP.ink }}>
        Lemon-AID has validated a repeatable model for neighborhood refreshment
        and minor-injury supply. The corner of Birchway and Burlwood is not
        available. Every other corner, in theory, is.
      </p>
      <div style={{
        marginTop: 36, display: "flex", gap: 16, flexWrap: "wrap",
      }}>
        {[
          ["Total startup", "≈ $41.50"],
          ["Time to open", "1 weekend"],
          ["Territories sold", "0"],
        ].map(([l, v]) => (
          <div key={l} style={{
            padding: "14px 18px", border: `1px solid ${FP.ink}`,
            ...fps.label, fontSize: 11, display: "flex", flexDirection: "column", gap: 6,
          }}>
            <span style={{ color: FP.mute }}>{l}</span>
            <span style={{ ...fps.display, fontSize: 24 }}>{v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function FP_Opportunity() {
  return (
    <section style={{ padding: "0 48px 56px" }}>
      <div data-spec-strip style={{
        background: FP.ink, color: FP.bg, padding: "32px 36px",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
      }}>
        {[
          ["ADDRESSABLE MARKET", "Every person who walks past, while thirsty"],
          ["COMPETITION", "None observed on this corner"],
          ["SEASONALITY", "Worse in winter. We're realistic."],
          ["MOAT", "We are already here"],
        ].map(([l, v], i, arr) => (
          <div key={l} style={{ padding: "0 24px", borderRight: i < arr.length - 1 ? `1px solid ${FP.bg}33` : "none" }}>
            <div style={{ ...fps.label, color: FP.accent, marginBottom: 8 }}>{l}</div>
            <div style={{ fontSize: 16, lineHeight: 1.35 }}>{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FP_Investment() {
  const rows = [
    ["Card table", "$12.00", "One. Folding. White."],
    ["Pitcher & stirring spoon", "$6.00", "Dishwasher safe"],
    ["Initial lemon inventory", "$8.00", "Approx. one bag"],
    ["Cooler & cold-chain", "$0.00", "Use the one at home"],
    ["First aid bundle materials", "$9.50", "Bandages, wipes, bags"],
    ["Signage", "$4.00", "Posterboard & marker"],
    ["Cash float (change)", "$2.00", "In quarters"],
  ];
  const total = "$41.50";
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${FP.ink}` }}>
      <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>01 — INITIAL INVESTMENT</div>
      <h2 style={{ ...fps.display, fontSize: 56, margin: "0 0 8px" }}>What it costs to open.</h2>
      <p style={{ color: FP.mute, fontSize: 15, maxWidth: 520, margin: "0 0 32px" }}>
        There is no initial franchise fee. There is also no franchise. This is
        an estimate of the goods required to begin operating, played entirely
        straight.
      </p>
      <div style={{ border: `1px solid ${FP.ink}`, background: FP.paper }}>
        {rows.map((r, i) => (
          <div key={r[0]} data-calc-row style={{
            display: "grid", gridTemplateColumns: "1fr auto 1.2fr",
            gap: 24, alignItems: "baseline", padding: "18px 28px",
            borderBottom: `1px solid ${FP.faint}`,
          }}>
            <div style={{ ...fps.display, fontSize: 22, letterSpacing: "-.02em" }}>{r[0]}</div>
            <div style={{ ...fps.mono, fontSize: 16 }}>{r[1]}</div>
            <div style={{ ...fps.label, color: FP.mute, fontSize: 10, textAlign: "right" }}>{r[2]}</div>
          </div>
        ))}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr auto",
          alignItems: "center", padding: "24px 28px",
          background: FP.ink, color: FP.bg,
        }}>
          <div style={{ ...fps.label, color: FP.accent }}>TOTAL INITIAL INVESTMENT</div>
          <div style={{ ...fps.display, fontSize: 56, color: FP.accent }}>{total}</div>
        </div>
      </div>
    </section>
  );
}

function FP_Economics() {
  return (
    <section style={{ padding: "72px 48px", background: FP.ink, color: FP.bg, borderTop: `1px solid ${FP.ink}` }}>
      <div style={{ ...fps.label, color: FP.accent, marginBottom: 8 }}>02 — UNIT ECONOMICS</div>
      <h2 style={{ ...fps.display, fontSize: 56, margin: "0 0 40px" }}>The model, on paper.</h2>
      <div data-ir-metrics style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[
          ["Avg. transaction", "$1.83", "Blended across three SKUs"],
          ["Weekend volume", "~22 units", "Weather permitting"],
          ["Gross per weekend", "≈ $40", "Before lemons"],
          ["Payback period", "1.04 weekends", "Approximately"],
        ].map(([v, big, note]) => (
          <div key={v} style={{ padding: 24, background: "#1a1a1a" }}>
            <div style={{ ...fps.label, fontSize: 9, opacity: .6, marginBottom: 10 }}>{v}</div>
            <div style={{ ...fps.display, fontSize: 40, color: FP.accent }}>{big}</div>
            <div style={{ fontSize: 12, opacity: .7, marginTop: 8 }}>{note}</div>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 13, opacity: .55, marginTop: 24, maxWidth: 640, ...fps.mono, lineHeight: 1.7 }}>
        Figures are illustrative, unaudited, and assembled by a ten-year-old who
        is good at math but has other priorities. Past lemonade performance does
        not guarantee future lemonade performance.
      </p>
    </section>
  );
}

function FP_Territory() {
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${FP.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>03 — PROTECTED TERRITORY</div>
          <h2 style={{ ...fps.display, fontSize: 56, margin: "0 0 24px" }}>Your corner is yours.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: FP.mute, maxWidth: 480, margin: "0 0 24px" }}>
            Each franchisee is granted exclusive rights to one (1) corner. No
            other Lemon-AID operator may set up within sight of your table. This
            is enforced by the fact that we do not, at present, have other
            operators.
          </p>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", border: `1px solid ${FP.ink}` }}>
            {[
              ["Radius of exclusivity", "Line of sight"],
              ["Encroachment policy", "Strongly discouraged"],
              ["Corner transfer", "Subject to founder approval"],
            ].map(([k, v], i, a) => (
              <li key={k} style={{
                display: "grid", gridTemplateColumns: "1fr auto", gap: 16,
                padding: "14px 18px",
                borderBottom: i < a.length - 1 ? `1px solid ${FP.faint}` : "none",
              }}>
                <span style={{ ...fps.label, color: FP.mute }}>{k}</span>
                <span style={{ ...fps.display, fontSize: 16 }}>{v}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{
          border: `1px solid ${FP.ink}`, background: FP.paper, aspectRatio: "1 / 1",
          position: "relative", overflow: "hidden",
        }}>
          {/* schematic "territory map" — pure CSS, deadpan */}
          <div style={{ position: "absolute", inset: 0, background:
            "repeating-linear-gradient(0deg, transparent 0 39px, " + FP.faint + " 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, " + FP.faint + " 39px 40px)" }} />
          <div style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 14, background: FP.ink, transform: "translateX(-50%)" }} />
          <div style={{ position: "absolute", top: "62%", left: 0, right: 0, height: 14, background: FP.ink, transform: "translateY(-50%)" }} />
          <div style={{
            position: "absolute", left: "calc(50% + 20px)", top: "calc(62% - 64px)",
            width: 44, height: 44, background: FP.accent, border: `2px solid ${FP.ink}`,
            display: "grid", placeItems: "center", ...fps.display, fontSize: 18,
          }}>L</div>
          <div style={{
            position: "absolute", left: "calc(50% + 76px)", top: "calc(62% - 96px)",
            ...fps.label, fontSize: 9, background: FP.bg, padding: "4px 6px", border: `1px solid ${FP.ink}`,
          }}>YOUR CORNER</div>
          <div style={{ position: "absolute", bottom: 12, left: 12, ...fps.label, fontSize: 9, color: FP.mute }}>
            FIG. A — REPRESENTATIVE TERRITORY
          </div>
        </div>
      </div>
    </section>
  );
}

function FP_Candidate() {
  return (
    <section style={{ padding: "72px 48px", background: FP.paper, borderTop: `1px solid ${FP.ink}`, borderBottom: `1px solid ${FP.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
        <div>
          <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>04 — THE IDEAL FRANCHISEE</div>
          <h2 style={{ ...fps.display, fontSize: 44, margin: "0 0 24px" }}>We are looking for.</h2>
          <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
            {[
              "A person who lives near a different corner.",
              "Comfort handling cash and making change.",
              "A tolerance for variable weather.",
              "The ability to squeeze a lemon, repeatedly.",
              "A parent or guardian who is broadly supportive.",
            ].map((t, i) => (
              <li key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr", gap: 14,
                padding: "12px 0", borderTop: `1px solid ${FP.faint}`, fontSize: 15,
              }}>
                <span style={{ ...fps.label, color: FP.accent }}>{String(i + 1).padStart(2, "0")}</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>WE ARE NOT LOOKING FOR</div>
          <h2 style={{ ...fps.display, fontSize: 44, margin: "0 0 24px" }}>Hard pass.</h2>
          <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
            {[
              "Anyone who would sub in powdered mix.",
              "Investors seeking equity. We are not raising.",
              "People who want to add a third beverage.",
              "Anyone who finds this concept 'adorable.'",
            ].map((t, i) => (
              <li key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr", gap: 14,
                padding: "12px 0", borderTop: `1px solid ${FP.faint}`, fontSize: 15, color: FP.mute,
              }}>
                <span style={{ ...fps.label, color: FP.warm }}>✕</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function FP_Fees() {
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${FP.ink}` }}>
      <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>05 — FEES & ROYALTIES</div>
      <h2 style={{ ...fps.display, fontSize: 56, margin: "0 0 40px" }}>The arrangement.</h2>
      <div data-product-grid style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {[
          ["Franchise fee", "$0", "There is no franchise. Pay nothing."],
          ["Ongoing royalty", "4%", "Payable in lemonade, to the founder, on request."],
          ["Marketing levy", "1 sign", "You make the sign. That is the levy."],
        ].map(([title, big, note]) => (
          <div key={title} style={{ border: `1px solid ${FP.ink}`, background: FP.paper, padding: 28, display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ ...fps.label, color: FP.mute }}>{title}</div>
            <div style={{ ...fps.display, fontSize: 56 }}>{big}</div>
            <div style={{ fontSize: 14, color: FP.mute }}>{note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FP_FAQ() {
  const qs = [
    ["Is this a real franchise opportunity?", "No. It is a real lemonade stand with a thorough website."],
    ["Can I actually buy a territory?", "You can set up your own stand on your own corner. We will not stop you. We will quietly admire it."],
    ["Do you provide training?", "The founder will explain the process to you once. It takes about four minutes."],
    ["What support do I get?", "Encouragement. Occasionally, a spare lemon."],
    ["Who owns the recipe?", "The recipe is lemons, sugar, water, and ice. It is not a secret. Use it well."],
  ];
  return (
    <section style={{ padding: "72px 48px", background: FP.paper, borderTop: `1px solid ${FP.ink}` }}>
      <div style={{ ...fps.label, color: FP.mute, marginBottom: 8 }}>06 — FREQUENTLY ASKED</div>
      <h2 style={{ ...fps.display, fontSize: 56, margin: "0 0 40px" }}>Questions, answered.</h2>
      <div style={{ border: `1px solid ${FP.ink}` }}>
        {qs.map((q, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 32,
            padding: "24px 28px",
            borderBottom: i < qs.length - 1 ? `1px solid ${FP.faint}` : "none",
            background: FP.bg,
          }}>
            <div style={{ ...fps.display, fontSize: 22, letterSpacing: "-.01em" }}>{q[0]}</div>
            <div style={{ fontSize: 15, color: FP.mute, lineHeight: 1.55 }}>{q[1]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FP_CTA() {
  return (
    <section style={{ padding: "96px 48px", borderTop: `1px solid ${FP.ink}`, textAlign: "center" }}>
      <h2 style={{ ...fps.display, fontSize: 72, margin: "0 0 24px" }}>
        Apply in person.<br/><span style={{ background: FP.accent, padding: "2px 12px", display: "inline-block" }}>At the table.</span>
      </h2>
      <p style={{ fontSize: 17, color: FP.mute, maxWidth: 520, margin: "0 auto 12px" }}>
        We do not accept applications by phone, email, or form. Walk up. Buy a
        lemonade. Mention your interest. The founder will take it from there.
      </p>
      <p style={{ ...fps.label, fontSize: 11, color: FP.mute }}>
        Corner of Birchway and Burlwood · Saturday &amp; Sunday
      </p>
    </section>
  );
}

function FP_Disclosure() {
  return (
    <section style={{ padding: "40px 48px", borderTop: `1px solid ${FP.ink}`, background: FP.ink, color: FP.bg }}>
      <div style={{ ...fps.label, color: FP.accent, marginBottom: 12, fontSize: 9 }}>REQUIRED DISCLOSURE</div>
      <p style={{ ...fps.mono, fontSize: 11, lineHeight: 1.8, opacity: .6, maxWidth: 820, margin: 0 }}>
        This page does not constitute a franchise offering, a securities
        offering, or financial advice. No franchise is being sold. No territory
        is for sale. Lemon-AID is a sole proprietorship operating from a card
        table and is not registered with any franchise authority because it is
        not, by any definition, a franchise. Any resemblance to a real franchise
        disclosure document is intentional and meant in good humor.
      </p>
    </section>
  );
}

function FranchisingPage({ statusOverride }) {
  const status = useOpenStatus(statusOverride);
  return (
    <SiteChrome statusOverride={statusOverride} activeNav="franchising">
      <FP_Hero status={status} />
      <FP_Opportunity />
      <FP_Investment />
      <FP_Economics />
      <FP_Territory />
      <FP_Candidate />
      <FP_Fees />
      <FP_FAQ />
      <FP_CTA />
      <FP_Disclosure />
    </SiteChrome>
  );
}

window.FranchisingPage = FranchisingPage;