// Inlinr Editor — email block components rendered on the canvas
// Each block is a self-contained section. Selection / outline is handled by the wrapper.

const Block = ({ block, selected, onSelect, children }) => (
  <div className={`eb-block${selected ? " is-selected" : ""}`}
       data-block-id={block.id}
       onClick={(e) => { e.stopPropagation(); onSelect?.(block.id); }}>
    {selected && (
      <>
        <div className="eb-tag">
          <Icon name={block.icon} size={11} />
          <span>{block.label}</span>
        </div>
        <div className="eb-handle eb-handle--top" />
        <div className="eb-handle eb-handle--bottom" />
      </>
    )}
    {children}
  </div>
);

const HeroBlock = ({ block, selected, onSelect, theme }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="hero">
      <div className="hero-brand">
        <svg width="78" height="20" viewBox="0 0 220 56" fill="none" aria-label="Inlinr">
          <rect x="6" y="14" width="36" height="6" rx="3" fill="currentColor"/>
          <rect x="6" y="26" width="22" height="6" rx="3" fill="currentColor" opacity="0.55"/>
          <rect x="6" y="38" width="30" height="6" rx="3" fill="currentColor" opacity="0.30"/>
          <circle cx="46" cy="17" r="3.2" fill="#3b6bff"/>
          <text x="64" y="38" fontFamily="Plus Jakarta Sans, system-ui, sans-serif"
                fontSize="30" fontWeight="700" letterSpacing="-0.04em"
                fill="currentColor">inlinr<tspan fill="#3b6bff">.</tspan></text>
        </svg>
      </div>
      <div className="hero-eyebrow">Welcome aboard</div>
      <h1 className="hero-title">{block.heading || "You're on the Pro plan."}</h1>
      <p className="hero-body">
        Everything you need to ship better email — drag‑and‑drop authoring,
        native multilingual variants, dark mode and one‑click ZIP export.
      </p>
      <a className="hero-cta">
        Open the composer
        <Icon name="chevronRight" size={12} />
      </a>
    </div>
  </Block>
);

const TextBlock = ({ block, selected, onSelect }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="text-block">
      <h3>{block.heading || "What you can do today"}</h3>
      <p>
        Compose with <strong>real production blocks</strong> — every row inlines its CSS
        on export. Author once in your source language, then add a <a href="#">locale</a> and
        translate inline. Hit <kbd>⌘ ⇧ E</kbd> when you're ready to ship.
      </p>
    </div>
  </Block>
);

const ColumnsBlock = ({ block, selected, onSelect }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="columns-block">
      <div className="col">
        <div className="col-art col-art--1"><Icon name="globe" size={20} /></div>
        <h4>Multilingual</h4>
        <p>Author once. Translate per locale, side‑by‑side.</p>
      </div>
      <div className="col">
        <div className="col-art col-art--2"><Icon name="moon" size={20} /></div>
        <h4>Dark mode</h4>
        <p>Two themes from one source. No duplicate templates.</p>
      </div>
      <div className="col">
        <div className="col-art col-art--3"><Icon name="download" size={20} /></div>
        <h4>ZIP export</h4>
        <p>CSS inlined, images bundled, ready for any ESP.</p>
      </div>
    </div>
  </Block>
);

const CtaBlock = ({ block, selected, onSelect }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="cta-block">
      <div className="cta-title">Ready to start authoring?</div>
      <a className="cta-button">Open my workspace</a>
      <div className="cta-sub">No credit card. Pro features for 14 days.</div>
    </div>
  </Block>
);

const DividerBlock = ({ block, selected, onSelect }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="divider-block"><hr /></div>
  </Block>
);

const FooterBlock = ({ block, selected, onSelect }) => (
  <Block block={block} selected={selected} onSelect={onSelect}>
    <div className="footer-block">
      <div className="footer-brand">
        <svg width="54" height="14" viewBox="0 0 220 56" fill="none">
          <rect x="6" y="14" width="36" height="6" rx="3" fill="currentColor"/>
          <rect x="6" y="26" width="22" height="6" rx="3" fill="currentColor" opacity="0.55"/>
          <rect x="6" y="38" width="30" height="6" rx="3" fill="currentColor" opacity="0.30"/>
          <circle cx="46" cy="17" r="3.2" fill="#3b6bff"/>
          <text x="64" y="38" fontFamily="Plus Jakarta Sans, system-ui, sans-serif"
                fontSize="30" fontWeight="700" letterSpacing="-0.04em"
                fill="currentColor">inlinr<tspan fill="#3b6bff">.</tspan></text>
        </svg>
      </div>
      <div className="footer-links">
        <a>Help centre</a><span>·</span><a>Status</a><span>·</span><a>Manage preferences</a><span>·</span><a>Unsubscribe</a>
      </div>
      <div className="footer-legal">
        Inlinr SAS · 14 rue de Paradis, 75010 Paris · You receive this because you signed up for an Inlinr account.
      </div>
    </div>
  </Block>
);

const BLOCK_RENDERERS = {
  hero: HeroBlock,
  text: TextBlock,
  columns: ColumnsBlock,
  cta: CtaBlock,
  divider: DividerBlock,
  footer: FooterBlock,
};

const renderBlock = (block, props) => {
  const C = BLOCK_RENDERERS[block.type] || TextBlock;
  return <C key={block.id} block={block} {...props} />;
};

Object.assign(window, { Block, HeroBlock, TextBlock, ColumnsBlock, CtaBlock, DividerBlock, FooterBlock, renderBlock });