/* global React */

function Hero() {
  return (
    <section id="top" style={heroStyles.wrap}>
      <img src="assets/procession.svg" style={heroStyles.procession} alt="" />
      <img src="assets/confetti.svg" style={heroStyles.confetti} alt="" />
      <div style={heroStyles.inner2}>
      <div style={heroStyles.inner}>
        <h1 style={heroStyles.h1}>
          Because Nobody<br />Had Better Rain<br />on Your Parade
        </h1>
        <p style={heroStyles.lead}>
          Your business is your baby, your "parade" if you will, and we think Bobby
          Darin summed it up perfectly when he sang "nobody had better rain on your
          parade". We'll help streamline your business and run your financial
          operations, all for a one, fixed-rate monthly fee.
        </p>
        <div style={heroStyles.ctas}>
          <a
            href="#contact"
            style={heroStyles.primary}
            onClick={(e) => { e.preventDefault(); document.getElementById("contact").scrollIntoView({ behavior: "smooth" }); }}
          >Schedule a call →</a>
        </div>
      </div>
      <div style={heroStyles.preview}>
        <div style={heroStyles.photoFrame}>
          <image-slot
            id="hero-contractor"
            shape="rect"
            fit="cover"
            src="uploads/electrician-placeholder.svg"
            placeholder="Drop a photo of a contractor at work"
          ></image-slot>
          <div style={heroStyles.photoCaption}>
            Servicing trades, home service, and professional service businesses
          </div>
        </div>
      </div>
      </div>
    </section>
  );
}

function StatementCard() {
  const rows = [
    ["Income", "$18,210", false],
    ["Cost of goods", "$7,340", false],
    ["Operating expenses", "$4,462", false],
    ["Net profit", "$6,408", true],
  ];
  return (
    <div style={scStyles.frame}>
      <div style={scStyles.head}>
        <div>
          <div style={scStyles.kicker}>Profit &amp; Loss</div>
          <div style={scStyles.period}>November 2026</div>
        </div>
        <div style={scStyles.seal}>
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none">
            <path d="M4 8.2 L6.6 10.8 L12 5.2" stroke="var(--forest-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          Reconciled
        </div>
      </div>
      <div style={scStyles.rows}>
        {rows.map(([label, val, total]) => (
          <div key={label} style={{ ...scStyles.row, ...(total ? scStyles.rowTotal : null) }}>
            <span style={total ? scStyles.rowLabelTotal : scStyles.rowLabel}>{label}</span>
            <span style={{ ...scStyles.dots }} />
            <span style={total ? scStyles.rowValTotal : scStyles.rowVal}>{val}</span>
          </div>
        ))}
      </div>
      <div style={scStyles.foot}>
        <span style={scStyles.footItem}>Prepared by Kevin</span>
        <span style={scStyles.footItem}>Every account matched</span>
      </div>
    </div>
  );
}

function ReceiptSnippet() {
  return (
    <div style={rsStyles.wrap}>
      <div style={rsStyles.head}>
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--forest-600)" }}>● Auto-categorized</span>
      </div>
      <div style={rsStyles.rows}>
        <div style={rsStyles.row}>
          <span style={rsStyles.vendor}>HOME DEPOT #4318</span>
          <span style={rsStyles.amount}>$847.22</span>
        </div>
        <div style={rsStyles.meta}>
          <span style={rsStyles.tag}>Materials &amp; supplies</span>
        </div>
      </div>
    </div>
  );
}

const heroStyles = {
  wrap: {
    position: "relative", padding: "120px 40px 72px",
    background: "linear-gradient(180deg, #F5F1E8 0%, #FAF7F2 70%)",
    overflow: "hidden",
  },
  inner2: {
    display: "grid", gridTemplateColumns: "1.05fr 0.95fr",
    gap: 56, alignItems: "center",
    maxWidth: 1100, margin: "0 auto", position: "relative",
  },
  procession: { position: "absolute", top: 20, left: 0, right: 0, width: "100%", maxHeight: 104, pointerEvents: "none", opacity: 0.88 },
  confetti: { position: "absolute", top: 160, right: -40, width: 560, opacity: 0.35, pointerEvents: "none" },
  inner: { position: "relative", zIndex: 2, maxWidth: 560 },
  eyebrow: { fontSize: 12, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta-500)", marginBottom: 20 },
  h1: { fontFamily: "var(--font-display)", fontSize: 54, fontWeight: 600, lineHeight: 1.02, letterSpacing: "-0.028em", margin: 0, color: "var(--terracotta-700)" },
  lead: { fontSize: 18, lineHeight: 1.6, color: "var(--fg-muted)", marginTop: 24, maxWidth: 500 },
  ctas: { display: "flex", gap: 12, marginTop: 32 },
  primary: { fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "#fff", background: "var(--terracotta-400)", border: "none", padding: "14px 24px", borderRadius: 12, cursor: "pointer", boxShadow: "var(--shadow-md)", textDecoration: "none", display: "inline-block" },
  secondary: { fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--fg)", background: "transparent", border: "1px solid var(--border-strong)", padding: "14px 24px", borderRadius: 12, cursor: "pointer", textDecoration: "none", display: "inline-block" },
  preview: { position: "relative", zIndex: 2 },
  photoFrame: {
    position: "relative", borderRadius: 18, overflow: "hidden",
    boxShadow: "var(--shadow-xl)", border: "1px solid var(--border)",
    height: 480, maxWidth: 520, marginLeft: "auto",
    transform: "rotate(0.5deg)", background: "var(--paper-2)",
  },
  photoCaption: {
    position: "absolute", left: 0, right: 0, bottom: 0,
    padding: "40px 22px 18px", color: "#fff",
    fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600,
    lineHeight: 1.25, letterSpacing: "-0.01em",
    background: "linear-gradient(180deg, transparent 0%, rgba(26,24,20,0.78) 100%)",
  },
};

const scStyles = {
  frame: {
    background: "var(--white)", borderRadius: 4,
    boxShadow: "var(--shadow-xl)", border: "1px solid var(--border)",
    padding: "32px 34px 22px", transform: "rotate(0.5deg)",
    position: "relative",
  },
  head: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-start",
    paddingBottom: 20, borderBottom: "2px solid var(--ink-900)",
  },
  kicker: {
    fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600,
    letterSpacing: "-0.01em", color: "var(--ink-900)",
  },
  period: { fontSize: 13, color: "var(--fg-muted)", marginTop: 2, fontFamily: "var(--font-mono)" },
  seal: {
    display: "inline-flex", alignItems: "center", gap: 6,
    fontSize: 12, fontWeight: 600, color: "var(--forest-600)",
    background: "var(--forest-50)", border: "1px solid var(--forest-200)",
    padding: "6px 12px", borderRadius: 99,
  },
  rows: { padding: "18px 0 8px" },
  row: { display: "flex", alignItems: "baseline", padding: "11px 0" },
  rowTotal: { borderTop: "1px solid var(--border)", marginTop: 6, paddingTop: 16 },
  rowLabel: { fontSize: 15, color: "var(--fg)" },
  rowLabelTotal: { fontSize: 16, fontWeight: 600, color: "var(--ink-900)" },
  dots: { flex: 1, margin: "0 10px", borderBottom: "1px dotted var(--border-strong)", transform: "translateY(-3px)" },
  rowVal: { fontFamily: "var(--font-mono)", fontSize: 15, fontVariantNumeric: "tabular-nums", color: "var(--ink-800)" },
  rowValTotal: { fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: "var(--terracotta-600)" },
  foot: {
    display: "flex", justifyContent: "space-between", marginTop: 14,
    paddingTop: 14, borderTop: "1px solid var(--border-faint)",
  },
  footItem: { fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.03em", textTransform: "uppercase", fontWeight: 600 },
};

const rsStyles = {
  wrap: {
    position: "absolute", bottom: -44, left: -48,
    background: "var(--white)", borderRadius: 14,
    boxShadow: "var(--shadow-lg)", border: "1px solid var(--border)",
    padding: "16px 20px", width: 300, transform: "rotate(-3deg)",
  },
  head: { marginBottom: 10 },
  rows: {},
  row: { display: "flex", justifyContent: "space-between", alignItems: "baseline" },
  vendor: { fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, color: "var(--ink-800)" },
  amount: { fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: "var(--ink-900)" },
  meta: { display: "flex", gap: 6, marginTop: 8 },
  tag: { fontSize: 11, fontWeight: 500, color: "var(--fg-muted)", background: "var(--paper-2)", border: "1px solid var(--border-faint)", padding: "3px 8px", borderRadius: 99 },
};

window.Hero = Hero;