/* --- Card: Beginning of the Journey --- */
const { useState } = React;

/* ——— Small UI helpers (same as your working model) ——— */
function Badge({ children, tone = "default" }) {
  const styles = {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "1px solid var(--ring)",
    borderRadius: "999px",
    padding: "6px 10px",
    fontWeight: 700,
    fontSize: "12.5px",
    background: "#fff",
    color: "var(--text)",
  };
  if (tone === "info") {
    styles.background = "#F1F5FF";
    styles.border = "1px solid #C7D2FE";
    styles.color = "#1E3A8A";
  }
  if (tone === "warn") {
    styles.background = "#FFF7ED";
    styles.border = "1px solid #FED7AA";
    styles.color = "#7C2D12";
  }
  return <span style={styles}>{children}</span>;
}
function Pill({ children }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--ring)",
        borderRadius: "999px",
        padding: "6px 10px",
        marginRight: 8,
        marginBottom: 8,
        background: "#fff",
        color: "var(--text)",
        fontWeight: 700,
        fontSize: "12.5px",
      }}
    >
      {children}
    </span>
  );
}
function Section({ title, children }) {
  return (
    <section className="card" style={{ marginTop: 16 }}>
      <h2 style={{ marginTop: 0, marginBottom: 8, fontSize: 18 }}>{title}</h2>
      <div>{children}</div>
    </section>
  );
}
function StatCard({ label, lines = [] }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {lines.map((line, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {line}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ——— The Card ——— */
function JourneyStartCard() {
  const [links] = useState({
    notion:
      "https://jumbled-papaya-d28.notion.site/What-if-you-could-take-back-control-of-your-numbers-without-wasting-time-in-Excel-210572c634a080b5a74de9abf4d7ee5e?pvs=74",
    summaryPdf: "/projects/business/PresentationDURIEZENGLISH.pdf",
    callSummaryPdf: "/projects/business/PDFsuiviEN.pdf",
    examplesPage1: "/projects/business/Timeline_1.mp4",
    examplesPage2: "/projects/business/VIDEO2.mp4",
    vendorsPdf: "/projects/business/VendorsOfferEN.pdf", 
    entrepreneurshipPage: "https://jeremyduriez.page/projects/insightmate/",
    businessPlanPdf: "/projects/business/BusinessPlan.pdf", // optional; add file if available
  });
  return (
    <div>
      {/* Cover */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./LogoRectangle.png')" }}
        >
          <div className="head-content">
            <div className="icon">🌱</div>
            <div>
              <h1 className="title">Beginning of the Journey</h1>
              <div className="meta">
                From first pitch → client work → scaling attempts
              </div>
            </div>
          </div>
        </div>

        {/* Intro */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Founder-led</Badge>
            <Badge>Client discovery</Badge>
            <Badge>Prototype → Product</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            The story starts with a simple idea:{" "}
            <em>
              help SMEs take back control of their numbers without drowning in
              Excel.
            </em>{" "}
            
            I first realized the potential of this idea when I was working at Suez ( summer 2024);
            tons of insightful data were unused.
            So I shaped a pitch, spoke to prospects, documented their pain
            points, and began testing solutions. That early loop —
            <strong> talk → learn → summarize → act</strong> — became the engine
            of everything that followed.
          </p>

          {/* CTA trio */}
          <div
            style={{
              marginTop: 10,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
          </div>
        </div>
      </header>

      {/* 1) Notion + PDFs */}
      <Section title="1) First Pitch & Service Definition (Notion + PDFs)">
        <p style={{ marginTop: 0, color: "#2C3445" }}>
          I created a Notion landing (translated from French) to frame the offer
          and collect feedback after calls/emails. Each conversation ended with
          a short <strong>service summary</strong> and a{" "}
          <strong>next-steps PDF</strong> to reduce friction and keep momentum.
        </p>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Story bits (made concise)"
            lines={[
              "Discovery calls with owners/CFOs → recurrent pain points logged.",
              "Top asks: cash visibility, overdue invoices, quick pricing checks.",
              "Follow-ups within 24h: summary, scope, optional pilot.",
            ]}
          />
          <StatCard
            label="What I learned"
            lines={[
              "Clarity beats complexity — leaders want 1-page outputs.",
              "Speed to insight > model sophistication.",
              "Templates shorten sales cycles and build trust.",
            ]}
          />
        </div>

        <div
          style={{
            marginTop: 12,
            display: "flex",
            justifyContent: "center",
            gap: 10,
            flexWrap: "wrap",
          }}
        >
          <a
            className="btn"
            href={links.notion}
            target="_blank"
            rel="noopener noreferrer"
          >
            Open Notion Landing
          </a>
          <a
            className="btn ghost"
            href={links.callSummaryPdf}
            target="_blank"
            rel="noopener noreferrer"
          >
            First Call/Email Summary (PDF)
          </a>
          <a
            className="btn ghost"
            href={links.summaryPdf}
            target="_blank"
            rel="noopener noreferrer"
          >
            Summary of Services (PDF)
          </a>
        </div>
      </Section>

      {/* 2) Client examples */}
      <Section title="2) Client Examples — Early Dashboards & Lessons">
        <p style={{ marginTop: 0, color: "#2C3445" }}>
          I delivered a few Streamlit dashboards (videos) for early clients: KPI
          cockpit, cash runway, DSO & aging buckets, and light pricing
          guardrails. Impact was solid — but the process was{" "}
          <em>time-intensive</em> between discovery calls, scoping, conversion,
          execution, and my degree workload.
        </p>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="What worked"
            lines={[
              "Clear KPIs & visuals → faster decisions.",
              "Cash runway + stress tests → immediate value.",
              "Top-relance list → prioritized collections.",
            ]}
          />
          <StatCard
            label="What didn’t scale"
            lines={[
              "Too many bespoke tweaks per client.",
              "Prospection time + conversion + actual work = too long",
              "Maintaining versions across projects.",
            ]}
          />
        </div>

        {/* Big Picture Lesson banner */}
        <div
          style={{
            marginTop: 12,
            background: "#F7F9FC",
            padding: 16,
            borderRadius: 8,
            border: "1px solid #E6EEF8",
            color: "#2C3445",
          }}
        >
          <em>
            “Clarity, speed, and trust consistently outperformed sophistication
            — especially for real business owners.”
          </em>
        </div>

        <div
          style={{
            marginTop: 12,
            display: "flex",
            justifyContent: "center",
            gap: 10,
            flexWrap: "wrap",
          }}
        >
          <a className="btn" href={links.examplesPage1} rel="noopener">
            See Example 1 (Video)
          </a>
          <a className="btn" href={links.examplesPage2} rel="noopener">
            See Example 2 (Video)
          </a>
        </div>
      </Section>

      {/* 3) Independent vendors attempt */}
      <Section title="3) Independent Vendors — Commission Attempt to Speed Sales">
        <p style={{ marginTop: 0, color: "#2C3445" }}>
          To accelerate sales, I launched a{" "}
          <strong>commission plan for independent vendors</strong>. On paper it
          expanded reach; in reality, it was{" "}
          <strong>too complex and under-incentivized</strong>. Low ticket sizes
          meant <em>commissions weren’t attractive</em>, while an{" "}
          <em>Irish legal framework</em> (selling French company services via
          non-Irish contacts to Irish/non-Irish firms) added{" "}
          <em>cross-border compliance, invoicing, and tax headaches</em>. The
          coordination overhead made it <strong>time-consuming</strong> with{" "}
          <strong>poor results</strong>.
        </p>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Why it mainly failed"
            lines={[
              "Commissions too low → weak vendor incentives.",
              "Cross-border setup (IE ↔ FR) → legal/ops friction.",
              "Onboarding/qualification not standardized.",
              "Post-sale delivery still too bespoke to be quick.",
            ]}
          />
          <StatCard
            label="What I fixed next"
            lines={[
              "Standardized value props & 1-page scoping.",
              "Clear pilot templates and handoff steps.",
              "Shift from bespoke builds → product modules.",
            ]}
          />
        </div>

        <div
          style={{
            marginTop: 12,
            display: "flex",
            justifyContent: "center",
            gap: 10,
            flexWrap: "wrap",
          }}
        >
          <a
            className="btn ghost"
            href={links.vendorsPdf}
            target="_blank"
            rel="noopener noreferrer"
          >
            Vendors Commission Plan (PDF)
          </a>
        </div>
      </Section>

      {/* Testimonial */}
      <Section title="Client Feedback">
        <blockquote
          style={{
            borderLeft: "4px solid #007AFF",
            paddingLeft: 12,
            color: "#2C3445",
            fontStyle: "italic",
            background: "#F8FAFC",
            borderRadius: 6,
            paddingTop: 8,
            paddingBottom: 8,
          }}
        >
          “In 15 minutes, I saw things more clearly than in three months on my
          own. The dashboard made it easy to see where money was coming in — and
          going out — without spending hours in Excel. Simple and effective.”
          <div
            style={{
              fontStyle: "normal",
              marginTop: 6,
              color: "#4B5563",
              fontWeight: 500,
            }}
          >
            — Sébastien A.J., AJS Chauffage (North of France)
          </div>
          <div style={{ fontSize: 12, color: "#6B7280" }}>
            (translated from French, shared with client’s agreement)
          </div>
        </blockquote>
      </Section>

      {/* Key Outcomes */}
      <Section title="Key Outcomes">
        <ul style={{ marginTop: 6, color: "#2C3445", lineHeight: 1.5 }}>
          <li>10+ SME leads engaged through discovery/pilots</li>
          <li>3 functional dashboards delivered & tested</li>
          <li>Validated demand: clarity & speed over complexity</li>
          <li>Foundation established for InsightMate modules</li>
          <li>And eventually a very enriching experience</li>
        </ul>
      </Section>

      {/* Stack & Tools */}
      <Section title="Stack & Tools">
        <div style={{ marginTop: 2 }}>
          <Pill>Python / pandas</Pill>
          <Pill>Streamlit</Pill>
          <Pill>React</Pill>
          <Pill>Notion</Pill>
          <Pill>Google Sheets automations</Pill>
          <Pill>jsPDF / html2canvas</Pill>
          <Pill>Canva</Pill>
        </div>
      </Section>

      {/* Transition to InsightMate */}
      <Section title="Towards Scale — Summer 2025 and Beyond">
        <p style={{ marginTop: 0, color: "#2C3445" }}>
          In <strong>summer 2025</strong>, I took a summer job to fund the next
          step and started building <strong>InsightMate</strong> — a productized
          version of the most demanded blocks (cashflow forecasting, risk flags,
          pricing guidance, KPI cockpit), designed to run with connectors and
          minimal hand-holding. I’m actively developing it now.
        </p>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <a className="btn" href="https://jeremyduriez.page/projects/insightmate/" rel="noopener">
            Open the dedicated InsightMate card →
          </a>
        </div>
      </Section>

      <div style={{ textAlign: "center", marginTop: 16 }}>
        <a className="btn ghost" href="/" rel="noopener">
          ← Back to Home
        </a>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<JourneyStartCard />);